Image Optimization for MyListing Websites

Get the knowledge your online business needs to succeed.

Overview

The Image Optimization for MyListing Websites guide will show you how to govern and optimize images by automatically serving them up at the exact dimensions for their use (Preview Cards, Single Listing Covers, etc.).

These are images that 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 loads images with dimensions that are larger than actually needed, but you can address some of this using the theme’s newer performance settings, CSS or by editing the actual theme files.

What if we could resize images to automatically fit into their containers? 

MyListing Image Governance
ShortPixel Image Optimization Solutions
ShortPixel Adaptive Images (SPAI)

MyListing Image Governance

For our websites, we set a 600KB max limit for image upload file sizes and we educate users about this limitation using the applicable Submit Form field descriptions (Logo, Cover Image, Image Gallery, etc.).

While the 600KB value may seem too restrictive, if you take a closer look, you’ll see that’s not the case.

Generally speaking, if we at a full-color, 1980 x 594 px .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.

Listing Cover Image

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 and 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.

Our Approach

We limit the image upload size, using our recommended method from our Limit Image Upload Size Code Snippet.

The code 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, but we like to take it a bit further, by completely removing the helper text (e.g. ‘Maximum file size: 600kb’) using our Remove Image Upload Label CSS Package.

We then use the description area for each image-based field (Logo, Cover Image, Gallery, Restaurant Menus, etc.) to educate the users as to the file size upload limit, file format, file dimensions, etc.

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”, but 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 and 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, and while this is typically a slam-dunk, in this case, there was a big problem.

They went with cheaper hosting which offered tons of storage at a very cheap price, but behind the scenes, this storage is typically on poor-performing technology/hardware.

This website was essentially the Wild Wild West, with no image governance taking place, and users uploading anything and everything in terms of images, continuously adding to the cheap storage.

We were looking at over 30GB of images that needed to be migrated.

Looking at the better premium website hosting vendors like Kinsta, 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 and 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.

ShortPixl Image Optimization Solutions

ShortPixel Adaptive Images (SPAI)

ShortPixel Adaptive Images allows you to have all of your image-related optimization issues solved with all of your website’s images 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, while 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 and 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.
  • SPAI is much more sensitive to conflicts with themes and plugins, as it uses JavaScript (JS) to modify the URLs of images. (Note: Make sure that no other lazy-load features are activated at the same time as the SPAI plugin. Also, after activating SPAI, be sure to test your website thoroughly, knowing that any encountered issues can be temporarily addressed by simply deactivating the plugin.).

We only use the ShortPixel Adaptive Images (SPAI) plugin for all of our websites.

Get ShortPixel bonus credits

ShortPixel Adaptive Images (SPAI)

Configuration

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.

  1. Log into your ShortPixel account.
  2. Click Associate Domains.
  3. Add your domain (e.g. mylisting.club) in the provided box.
  4. 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.

  1. 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.).
  2. Right-click on the image you want to have optimized.
  3. Click Inspect or Inspect Element, depending on the browser.
  4. 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.
Mylisting Image Optimization Spai

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.

Troubleshooting

Missing Images

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.

  1. Advanced > Replace in JSON data > Also parse JSON AJAX calls to replace image URLs. : Disable
  2. Temporarily deactivate the ShortPixel Adaptive Images (SPAI) plugin and open a support ticket.

Let's empower others. Share the knowledge.

Share on twitter
Twitter
Share on facebook
Facebook
Share on linkedin
LinkedIn
Scroll to Top

Find a bug or typo? Please let us know.