Image Optimization for MyListing Websites

Build Better MyListing Websites. One Guide at a Time.

Table of Contents

Overview

Guide Updated: 10/13/2021

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.

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 limitation may seem too restrictive, if you take a closer look, you will see that’s not the case, as we go on to discuss below.

Generally speaking, if we look at an image with dimensions of 1920 x 1080 px (Full HD) and in .jpeg format, it is somewhere around 315 KB, and those 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 and we completely remove the helper text (e.g. ‘Maximum file size: …) using the CSS shown below.

				
					//// INSTRUCTIONS: 
//// Copy and paste the code snippet below into Theme Tools > Theme Options > Custom Code > CSS.

--------------------------- CODE SNIPPET IS BELOW THIS LINE --------------------------- 

/* ML - SUBMIT FORM - REMOVE THE IMAGE UPLOAD SIZE LABEL */
#submit-job-form .file-upload-field small {
  display: none !important;
}
				
			

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, as shown below.

To see all of this in action, please visit any of our Starter Sites, and start the ‘Add Listing’ process.

Our Client Made It Work

We understand that some MyListing website owners may look at our image governance and think there is 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” (their words) that don’t want to be bothered with “limitations”, but we asked them to give it a try. 

Out of her 8,000+ users, only 2 or 3 said the 600KB limit was an issue so we talked with those users and found out 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 and 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.

The website owner had gone with cheaper hosting that offered tons of storage (typically on poor-performing technology/hardware) at a very cheap price, and their 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 worth of images alone that needed to be migrated and 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, the website owner had dug themselves into a deep hole and the options were to stick with their current hosting provider, do a mass deletion (dangerous and time-consuming), find a way to offload the images to a separate vendor solution, or just pay the super high price for hosting somewhere else.

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.), and this guide, along with our ongoing work has helped us form a partnership to where we can offer ShortPixel bonus credits to our members.

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 and you only need to associate your website’s domain with your ShortPixel account to start tracking your image credit usage.

  1. Log into your ShortPixel account.
  2. Click ‘Associate Domains’.
  3. Add your domain (e.g. mylisting.club) in the provided box.
  4. Click ‘Add Domains’.

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 is that for a lot of MyListing websites you can typically use the default SPAI settings, unless you find a really good reason not to, and one example would be if you are 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, and 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.

Below, is a list of content that we typically target 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, is configured to show 100 Listings per page (i.e. pagination), and while the website is configured to show that number of Listings, there is only a total of 67 Listings at this time, so that means all of them are displayed.

Of the 67 Listings, each one has 1-3 images that are 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, and 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 all images that are not sized correctly.

Listing Logo Analysis

The image below is a Logo, from a Listing’s Preview Card, and 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, and 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, and the image below is this website’s Logo, but please note that 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 loaded, and 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, so 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, and 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 and while you can use both SPIO and SPAI, you only need to use SPAI going forward, once all of your existing images have been optimized within your Media Library.

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, so any other solutions (plugins, snippets, etc.) providing image optimization (compression, lazy loading, etc.) at this level, can be removed.

SPAI will conflict with other Lazy Loading solutions and when it does, it will let you know within the main WordPress Dashboard area, and at that time it’s important to find where the conflict is coming from so you can eliminate 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 are shown below and we see 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 are shown below and we see 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 and we see 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 are shown below and we see 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 we see a significant drop in the Total Page Size. 

Cover Image Optimization Results

The before and after results for a Single Listing cover image are shown below and we see 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 are shown below and we see 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 are shown below and as a reminder, we are hiding the logo for privacy concerns.

There was a massive drop in the Image Weight, dropping from 169.6KB to 498.0B and as 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).

WooCommerce Subscriptions Ready

The latest version of the WooCommerce Subscriptions plugin is included (unlicensed) and once you have a Starter Site in hand, you can easily put in your own pricing, package features, graphics, etc.

Should you not wish to use WooCommerce Subscriptions, you can simply turn the Listing Subscription packages into standard MyListing packages in just a few clicks and be on your way.

  • Custom WooCommerce Endpoint Design
  • WooCoommerce Subscriptions Setup
  • Listing Subscription Packages
  • Listing Subscription Switching
  • Stripe Payment Gateway Plugin
  •  and more…

Note: The latest version of the WooCommerce Subscriptions plugin is included, but you need to purchase your own license or sign up for a qualifying MyListing Website Care plan if you wish to receive future plugin updates and support.

Premium Assets

Get licensed, premium plugins, valued at over $600 in the first year alone, making a Starter Site investment a no-brainer.

You will get licensed copies of all the plugins listed below, with the exception of the WooCommerce Subscriptions and WooCommerce Product Vendors, and the licenses are yours to keep, for as long as the plugins remain on your website.

  • Admin 2020 ($39)
  • Crocoblock Suite ($130)
  • Elementor Pro ($49)
  • Perfmatters ($25)
  • Permalink Manager Pro ($45)
  • SEOPress Pro ($39)
  • WooCommerce Product Vendors ($79) 
  • WooCommerce Subscriptions ($199)
  • WP Rocket ($49)