MyListing Support – Image Optimization with ShortPixel

Guide Overview:

UPDATE: We are working with ShortPixel on doing more with their Adaptive Images plugin, as it relates to optimizing some of the various MyListing images. So, for the purposes of this guide, we are putting the SPAI plugin on hold.

While we are big fans of the Imagify plugin and we’ll continue to use it on some of our websites, we will be focusing on ShortPixel’s Image Optimizer (SPIO) and ShortPixels’s Adaptive Images (SPAI) plugins for this post. 

So, why are we here, besides the obvious…image optimization? MyListing knowledge nuggets. Maybe we’ll coin that phrase!

Certain images throughout the theme are sized in a way to where they are being loaded with larger dimensions than needed. The only way to address this is to use CSS or to edit the theme files. But, what if we could resize images to automatically fit into their containers?

At the very least, we want to be able to offer MyListing users guidance on how to properly use the various ShortPixel solutions (and Imagify) within their environments. The MyListing websites that we did not design ourselves or those that are not covered under our maintenance plans are off of our radar, so we obviously don’t have insight into what’s going on with those.

As a next level, we want to guide users on how to automatically serve up the exact image dimensions for their use (Preview Card, Single Listing, etc.). We are currently working with ShortPixel to hopefully make this is a possibility. Stay tuned!

MyListing Image Governance
MyListing & Imagify
MyListing & ShortPixel Image Optimizer
MyListing & ShortPixel Adaptive Images

If you get value from this type of content, help us keep it free.

MyListing Image Governance

Our Approach

For our websites, we set a 600KB max limit for image upload file sizes. We also educate users about this limitation using the applicable Submit Form field descriptions (Logo, Cover Image, Image Gallery, etc.). While this may seem too restrictive, if you take a closer look, you’ll see that’s not the case.

If we look at a full-color, 1980 x 594 pixels .jpeg image, it is around 315KB and has an Aspect Ratio of 10:3 (3:33:1). The 1980 x 594 dimensions are significant to MyListing, as those are the dimensions for the Cover Image container.

So, as far as front-end image submissions (Logo, Cover Image, Gallery Images, etc.) from your users go, these dimensions can be a worst-case scenario. The downside to just rolling with a 1980 x 594 px Cover Image, is that a lot of the subject matter gets lost as the image expands to “cover” the container.

We tested many Aspect Ratios for the Cover Image, to find what we felt was the perfect balance between showing enough subject matter in a photo and file size. In the end, we determined the “Instagram Wide” Aspect Ratio (1980 x 1042 px) was the ideal ratio for MyListing Cover Images. The Instagram Wide ratio can easily be tested and set using Croppola’s FREE online tool.

Our same image with dimensions of 1980 x 1042 px, clocks in at 536KB, before it has even been optimized (compressed) with our image optimization plugin of choice. So, as long as you set a 600KB max limit for image upload file sizes, you no longer need to worry about configuring image optimization plugins to automatically resize images larger than “x”, which in turn takes some strain off of your server. The compression functionality of your image optimization plugin is all you need!

Please keep in mind that any limits you set can easily be changed as needed. It will be a much better experience to gradually ease up on restrictions, rather than to find out later you were too lenient from start.

How We Do It

Limite Image Upload Size

The first thing we want to do is limit the image upload size, by editing the MyListing Child Theme. We do this by going to Appearance > Theme Editorfunctions.php, and adding the code snippet below.

// WP – LIMIT IMAGE UPLOAD SIZE
function ml_max_image_size( $file ) {
$size = $file[‘size’];
$size = $size / 600;
$type = $file[‘type’];
$is_image = strpos( $type, ‘image’ ) !== false;
$limit = 600;
$limit_output = ‘600KB’;
if ( $is_image && $size > $limit ) {
$file[‘error’] = ‘Image files must be smaller than ‘ . $limit_output;
}//end if
return $file;
}//end ml_max_image_size()
add_filter( ‘wp_handle_upload_prefilter’, ‘ml_max_image_size’ );

Submit Listing Form

We have the governance in place with our code snippet, but the Submit Forms will still have text saying “Maximum file size: 128MB.”  At this point, we can either change the text with a plugin like Loco Translate or we can hide the text altogether.

Our approach is to hide the text completely and use the description area for each field (Logo, Cover Image, Gallery, etc.) to educate the users as to the file size upload limit, file format, file dimensions, etc. As a bonus, choosing to hide the text completely allows us to not need an additional plugin.

To hide the text, we add some CSS, by going to Theme Tools > Theme Options > Custom Code > CSS and adding the CSS shown below. This CSS will hide the text across all of your Submit Forms, regardless of the Listing Type. It’s a global change in other words.

/* ML – SUBMIT FORM – HIDE MEDIA UPLOAD SIZE GUIDELINES */
#submit-job-form .file-upload-field small {display:none!important;}

/* ML – SUBMIT FORM – ALIGNS SOME FIELD DESCRIPTIONS THAT WERE NOT UNIFORM WITH THE OTHERS */
#submit-job-form small.description {display:block;width:100%;margin-top:5px;}

MyListing Showcase – Submit Form

Our Client Made It Work

We understand that some MyListing website owners may look at our image governance and think there’s no way that could work for their website, whether it’s due to potential user friction or just because they don’t want to do it.

One of our clients thought there was no way this governance would work for them, as their user base was full of “really finicky people” that don’t want to be bothered with “limitations”. We asked them to give it a try

