By User Media on
How to optimize images for web: 1 in 10 sites sends over 5 megabytes
Make photos lighter without losing clarity: match pixels, format, compression, and loading behavior to every screen.
Images are usually a site’s most requested resource, and one in ten sites sends more than 5 MB of images on desktop and mobile. That is the HTTP Archive 90th percentile, cited by web.dev. Optimizing images for web means serving the version each screen actually needs, with the right format, compression, and loading order.
What should I check first: dimensions or kilobytes?
Start with the pixel size the image will occupy on the page, then consider the file weight that version produces. A photo can have few kilobytes and still look poor when it lacks pixels, or look sharp while downloading more data than the screen needs. MDN Web Docs explains that srcset offers versions with different intrinsic widths and sizes communicates their displayed space.
Pixels describe available detail; kilobytes describe how much must transfer before it appears. That order prevents a false solution: blindly reducing weight can erase relevant detail, while exporting the original photo for a thumbnail downloads data the visitor will never see.
What size should I export for each page placement?
Exporting starts with each placement’s real maximum width and the aspect ratio that preserves important content. A card, a product page, and a hero do not necessarily need the same file, even when they show the same photo. The size changes with the layout, device, and whether the crop must highlight a product or a detail.
On a product page, the gallery preserves the detail that explains the purchase while the thumbnail receives a much smaller version. On a service company’s hero, the photo is prepared for the hero’s maximum width; photos below the fold can wait. That is how images are defined from the placement in the online stores we design, not from the largest file available.
| Placement | Required version | Priority |
|---|---|---|
| Hero | Real maximum width | First |
| Card | Card width | By position |
| Thumbnail | Reduced crop | Later |
Which format fits a photo, logo, or transparency?
For raster images, which are made of pixels, WebP or AVIF generally compress better than PNG, JPEG, and GIF. The final choice depends on the content and compatibility your site needs; when an alternative is needed, picture can provide a PNG or JPEG fallback. That is the guidance from MDN Web Docs, and our WebP format guide compares all four in more detail.
A photo, logo, and icon are not judged by the same visual detail. A photo needs to retain texture and color; a logo or icon may need transparency and clean edges. Compare exported files at their displayed size, because the best format keeps visible information with less transfer in that specific case.
How can I compress an image without making it blurry?
Compression works when the exported version is compared at its final size, not when a fixed percentage is pursued. The result depends on the photo, format, displayed dimensions, and device. Fine texture, a product edge, or embedded text reveals lost detail sooner than a plain background.
The useful test alternates weight and clarity until the smaller file keeps what helps visitors decide. For a landing page, the ad file and page file can differ: the site needs a version that protects the main message and button, as in the landing pages we design.
How do I prepare responsive images for mobile?
Responsive images deliver a version with the pixels or crop appropriate to the available space. With srcset and sizes, the browser can choose a suitable version; with picture, the crop can also change when mobile needs to prioritize a different part of the scene.
A phone should not download the original studio photo just to fill a small card. Preparing several versions of the same crop reduces that load and keeps the product recognizable. On a site built in WordPress, the same reasoning applies: variants should match the space where they appear.
Which image loads first and which ones can wait?
The main image visible when the page opens should load immediately; images farther down can be deferred. Applying loading="lazy" to the LCP image, the largest one appearing at the start, delays its download and harms that metric. web.dev uses an LCP of 2.5 seconds or less for at least 75% of visits as its reference.
Reserving the aspect ratio before the image downloads prevents content from jumping when it appears. Declaring width and height lets the browser do that; for CLS, the good-experience reference is 0.1 or less for at least 75% of visits, according to web.dev.
How do I check whether images still slow the page?
The final check is to analyze the published URL and confirm which file each device downloads. PageSpeed Insights can review a page on different devices after images are replaced or adjusted. The review connects every resource’s weight to the actual experience, not just to an export on your computer.
An image that matters for search should be in an img element’s src attribute, including inside picture. Google can discover those images, but not CSS images; it also recommends retaining a fallback URL in src for responsive images, as Google Search Central explains.
Frequently asked questions about web images
Can I upload one large image and shrink it with CSS?
CSS can reduce visible space, but it does not stop the browser from downloading the large file it receives. To match transfer to real space, the page needs to offer variants of the same image and describe their space with responsive tools. Making it visually smaller does not replace that preparation.
Should I enable lazy loading for every image on my site?
Lazy loading works for images outside the initial viewport, not for the main opening image. The first relevant visual should be able to download early. Photos in lower sections, long galleries, or later recommendations are natural candidates to wait until they approach the screen.
How do I optimize WordPress images without changing their proportions?
Proportions remain intact when every variant keeps the original crop’s same width-to-height relationship. Optimization can reduce dimensions and weight without cropping when every version preserves that relationship. If mobile needs a different crop, that is a separate editorial choice best prepared with picture.
What alt text should a product photo have?
Alt text describes the information or function an image provides, not a generic list of visual traits. A decorative image uses alt=""; if it works as a link or button, the text describes the action. The W3C Web Accessibility Initiative guide distinguishes those cases.
Do you need images that load and communicate more clearly?
At User Media, we review every image’s role in your page, from size and loading behavior to the experience that supports your message. Let’s talk about your website.
