I'm working on my new website and I'm planning to feature six images on the homepage at a size of 400x600, which will actually be 800x1200 on Retina displays. I also need to include larger images on project pages since it's important to showcase full website designs. My main concern is how to ensure these images don't load too slowly; I'd like to avoid having images that are around 2MB in size. I've considered using WebP for better file compression without losing quality, especially since it's now supported in WordPress. However, I read that Chrome for Android only started supporting it recently, and I'm hesitant to use a format that feels so cutting-edge. I'm looking for ways to make sure my images load fast, even on mobile networks. Any advice?
9 Answers
We utilize the browser's capabilities for image selection. We wrap images in a `` element with multiple `` tags going from the newest to oldest formats, which allows us to provide up to 5 sizes of each image format. We lazy load everything that's not above the fold while using blurred placeholders until they load. It works great!
Actually, Chrome on Android has supported WebP long before 2025, so you might be okay using it! To improve loading times, you could dynamically load large images. For any posts, show a smaller version initially and use a lightbox for the full-size image. If you want large images on landing pages, consider displaying a tiny, blurred version first, which loads quickly and fills the space until the real image comes in.
Here are some tips: Try a CDN, utilize WebP, serve large images only to devices that need them, and consider using a placeholder image while the large image loads. It won't necessarily speed things up, but it gives the impression of faster loading if done correctly!
Chrome has had WebP support for a while now, including on mobile. Using lazy loading combined with responsive images through `` and `srcset` is generally a straightforward way to handle loading large images, plus SVG could work for certain icons or simpler graphics.
Does no one really use `srcset` anymore? It's essential for responsive images!
WebP is widely adopted, and using lazy loading with responsive images will solve many of your speed problems. Plus, SVG is fantastic for simpler graphics. It's pretty much a settled issue now!
You could sign up for a free account at imagekit.io. They can optimize your images based on user capabilities, which might help with load times.
Have you checked if Cloudflare's free CDN can help with this? It caches your images and serves them faster, saving bandwidth and speeding up your site overall.
I've got images that are really large, and I serve them in AVIF as the primary format with WebP as a fallback, and a PNG for final fallback—my load times are super quick!
Related Questions
Cloudflare Origin SSL Certificate Setup Guide
How To Effectively Monetize A Site With Ads