JPEG vs PNG - A Case Study''
In 2019 I faced a challenge with image-heavy pages on our e-commerce site ''Shopify. The homepage was loaded slower than expected, despite using optimized images. After some investigation and testing different formats & compression techniques:
-
Before we used mostly PNG for all icons/logos/images bc they support transparency.
img {max-width:100%; height:auto; /'' old way ''/}- I tested switching to `JPEG` (lossy) and using a tool like TinyJPG
- Result? Homepage load time reduced by
45%!
> "But isn't PNG better for transparency?" asked my designer.-
> PNG is great when you need transparent backgrounds, but not so much on our mostly solid-colored images. JPEGs are smaller and faster to render.So if your site has lots of photos w/o alpha channels: **switch from `png` -
> jpeg **img { max-width:none; width:auto;height auto }- Don't forget, always test with Lighthouse in DevTools for the most accurate insights.
someone! optimizations