MyListing Club

Image Optimization for MyListing Websites

Building better MyListing websites. One guide at a time.

Guide Contents

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.

But, what if we could resize images to automatically fit into their containers, with very minimal effort?

Well, we can, and the steps to do that are just part of the value that’s found within this guide.

Associated Partner Discounts

At only $4, even if you sign up for our Premium Membership just to get this deal, you still come out ahead.

MyListing Image Governance

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

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

Generally speaking, if we look at an image with dimensions of 1920 x 1080 px and in .jpeg format, it is around 315 KB.

The 1920 x 1080 px dimensions are significant to MyListing, as those are the recommended dimensions for Cover Images.

Our Approach

We limit the image upload size, as previously mentioned, using the 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.

ShortPixel Adaptive Images (SPAI)

MyListing Club Backstory

We have been working with the ShortPixel team for quite some time now, to further optimize images that appear throughout a MyListing website (Explore pages, Listing Feeds, Single Listings, etc.).

This guide, along with our ongoing work with the ShortPixel team has helped us form a partnership with their highly-talented team, and bring a bonus credits deal to our community.

Be sure to check out the ShortPixel case study notes later on in this guide to see how your MyListing website can really benefit from this plugin.

These days, we use the ShortPixel Adaptive Images (SPAI) plugin for every MyListing website of our own, as well as every website we build for clients.

SPAI Implementation

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.

Base Configuration

What we find for MyListing websites is you can typically use the default SPAI settings, unless you find a really good reason not to.

An example of a really good reason would be if you’re running a photography-based website where the images need to stay as close to their original quality as possible.

SPAI Wizard

ShortPixel AI has a really nice wizard that allows you to easily go page by page and let it choose the optimal settings for you.

You only need to run the wizard against pages and posts where the structure of the content is significantly different, rather than against every piece of content on your website.

We’ve compiled a list of the content that’s typically targeted with the wizard.

  • Home Page
  • Blog Page
  • Explore Page (Note: If you have multiple Explore pages, only run the wizard against one of them unless they are wildly different in terms of construction.).
  • Single Blog Post (Note: We assume you have a blog template that applies to all of your posts, so you would only run the wizard against one blog post unless they are wildly different in terms of construction.).
  • Single Product Page (Note: We assume you have a single product template that applies to all of your products, so you would only run the wizard against one product unless they are wildly different in terms of construction.).
Play Video

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.

MyListing & ShortPixel AI Case Study

In this case study, we cover the journey of migrating from the ShortPixel Image Optimizer (SPIO) plugin to the ShortPixel Adaptive Images (SPAI) plugin.

Explore Page Configuration

Listing Preview Cards

The Preview Cards for this Explore Page are configured with the Default Template and Gallery Background.

Single Listings

The Explore page is using Template 1 and is configured to show 100 listings per page (i.e. pagination). 

While the website is configured to show 100 listings per page, there is only a total of 67 listings at this time, all of which are displayed.

Of the 67 listings, each has 1-3 images displaying as part of the gallery background and some have a logo (i.e. avatar).

Additionally, the listings pull in Map Markers, which can be seen in the image below.

Explore Page Performance Baseline

Listing Preview Card Analysis

The image below is a Gallery image, from a listing’s Preview Card and as you can see, it is weighing in heavy at 905.3 KB.

What we really want to look at here is how the image had to be resized (dimensions) from 720 x 960 px to 389 x 519 px, in order to fit its container within the Preview Card.

For this resizing to happen, the server must use some of its resources and this is just for one image. We have to keep in mind that the server must provide resources to resize any other images that are not sized correctly.

Listing Logo Analysis

The image below is a Logo, from a listing’s Preview Card.

This image had to be resized (dimensions) from 150 x 150 px to 50 x 50 px, in order to fit its container within the Preview Card.

Map Marker Analysis

As mentioned above, when listings are displayed on a map, Map Markers are pulled in as well. 

The image below shows one of those Map Marker images had to be resized (dimensions) from 200 x 200 px to 42 x 42 px, in order to fit its container.

Website Logo Analysis

Outside of the actual Explore page widget, we are also loading images like the website logo, website favicon, etc.

The image below is this website’s Logo.

Note: We have removed the logo from our screenshot, for privacy reasons.

The image had to be resized (dimensions) from 1024 x 819 px to 48 x 48 px, in order to fit its container within the website’s header area.

Overall Image Analysis

Looking at the Total Image Analyzed, we see 77 images loading

The Total Image Weight of this Explore page is coming in at 18.3 MB (rounded down to 18 MB), which is extremely heavy.

Overall Performance Analysis

We know from above, that the Total Image Weight of this page is 18.3 MB, and looking at the image below, we show the Total Page Size (Weight) is 19.1 MB. 

As we can see, images are the main reason for the page weight here, and better optimizing the images of this page will make a huge (positive) impact on the performance and user experience.

