Add intrinsic image values to the HTML source code to ensure the correct size image is served
| Author: | Wiz Plugins (profile at wordpress.org) |
| WordPress version required: | 5.0 |
| WordPress version tested: | 5.7.2 |
| Plugin version: | 1.0.0 |
| Added to WordPress repository: | 11-05-2021 |
| Last updated: | 12-05-2021
Warning! This plugin has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
|
| Rating, %: | 0 |
| Rated by: | 0 |
| Plugin URI: | https://wizplugins.com/intrinsic-images-woo/ |
| Total downloads: | 521 |
| Active installs: | 10+ |
Click to start download
|
A fast website has never been more important. One of the things which can slow a website down a lot is images. This can be a disaster for an ecommerce store which relies on a fast website to generate sales. You may think your website is fine, but you can improve it further. How? Add intrinsic image values to the html source code to ensure the correct size image is served
You have probably done a lot already to ensure that your shop serves fast images. You have set thumbnail sizes, regenerated the thumbnails, optimised the images and may even be using a CDN. But if you look at the source code, specifically on a mobile, you’ll see a disturbing result. The shop page is serving full sized images!
What? It sure is. This will be hurting your results with places like Page Speed Insights and GT Metrix. Worse still, it will be negatively impacting your website visitors.
Thankfully Woo Intrinsic Images is here to save the day
Simply install, actrivate and set at the option to on and your website will begin serving the best fit images for your store. You will likely see immediate improvements from GT Metrix, Page Speed Insights and more
Screenshots
Settings page
Shop page before activating showing the full size image loading in the source code
Shop page after activating showing the smaller thumbnail loading in the source code
GT Metrix results. Left is before activating. Right is after activating
Page Speed Insights mobile results before activating
Page Speed Insights desktop results before activating
Page Speed Insights mobile results after activating showing an improvement in loading times
Page Speed Insights desktop results after activating showing an improvement in loading times
What is Woo Intrinsic Images?
WooCommerce Intrinsic Images add the intrinsic image sizes to the shop/archive product images ensuring the correct sized image is loaded
I can’t see any changes?
Make sure that you clear your cache then check again. You can also check the source code and look for intrinsicsize= in the code
What image sizes will it use?
It will use the image sizes set for the WooCommerce shop page. These settings are usually found in the customizer under Customize >> WooCommerce >> Product images >> Thumbnail width
What about different cropping ratios?
The plugin will use the values that are set in the ooCommerce image settings to ensure that the images served are correct
Some images make the layout look weird. Why
This is caused by small images. When you have an image that is smaller that the cropped dimensions it will force the width. This will cause the image to be either shorter or taller than other shop images. We sell a plugin that solves this plugin and perfectly aligns all shop elements
Does this work on the product gallery images?
Product gallery images were exlcuded by design. The vast majority of stores allow for zooming of the gallery images, so to enforce the use of the cropped version would mean that shoppers would be unable to zoom in. On mobiles this may not be as big a problem, but as the majority of cache plugins don’t cache seperately for mobile and desktop using the wp_is_mobile() function would not help in this instance. It may be something we release in the next version if enough request it, but very few cache plugins currently support seperate mobile and desktop versions
Browser support
The intrinsicimage size attribute supports about 95% of browsers currently in use. Essentially, only IE browser doesn’t support the intrinsicimage size attribute
ChangeLog