Out of her 3,000+ users, maybe 2 or 3 said the 720KB limit was an issue. When we talked with those users, they were trying to upload 10MB images from their mobile phone. After a simple email, these users understood why the limitation was there and they were able to get their images uploaded without issue.

Why You Should Too

While the lack of image governance can put a strain on your server, let’s put website performance optimization aside for the moment. We want to talk about website hosting storage and a real-world example of how it can be an issue if it gets out of control.

We recently had a MyListing website owner come to us looking to migrate their website to better hosting. This is typically a slam-dunk, but in this case, there was a big problem

The cheaper hosting vendor they were with offered tons of storage at a very cheap price. While this storage was on poor-performing technology/hardware, the sheer amount of storage was an enticing selling point. So, besides performance, what’s the problem?

This website had nothing in place to optimize images. It was essentially the Wild Wild West. Website users were able to upload anything and everything in terms of images, continuously adding to the cheap storage.

So, we were looking at over 30GB of images that needed to be migrated. Looking at the better premium website hosting vendors (Kinsta, WP Engine, Pagely, Flywheel, etc.), the website owner would be looking at $250/month+ to host their website.

At this point, they dug themselves into a bit of a hole. The only realistic options were to stick with their current hosting provider, do a mass deletion (dangerous and time-consuming), or find a way to offload the images to a separate vendor.

Long story short, without image governance in place, website owners can find themselves needing to add complexity and high costs that could have been avoided.

MyListing & Imagify

Our typical Imagify settings can be found by checking out our Optimize WordPress Websites for Outstanding Performance guide.

We ran a test Explore page through the Cloudinary Image Analysis tool. The 5 images on the page consisted of the primary website logo, the alternate website logo, and the logos from 3 listings.

MyListing & ShortPixel Image Optimizer (SPIO)

As recommended by the ShortPixel, website owners should only be running either the Image Optimizer or the Adaptive Images plugin, not both. It’s often overlooked, but the ShortPixel Adaptive Images plugin also optimizes images.

ShortPixel Image Optimizer Settings

General

All settings are the default unless specifically mentioned below.

  • Compression Type: Glossy (Note: We noticed an obvious difference in quality when we tested “Lossy” and when we compared it to Imagify’s “Aggressive” setting.)

Note: As we mentioned within the MyListing Image Governance section, the Resize large images feature isn’t needed if you’re already being restrictive on the max image file size.

Advanced

All settings are the default unless specifically mentioned below.

  • Convert PNG images to JPEG: Enable.
  • WebP Images: Enable, Deliver on the front-end, use the <PICTURE> tag syntax, and use the Global processing option.
  • Optimize other thumbs: Enable.
  • Process in front-end: Enable.

There is much for to get into here, such as WebP format, optimizing media outside of the default WP media folder, etc. Those settings and associated tests are outside of the scope of this post, but please check out our Optimize WordPress Websites for Outstanding Performance guide for more on this.

Cloudflare API

We use Cloudflare for all of our websites, so we have filled in our specific information here.

Bulk Optimization

With our settings now in place, we want to run ShortPixel’s bulk image optimization (General > Save and Go to Bulk Process > Start Optimizing) against all of our existing images. While our images have already been optimized with Imagify, we want ShortPixel’s algorithm to reflect here.

ShortPixel Image Optimizer Testing

As we did with Imagify, we ran our test Explore page through the Cloudinary Image Analysis tool. The 5 images on the page consisted of the primary website logo, the alternate website logo, and the logos from 3 listings. As we can see here, our image quality stayed the same, but our overall image weight dropped by over 50%.

Now, if we look specifically at one of our listing images from the analysis, we see that the listing logo (e.g. avatar) is being resized from 150×150 to 45×45 pixels in order to display properly.

In order to process this resizing down of the image, our servers allocate resources. While this may not seem like a big deal for a single image, let’s now multiply that by “x” number of listings that you are choosing to load up on your Explore page by default.

This is where we hope to see the magic of ShortPixel’s Adaptive Images come into play. Meaning, the plugin should automagically serve up the listing logo at 45×45, thus taking that task out of the hands of our own servers.

With testing complete, we deactivated and deleted the ShortPixel Image Optimization plugin. (Note: We recommend unchecking the option to keep the ShortPixel settings when deactivating the plugin, so as to remove all remnants of it from the database.)

MyListing & ShortPixel Adaptive Images (SPAI)

Reminder: As recommended by the ShortPixel, website owners should only be running either the Image Optimizer or the Adaptive Images plugin, not both. It’s often overlooked, but the ShortPixel Adaptive Images plugin also optimizes images.

ShortPixel Adaptive Images Settings

At this point, all of our images have been optimized with ShortPixel’s Image Optimizer. Even though we have removed the plugin, the images will remain optimized.

ShortPixel Adaptive Image Settings

General

All settings are the default unless specifically mentioned below.

  • Compression Type: Glossy (Note: We noticed an obvious difference in quality when we tested “Lossy” and when we compared it to Imagify’s “Aggressive” setting.).
  • Fade-in effect: Disable.
Advanced

To maintain an apples-to-apples comparison, we won’t be changing any settings here. If we had Cloudflare in place, at the time of this testing, we would have specified our Cloudflare API URL here.

ShortPixel Adaptive Images & SEO

We had some concern about the indexing of our images. Specifically, would search engines see our images as being served from our domain or from the CDN.

While images are read from the CDN, their origin is marked and identified as our domain.

This section is still in progress. Working with ShortPixel on some testing.

Let's empower others. Share the knowledge.

Share on twitter
Share on facebook
Share on linkedin