Single Listing Configuration

Cover Area

The Single Listings are configured to use Cover Image as the Cover Background style, which also includes a logo in the cover area.

Single Listing Performance Baseline

Cover Image Analysis

Our client already did some good work with this one, by uploading a perfectly-sized Cover Image, however, there is still room for improvement.

Looking at the image, it clocks in at 543.9 KB and it’s being served in JPEG format, rather than the next generation WebP format.

We should be able to further reduce the weight of this image.

Listing Logo Analysis

In the Listing Preview Card Analysis section above, we covered this same image.

However, this time it must be resized yet again from 150 x 150 px to 42 x 42 px to fit its container. 

Website Logo Analysis

Just like the Explore page and every page on the website, the website’s logo is loaded on Single Listing pages.

Overall Image Analysis

The Total Image Weight is coming in at 1.1 MB (rounded down to 1 MB), which is heavy.

Looking at the Total Image Analyzed, we see 22 images.

Tip: MyListing websites that use Related Listings, the Preview Card images for those listings also add weight to a Single Listing page, and would have been counted here had they been present.

Overall Performance Analysis

We know from above, that the Total Image Weight of this page is 1.1 MB, and looking at the image below, we show the Total Page Size (Weight) is 2.21 MB. 

As we can see, images are accounting for approximately 50% of the overall page weight, and better optimizing the images of this page will make a positive impact on the performance and user experience.

Remove ShortPixel Image Optimizer (SPIO)

The first thing we want to do is remove the ShortPixel Image Optimizer (SPIO) plugin.

While you can use both SPIO and SPAI, you only need to use SPAI.

Tip: When you remove SPIO, choose to not Keep the ShortPixel settings on plugin deletion, by unchecking the box before clicking the Deactivate button. This ensures those settings are cleared out of your database.

Remove Any Other Image Optimization Solutions

The ShortPixel Adaptive Images (SPAI) plugin is all you need for image optimization at the server level.

If you have any other solutions (plugins, snippets, etc.) providing image optimization (compression, lazy loading, etc.), you can remove them. 

SPAI will conflict with other Lazy Loading solutions and will let you know if you have conflict within the main WordPress Dashboard area. If you see this conflict message, you simply need to identify where the conflict is coming from and remove it.

Tip: WP Rocket, Perfmatters, and SG Optimizer are examples of solutions that provide Lazy Loading features.

Explore Page Optimization Results

The before and after results for the entire Explore Page is shown below, and as we see, there was a massive drop in the Total Page Size.

Listing Preview Card Optimization Results

The before and after results for a Listing Preview Card gallery image is shown below.

As we see, there was a significant drop in Image Weight, dropping from 905.3KB to 45.1KB.

Looking at the after results, we see this was accomplished by converting the image from JPEG to WEBP and we are serving the image only at the size it needs to be (389 x 519).

Listing Logo Optimization Results

The before and after results for a Listing Preview Card logo is shown below.

As we see, there was a significant drop in Image Weight, dropping from 5.5KB to 592.0B.

Looking at the after results, we see this was accomplished by converting the image from JPEG to WEBP and we are serving the image only at the size it needs to be (50 x 50).

Map Marker Optimization Results

The before and after results for Map Markers are shown below.

As we see, there was a massive drop in Image Weight, dropping from 17.4KB to 328.0B.

Looking at the after results, we see this was accomplished by converting the image from JPEG to WEBP and we are serving the image only at the size it needs to be (42 x 42).

Website Logo Optimization Results

The before and after results for the Website Logo is shown below.

As we see, there was a massive drop in Image Weight, dropping from 169.6KB to 498.0B.

Looking at the after results, we see this was accomplished by converting the image from PNG to WEBP and we are serving the image only at the size it needs to be (62 x 50).

Single Listing Optimization Results

The before and after results for Single Listings are is shown below, and as we see, there was a significant drop in the Total Page Size. 

Cover Image Optimization Results

The before and after results for a Single Listing cover image is shown below.

As we see, there was a significant drop in Image Weight, dropping from 543.9KB to 207.4KB.

Looking at the after results, we see this was accomplished by converting the image from JPEG to WEBP and we are serving the image only at the size it needs to be (960 x 641).

Listing Logo Optimization Results

The before and after results for a Single Listing logo is shown below.

As we see, there was a significant drop in the Image Weight, dropping from 5.5KB to 476.0B.

Looking at the after results, we see this was accomplished by converting the image from JPEG to WEBP and we are serving the image only at the size it needs to be (42 x 42).

Website Logo Optimization Results

The before and after results for the Website Logo is shown below. As a reminder, we are hiding the logo for privacy concerns.

As we see, there was a massive drop in the Image Weight, dropping from 169.6KB to 498.0B.

Looking at the after results, we see this was accomplished by converting the image from JPEG to WEBP and we are serving the image only at the size it needs to be (50 x 50).