Even if it feels like your site is loading “fast enough”, you will likely make more money if it loads faster.<\/p>\n\n\n\n
Why Image Optimization Came First<\/h2>\n\n\n\n
While working on a client’s site, I found that images made up over 80% of the total page weight. Uncompressed uploads were ruining mobile load times and driving away impatient visitors. I focused on four straightforward goals:<\/p>\n\n\n\n
- \n
- Cutting Down File Sizes:<\/strong> A smaller image will always load faster if everything else stays the same.<\/li>\n\n\n\n
- Making Main Images Load Instantly:<\/strong> Getting the top banner on screen immediately so visitors aren’t staring at a blank space and Google doesn’t penalize your search ranking.<\/li>\n\n\n\n
- Cutting Out Wasted Data:<\/strong> Shaving 2.5 MB off every page view saved over 125 GB of useless data transfer across 50,000 monthly visitors.<\/li>\n\n\n\n
- Keeping Visitors from Leaving:<\/strong> When pages load fast and stop jumping around as images pop in, people actually stick around instead of hitting the back button.<\/li>\n<\/ul>\n\n\n\n
I Implemented Three Fixes<\/h2>\n\n\n\n
They go beyond installing optimization plugins. The idea was to use modern image formats, with proper responsive sizing, and CSS or JS instead of images whenever possible.<\/p>\n\n\n\n
1. Upgrading to AVIF with a WebP Fallback<\/h3>\n\n\n\n
![\"Comparison](\"https:\/\/hellonitish.com\/blog\/wp-content\/uploads\/2025\/10\/serve-right-format-1024x585.webp\")
<\/figure>\n\n\n\nThe website was serving JPGs and PNGs with basic compression. I updated it to serve images in AVIF and WebP formats to visitors.<\/p>\n\n\n\n
- \n
- The AVIF format gives the smallest file size for the same image quality, followed by the WebP format.<\/li>\n\n\n\n
- Around 99% mobile and 95% desktop visitors have AVIF support. The remaining 5% support on desktop is covered by WebP.<\/li>\n<\/ol>\n\n\n\n
Here is how the numbers shifted on a single archive card image:<\/p>\n\n\n\n
- \n
- Original PNG Export:<\/strong> 541 KB<\/li>\n\n\n\n
- Standard JPEG:<\/strong> 263 KB<\/li>\n\n\n\n
- Optimized WebP:<\/strong> 41 KB (84% lighter)<\/li>\n\n\n\n
- Optimized AVIF:<\/strong> ~28 KB (over 90% total reduction)<\/li>\n<\/ul>\n\n\n\n
2. Responsive Sizing & Mobile Art Direction<\/h3>\n\n\n\n
![\"Responsive](\"https:\/\/hellonitish.com\/blog\/wp-content\/uploads\/2025\/10\/different-sized-sceneries-1024x585.webp\")
<\/figure>\n\n\n\nProper image optimization goes beyond serving the right format. I implemented two changes depending on the role an image served on the website.<\/p>\n\n\n\n
Resolution Switching<\/h4>\n\n\n\n
If an image (likely a product image) stays the same across devices, it is best to serve different resolutions depending on the screen size. I serve AVIF images first and then WebP images as fallback using code that looks similar to the snippet below.<\/p>\n\n\n\n
<picture class=\"neps-rspv\">\n <!-- AVIF Candidates with high-DPI mobile coverage -->\n <source \n type=\"image\/avif\"\n srcset=\"\n post-thumbnail-320.avif 320w,\n post-thumbnail-460.avif 460w,\n post-thumbnail-640.avif 640w,\n post-thumbnail-800.avif 800w,\n post-thumbnail-1024.avif 1024w\n \"\n sizes=\"(max-width: 767px) 100vw, (max-width: 991px) 50vw, 460px\">\n\n <!-- WebP Fallback -->\n <source \n type=\"image\/webp\"\n srcset=\"\n post-thumbnail-320.webp 320w,\n post-thumbnail-460.webp 460w,\n post-thumbnail-640.webp 640w,\n post-thumbnail-800.webp 800w,\n post-thumbnail-1024.webp 1024w\n \"\n sizes=\"(max-width: 767px) 100vw, (max-width: 991px) 50vw, 460px\">\n\n <!-- Default Fallback Image -->\n <img \n class=\"neps-rspv\"\n src=\"post-thumbnail-460.webp\"\n width=\"460\"\n height=\"263\"\n alt=\"Optimized client archive card asset\"\n loading=\"lazy\"\n decoding=\"async\">\n<\/picture><\/code><\/pre>\n\n\n\nBasically, we tell the browser the size at which we will render an image on different screen widths and give it a bunch of options. It then automatically selects the best one based on the situation.<\/p>\n\n\n\n
Art-Directed Breakpoints<\/h4>\n\n\n\n
Mobiles and desktops provide different viewing experiences to visitors. A 16:9 wide banner that looks great on PC will look cramped or suboptimal on mobile, where square or taller images look better. <\/p>\n\n\n\n
On multiple occasions, I have used the
<picture><\/code> tag to serve a redesigned, taller or square image on phones and a widescreen version on desktops. Both variants keep the main focus of the image front and center.<\/p>\n\n\n\nI also add explicit
width<\/code> andheight<\/code> attributes to each<source><\/code> tag to force the browser to reserve the exact layout space before anything downloads. This helps avoid unwanted shifts as the page loads, improving user experience and PageSpeed scores. <\/p>\n\n\n\n<picture class=\"neps-rspv\">\n <!-- Mobile: Square crop (up to 767px) in AVIF -->\n <source \n media=\"(max-width: 767px)\"\n type=\"image\/avif\"\n srcset=\"hero-mobile-400x400.avif 400w, hero-mobile-800x800.avif 800w\"\n sizes=\"100vw\"\n width=\"400\"\n height=\"400\">\n\n <!-- Mobile: Square crop in WebP -->\n <source \n media=\"(max-width: 767px)\"\n type=\"image\/webp\"\n srcset=\"hero-mobile-400x400.webp 400w, hero-mobile-800x800.webp 800w\"\n sizes=\"100vw\"\n width=\"400\"\n height=\"400\">\n\n <!-- Desktop: 16:9 landscape crop (768px+) in AVIF -->\n <source \n media=\"(min-width: 768px)\"\n type=\"image\/avif\"\n srcset=\"hero-desktop-600x338.avif 600w, hero-desktop-1200x675.avif 1200w\"\n sizes=\"(max-width: 1200px) 50vw, 600px\"\n width=\"600\"\n height=\"338\">\n\n <!-- Desktop: 16:9 landscape crop in WebP -->\n <source \n media=\"(min-width: 768px)\"\n type=\"image\/webp\"\n srcset=\"hero-desktop-600x338.webp 600w, hero-desktop-1200x675.webp 1200w\"\n sizes=\"(max-width: 1200px) 50vw, 600px\"\n width=\"600\"\n height=\"338\">\n\n <!-- Fallback Image: High priority, NEVER lazy-loaded if above the fold -->\n <img \n class=\"neps-rspv\"\n src=\"hero-desktop-600x338.webp\" \n width=\"600\" \n height=\"338\" \n alt=\"Responsive client hero visual\" \n fetchpriority=\"high\"\n decoding=\"async\">\n<\/picture><\/code><\/pre>\n\n\n\n3. Replacing Decorative Background Images with Pure CSS<\/h3>\n\n\n\n
Some websites I have audited load images when a carefully crafted CSS background would have done the job. Using CSS for simple background textures whenever possible has multiple advantages. They scale without quality loss and can receive real-time dynamic updates if you are looking for an immersive experience.<\/p>\n\n\n\n
Properly designed animated CSS backgrounds can also occasionally replace videos. I did this for a client who wanted a light beam to enter through a prism and come out as a spectrum on the other side. <\/p>\n\n\n\n
Performance is a priority here, so I offload any background animation to the GPU whenever possible.<\/p>\n\n\n\n
Getting the Loading Order Right<\/h2>\n\n\n\n
Cutting file sizes is only half the job. The perceived page load speed comes down to what loads first.<\/p>\n\n\n\n
I always prioritize the hero image because it is one of the first things visitors see on your website. Hero images should have
fetchpriority=\"high\"<\/code> and never lazy-load.<\/p>\n\n\n\nI also explicitly declare the width and height of all images in the HTML to prevent layout shifts when the image does actually load.<\/p>\n\n\n\n
For images that viewers will see only after they scroll, I instruct the browsers to load and decode them later on demand. This frees up the network and processor to focus all attention on immediately visible content.<\/p>\n\n\n\n
The Measurable Impact<\/h2>\n\n\n\n
You can see how all the optimizations I implement drastically reduce page size and load time by visiting these two pages with optimized and unoptimized images.<\/p>\n\n\n\n
\n\nWhy Default CMS Settings Aren’t Enough<\/h3>\n\n\n\n
Most business owners assume their CMS handles image optimization out of the box. In reality, the default CMS and plugin settings only do the bare minimum.<\/p>\n\n\n\n
Shopify:<\/strong> Generates resized WebP images, but that’s where it stops. It doesn’t serve lighter AVIF files. It also won’t serve different conversion-optimized banners on desktops and mobiles.<\/p>\n\n\n\n
WordPress:<\/strong> Out of the box, core only makes standard thumbnail sizes. Setting up AVIF, modern caching, and clean markup without layout shifts usually means installing bloated plugins that slow down your admin dashboard without properly fixing the front end.<\/p>\n\n\n\n
The Takeaway:<\/strong> Default CMS settings only handle generic scaling. They have no way to know which images you can eliminate completely and which optimized version of the hero image to serve to different visitors.<\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n
Final Thoughts<\/h2>\n\n\n\n
Real-world speed gains don’t come from micro-optimizing JavaScript while serving 3 MB hero banners. You have to serve the image in the right format using proper responsive markup. Offload simple graphics and animations to CSS, and fix your download priorities to make a difference where it matters.<\/p>\n\n\n\n
Servicing entirely different optimized image versions to different devices for A\/B testing and better conversions is also something CMS platforms can’t do by default.<\/p>\n\n\n\n
I can help you optimize your website images and videos for both site speed and conversion. You can request a detailed, completely free website audit right now.<\/p>\n\n\n\n
\n\n Sources: \n Deloitte: Milliseconds Make Millions<\/a> | \n Google: Mobile Page Speed Benchmarks<\/a>\n <\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Unoptimized images are almost always the single biggest bottleneck on slow websites. Great photos sell products, but you shouldn’t force mobile visitors to download the same massive images you serve desktop visitors. Multiple studies show how a faster website results in more sales Sources in footnote. Even if it feels like your site is loading […]<\/p>\n","protected":false},"author":2,"featured_media":10142,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-10095","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case-studies"],"_links":{"self":[{"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/posts\/10095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/comments?post=10095"}],"version-history":[{"count":78,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/posts\/10095\/revisions"}],"predecessor-version":[{"id":10388,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/posts\/10095\/revisions\/10388"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/media\/10142"}],"wp:attachment":[{"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/media?parent=10095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/categories?post=10095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/tags?post=10095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Standard JPEG:<\/strong> 263 KB<\/li>\n\n\n\n
- Original PNG Export:<\/strong> 541 KB<\/li>\n\n\n\n
- Making Main Images Load Instantly:<\/strong> Getting the top banner on screen immediately so visitors aren’t staring at a blank space and Google doesn’t penalize your search ranking.<\/li>\n\n\n\n