MyListing and ShortPixel Adaptive Images (SPAI)

Get the solutions your online business needs to succeed.

We have been working with the ShortPixel team to further optimize images that appear throughout a MyListing website (Explore pages, Listing Feeds, Single Listings, etc.) and we are excited to announce these optimizations have arrived!

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

Our Image Optimization for MyListing Websites guide, along with our work with ShortPixel has helped us establish a ShortPixel discount for MyListing Club members, and to form a partnership with their highly-talented team.

Explore Page Configuration

Listing Preview Cards

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

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.

The image 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. 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 page weight.

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

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

Better optimizing the images of this page will make a positive impact on the performance and user experience.

ShortPixel Adaptive Images (SPAI) Implementation

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.

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

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.

Implement ShortPixel Adaptive Images

Next, we install the ShortPixel Adaptive Images plugin from the WordPress repository.

Once the plugin is activated we then reference our Image Optimization for MyListing Websites guide to configure the plugin as well as verify that it is working.

Explore Page Optimization Results

The before and after results for the entire Explore Page is shown below. 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. 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).

Let's empower others. Share the knowledge.

Share on twitter
Share on facebook
Share on linkedin
Scroll to Top