Image optimisation guide for Indian web developers
Unoptimised images are the single biggest cause of slow Indian websites. This guide covers formats, compression, lazy loading, and the tools that make it manageable.
Walk into most Indian web development projects and you will find the same issue within five minutes: images that are far too large, in the wrong format, served without compression, and loaded without lazy loading. A homepage hero image of 3 megabytes. Product images that are 2000 pixels wide displayed in a 400-pixel column. PNG screenshots where JPEG would be fine. This is the most common and most fixable website performance problem in India.
Choosing the right image format
The format you use determines how much data the browser has to download. The current best practice hierarchy is: WebP first, then JPEG for photos, PNG only for images that need transparency.
WebP is a modern format developed by Google that produces images 25 to 35 percent smaller than equivalent JPEG images with similar quality. All modern browsers support WebP. If you are building a new website in 2023, there is no reason not to use WebP for all your images.
JPEG is fine for photographs and images with many colours where transparency is not needed. PNG is appropriate for logos, icons, and images with transparency. Avoid using PNG for photographs; the file sizes are dramatically larger than JPEG or WebP.
Avoid uploading screenshots or raw photos from DSLR cameras directly. A raw photo from a phone or camera can easily be 5 to 10 megabytes. Before uploading any image, resize it to the largest size it will ever be displayed on your website, then compress it.
Compression without quality loss
A JPEG image can typically be compressed from 100 quality to 70 to 80 quality with no visible difference to most users. This alone reduces file size by 50 to 70 percent.
Squoosh (squoosh.app) lets you drag and drop an image and adjust compression quality with a before-and-after preview. This is the fastest free tool for individual images.
For WordPress, ShortPixel automates this for you. It compresses images when you upload them. The "lossy" mode gives the best compression while maintaining acceptable quality. ShortPixel's paid plan starts at around ₹750 for 10,000 image compressions, which covers most small websites indefinitely.
ImageOptim is a free macOS desktop application that compresses PNG and JPEG files in bulk without quality loss. Useful for large batches of images before uploading.
Responsive images and proper sizing
Serving a 2000-pixel wide image to a mobile phone that will display it at 400 pixels wastes significant bandwidth. Indian mobile users on limited data plans pay for every megabyte.
In HTML, use the srcset attribute to specify different image sizes for different screen sizes. In WordPress, this is handled automatically when you upload images and use the built-in image functions. The theme and page builder you use matters here: well-coded themes generate responsive images automatically; poorly coded ones might not.
Always resize images to the maximum display size before uploading. If your website's content column is 800 pixels wide, there is no value in uploading a 3000-pixel wide image.
Lazy loading
Lazy loading means images below the viewport (below the fold) do not load until the user scrolls toward them. This dramatically reduces the initial page load time for pages with many images.
In modern HTML, adding loading="lazy" to image tags enables native browser lazy loading. WordPress has had this enabled by default since version 5.5. If you are using a page builder, check whether it enables lazy loading for images. Most major builders (Elementor, Divi, WPBakery) have this as a setting.
Do not lazy load the hero image or the first visible image on the page. Lazy loading the LCP image delays when it appears and hurts your Core Web Vitals score. Only lazy load images that start below the fold.
Audit your existing website
Run your homepage through Google's PageSpeed Insights and look for the "Properly size images" and "Serve images in next-gen formats" recommendations. These tell you exactly which images on your page need attention and how much file size you could save.
For a site with 50+ images, fixing them all manually is tedious. That is where a plugin like ShortPixel, Smush, or Imagify becomes valuable. They can bulk-process your entire media library.
Frequently asked questions
What is the maximum image file size I should upload to my website?
For hero images and full-width banners, aim for under 150 kilobytes in WebP format. For standard content images, under 80 kilobytes. For thumbnails and small images, under 30 kilobytes. These are targets, not hard limits, but they represent good practice.
Does image optimisation affect image quality visibly?
At compression settings of 70 to 85 quality (for JPEG/WebP), the quality difference is not visible to most users when viewing images at normal web display sizes. Only heavily compressed images (below 60 quality) show visible artefacts.
Should I convert all my existing PNG images to WebP?
For photographs and complex images stored as PNG, yes, converting to WebP will significantly reduce file sizes. For simple logos and icons that use transparency, PNG or SVG might still be appropriate depending on the complexity of the image.