Image Optimization for MyListing Websites
Get the knowledge your online business needs to succeed.
The Image Optimization for MyListing Websites guide will show you how to optimize and govern your images for better overall performance. These images appear all throughout a MyListing website, whether they are within the theme or they appear outside of it (Elementor, Gutenberg, Classic Editor, etc.).
Some areas of the MyListing theme load images with dimensions that are larger than actually 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?
We want to guide users on how to automatically serve up the exact image dimensions for their use (Preview Card, Single Listing, etc.).
If you decide to pull the trigger on ShortPixel, be sure to grab the discount.
MyListing Image Governance
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.
We limit the image upload size, by editing the MyListing child theme. We do this from the WordPress dashboard by going to Appearance > Theme Editor > functions.php and adding this code snippet to the bottom of the file.
The snippet above not only sets the image upload limit in the back-end, but it also changes the associated text on Submit Forms, for image-related fields.
You can roll with the styling you see above, or you can take it a bit further.
Another 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.
To hide the text, we add some CSS, by going to Theme Tools > Theme Options > Custom Code > CSS and adding the “Remove Image Upload Size Label” snippet found here.
Note: The code snippet will hide the text across all of your Submit Forms, regardless of the Listing Type. It’s a global change in other words.
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 4,000+ users, maybe 2 or 3 said the 600KB 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.
ShortPixel Image Optimization Solutions
ShortPixel Adaptive Images (SPAI)
ShortPixel Adaptive Images allows you to have all of your image-related optimization issues solved with a simple click. With that one click, all of your website’s images are properly sized, smartly-cropped, optimized, and served them from ShortPixel’s global CDN. SPAI also serves WebP images to the right browsers automagically.
ShortPixel Image Optimizer (SPIO)
ShortPixel Image Optimizer is an easy to use, comprehensive, stable, lightweight, frequently updated, image and PDF compression plugin. All of your past images and PDF documents can be compressed with a single click. New images are automatically resized/rescaled and optimized on the fly, in the background.
Which ShortPixel Solution Should I Use?
We are often asked which ShortPixel plugin is best or when it’s better to use one over the other. Here’s our attempt to make things clearer.
- You can keep both plugins active as they won’t conflict with each other but we generally recommend you have just one plugin active.
- If your website’s audience is “local” and your website is hosted in the same region, then we would generally recommend you use SPIO.
- If your website’s audience tends to be widespread (e.g. whole US or North America or Europe or South America or global) then SPAI is the best option as it will considerably speed up the image delivery via the ShortPixel CDN.
- SPAI is also the recommended option if your website receives “serve scaled images” warnings when testing the site with GTMetrix. With SPAI you’ll serve scaled images whenever possible and this can lead to dramatic gains in some cases. For example, if you have a 100 x 100px placeholder on your website and the image used is 1024 x 1024px, SPAI will resize it to 100 x 100px and optimize it.
- SPAI is also the recommended option if PageSpeed Insights recommends you to “Defer offscreen images” as it serves the images with lazy load technology, by default.
- SPAI allows you to serve, on-the-fly, “next-gen” images like WebP regardless of the CDN you are using.
We only use the ShortPixel Adaptive Images (SPAI) plugin for all of our websites.
ShortPixel Adaptive Images (SPAI)
All settings are the default unless specifically mentioned.
- General > Smart Crop: Enable
- Advanced > Lazy-load the backgrounds: Enable
- Advanced > Backgrounds maximum width: 1920px
- Advanced > Replace in CSS files: Enable
- Advanced > Replace in JSON data > Also parse JSON AJAX calls to replace image URLs: Enable
- Advanced > Replace in JSON data > Lazy-load JSON URLs: Enable
Associate Your Website to Your ShortPixel Account
ShortPixel Adaptive Images does not require an API Key to start working. You only need to associate your website’s domain with your ShortPixel account so that your credits can be tracked and managed.
- Log into your ShortPixel account.
- Click Associate Domains.
- Add your domain (e.g. mylisting.club) in the provided box.
- Click the Add Domains button.
Note: If you have images on your website that have URLs different from the URL of your actual website then you need to associate those URLs as well. For example, if your website is mylisting.club and you have images also loading from mylisting.some-cdn.com then you need to associate both mylisting.club and mylisting.some-cdn.com to your account.
Testing ShortPixel Adaptive Images
Taking into account that SPAI optimizes and serves the images right after activating the plugin, the fastest way to know if your images are being optimized is by looking at the source code of the page and see where the image is coming from. So, assuming that you already activated the plugin, do the following:
- Find a page with an image and refresh it twice. (Note: Unless a page is visited, the images on that page won’t be optimized. So, reload once to “send” the images to optimize and another time to see the results.).
- Right-click on the image you want to have optimized.
- Click Inspect or Inspect Element, depending on the browser.
- The source code will open and the relevant line of code will be highlighted, showing /spai/ included in the file path and webp as the format, as seen in the image below.
Why Aren't My Images Optimizing?
ShortPixel Adaptive Images will look for PNG, GIF, JPEG (.jpg) files within image tags and in the CSS files that are loaded from your own domain and change the src (source) to the ShortPixel CDN.
Files that are loaded from other domains or images served through PHP (.php) are left untouched.
If some images are not displaying, work your way through the steps below, testing after each step by refreshing your page a couple of times.
- Advanced > Replace in JSON data > Also parse JSON AJAX calls to replace image URLs. : Disable
- Temporarily deactivate the ShortPixel Adaptive Images (SPAI) plugin and open a support ticket.
ShortPixel Image Optimizer (SPIO)
All settings are the default unless specifically mentioned.
- 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.
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
- Optimize other thumbs: Enable.
- Process in front-end: Enable.
We use Cloudflare for all of our websites, so we have filled in our specific information here.
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
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 x 150px to 45 x 45px 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 x 45px, removing the load from 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.)
Let's empower others. Share the knowledge.