Image optimization is the process of delivering each image on a website in the most efficient format, at the right dimensions and with sensible compression, so pages load quickly without visibly losing quality. In practice that means using modern formats such as WebP or AVIF, resizing photos to the size they are shown, serving smaller versions to phones through srcset, and lazy loading pictures that sit further down the page. Done well, it is one of the cheapest speed improvements you can make.
Images are usually the heaviest part of a typical business web page. A single uncompressed photo straight from a phone or DSLR can weigh more than all the text, code and fonts on the page combined. This guide explains each part of the job in plain terms, so you can check your own site or brief your developer properly.
Why does image optimization matter so much?
Because heavy images slow down the moment visitors first see your main content, and that delay costs attention, enquiries and search visibility. On mobile data connections the difference is even more noticeable.
Google’s Core Web Vitals measure real user experience, and two of the three metrics are directly affected by images. Largest Contentful Paint (LCP), which Google considers good at 2.5 seconds or less, is very often a hero image or banner. Cumulative Layout Shift (CLS), good at 0.1 or less, gets worse when images load without reserved space and push text down the page. If you want the background on these metrics, our guide to Core Web Vitals covers them in more detail.
There are practical reasons beyond rankings too:
- Many visitors in India browse on mid-range phones over mobile data, where every extra megabyte is felt.
- Smaller pages use less hosting bandwidth and put less load on your server.
- Product and portfolio pages with dozens of images become usable instead of sluggish.
- Faster pages simply feel more professional, which matters when a buyer is comparing suppliers.
Which image format should you use: JPEG, PNG, WebP, AVIF or SVG?
For most photos, use WebP or AVIF; for logos and icons, use SVG; keep PNG only for graphics that need sharp edges and transparency where SVG is not possible. JPEG remains a safe fallback.
Each format has a job. The table below summarises where each one fits on a typical business website.
| Format | Best for | Strengths | Watch out for |
|---|---|---|---|
| JPEG | Photos where compatibility matters most | Works everywhere, decent compression | Larger than WebP or AVIF at similar quality; no transparency |
| PNG | Screenshots, graphics with transparency | Lossless, crisp edges | Very large for photos; often misused for banner images |
| WebP | Photos and graphics on most modern sites | Smaller than JPEG and PNG, supports transparency, widely supported | Very old browsers need a fallback |
| AVIF | Photos where file size is critical | Often smaller than WebP at similar quality | Slower to encode; check your platform and tools support it |
| SVG | Logos, icons, simple illustrations | Vector, sharp at any size, tiny files | Not for photos; uploaded SVGs must come from trusted sources |
WebP is supported by all current major browsers, and AVIF support has become broad in recent versions of Chrome, Firefox, Edge and Safari. Browser support keeps changing, so check the current situation if you have an audience on older devices. The safest route on a custom build is to offer AVIF or WebP with a JPEG fallback, which modern HTML handles cleanly using the picture element.
A note on SVG uploads
SVG files are code, not just pictures, so they can carry scripts. Use SVGs for your logo and icons, but only from your designer or a trusted source, and on WordPress use a method that sanitises SVG uploads rather than allowing any file blindly.
How big should your images actually be?
An image should be no larger in pixels than the largest size it is displayed at, allowing roughly double for high-density phone and laptop screens. Uploading a 5000-pixel photo to fill a 400-pixel card wastes almost all of that data.
This is the most common problem we see on small business sites, and it has nothing to do with format. A good working routine is:
- Measure the display size. Check how wide the image appears on desktop and on mobile. A full-width hero might show at around 1600 to 1920 pixels wide; a team photo in a three-column grid might only need 600 to 800.
- Resize before upload. Export at the needed width, not the camera’s original size.
- Compress sensibly. For lossy formats, moderate quality settings usually look identical to the original on screen. Compare the result side by side rather than trusting a number.
- Strip unnecessary metadata. Camera data such as lens settings and sometimes location adds weight and can reveal information you did not intend to publish.
- Name the file well. Use short, descriptive, hyphenated names before uploading.
Product photography deserves its own workflow, especially when you have hundreds of items. Our guide on product photography for online stores covers consistent sizes and backgrounds that also make optimisation easier.
What do srcset and sizes do?
The srcset and sizes attributes let the browser choose the most suitable version of an image for the visitor’s screen, so a phone downloads a small file and a large desktop monitor gets a larger one.
Without them, every visitor downloads the same file, usually the biggest one. With srcset, you list several widths of the same image, for example 480, 800, 1200 and 1600 pixels. The sizes attribute then tells the browser how wide the image will appear in the layout at different screen widths. The browser combines that with the device’s pixel density and picks the best match.
WordPress has generated srcset automatically for images inserted through the editor for many years, using the image sizes registered by your theme. That only works properly if the theme registers sensible sizes and outputs images through WordPress functions. Background images set in CSS, sliders from some page builders and images hard-coded into templates often skip this entirely, which is worth checking during any WordPress speed optimization work.
Art direction with the picture element
Sometimes the mobile version needs a different crop, not just a smaller file: a wide banner showing a factory floor might need a tighter, taller crop on a phone so the subject is still visible. The picture element lets a developer serve entirely different images by screen width, as well as different formats with fallbacks.
When should you use lazy loading, and when should you not?
Lazy load images that sit below the first screen, and never lazy load the main image that visitors see first, because delaying it directly worsens Largest Contentful Paint.
Lazy loading tells the browser to wait before downloading an image until the visitor scrolls near it. Modern browsers support this natively with the loading attribute set to “lazy”, and WordPress adds it automatically to many images. On long pages such as product listings, galleries and blog archives, it saves a great deal of data for visitors who never scroll to the bottom.
The common mistake is applying lazy loading to everything, including the hero banner, the logo or the first product image. Those should load immediately. For the single most important image above the fold, developers can go further and set fetchpriority to “high”, which hints to the browser that this file should be fetched early. Recent WordPress versions try to handle this automatically, but themes and page builders can still get it wrong, so verify it in PageSpeed Insights.
How do you prevent images from causing layout shift?
Always give images their width and height (or a CSS aspect ratio) so the browser reserves the right amount of space before the file arrives.
When dimensions are missing, the browser does not know how tall the image will be. Text renders first, then the image arrives and shoves everything down. Visitors lose their place, or tap the wrong button. Setting width and height attributes in the HTML, combined with responsive CSS that keeps the image fluid, solves this in nearly every case. The same principle applies to embedded videos, maps and advertisement slots. Accessibility and layout stability often overlap here; see our website accessibility basics for related checks such as meaningful alt text.
What does a practical image optimization workflow look like?
Set rules once, automate what you can, and check the pages that matter most. Image optimization works best as a habit built into publishing, not a one-time clean-up.
- Agree on upload rules with whoever adds content: maximum widths per image type, preferred format and naming.
- Automate conversion and compression on upload, through your CMS, a plugin or a build step, so nobody has to remember.
- Use a CDN or caching where appropriate so images are served quickly from servers closer to visitors and with long cache lifetimes.
- Write alt text for meaningful images, describing what the picture shows; leave decorative ones with empty alt.
- Audit key templates after launch and after major theme or plugin updates: home page, top service pages, product and category pages.
- Clean the media library occasionally, removing unused originals and oversized duplicates that bloat backups.
If you are planning a new site, put these rules in the brief. Our website content preparation guide explains how to collect images and copy before development so this does not become a last-minute scramble.
How can DA WebTech help with your images?
At DA WebTech, image handling is part of how we build, not an add-on. On custom and WordPress projects we register sensible image sizes, output responsive markup, keep the hero image out of lazy loading, set dimensions to avoid layout shift and set up automatic conversion to modern formats where the hosting supports it. For existing sites we start by measuring the real pages, because the biggest win is usually two or three oversized images on high-traffic templates rather than a site-wide overhaul.
Most of our clients are businesses in Ahmedabad and across Gujarat with product catalogues, project galleries or factory photos, which is exactly where image weight adds up fastest.
If your pages feel slow or PageSpeed Insights keeps flagging images, a focused review of your templates and media workflow usually shows where the weight is coming from. Share your website address through our quote request form and we will tell you honestly what is worth fixing first.
