Webp vs JPG vs PNG actual differences. A deep dive into optimizing images on a Kinsta-WooCommerce stack once it for all.
Just for reference, the performance of this page itself is quite fast, even with HD & PNG images:
Webp at 1100px wide: 62KB
JPG at 1080px: 107kb & more blurry!
PNG of 1600px wide = 1990KB!!!
Will instantly de-rank the page
Transparent Background is cool, but will cost us in slowness & profit
further investigations when trying to scale images up and down:
Webp forced downscale by 50% via HTML:
retains largest image but scaled down
Webp lazy downscale by 50% via WORDPRESS’s “Edit” pencil icon:
does not use largest image, uses a WORDPRESS generated smaller image instead
What are some solutions?
1. RESIZE all new pics via Imsanity (FREE)
Testing on multiple sites, I have to conclude that Imsanity’s PNG to JPG features do not work.
It’s a free plugin, so we get what we pay for.
Here are the ideal settings for Imsanity, keep it simple, we’ll just use it’s resizing features:
2. Use the ol’ reliable PNG to JPG plugin (FREE & EASY)
When the simple stuff works better than the bloated stuff, of course:
Here’s the MB’s saved according to the plugin:
Details
3. Use KINSTA & CLOUDFLARES built in Image Optimizer for WEBP
bonus: built in minification
ALTERNATIVELY, try the same plugin dev but WEBP version!
Tech & business junkie.
Former engineer, Shopify owner and developer.
Currently focused on social media automation.
- WordPress Blurry Images Problem – “scaled” jpgs served and blurry - September 30, 2023
- Dequeue Scripts in WordPress Not Working – Fixed - September 26, 2023
- What Happens When You Refund an AfterPay Customer Midway Through Their Payments – WooCommerce-Stripe - August 25, 2023
