You open a webpage. The text appears immediately, but the hero photo seems to take forever. Sometimes the mobile connection deserves the blame. Often, though, the image was simply uploaded without being prepared for the web.
A huge photograph may appear at exactly the same displayed size as a much smaller file, while costing visitors far more data to load. When that photo is the page’s most prominent element, the delay becomes hard to ignore.
JPG, PNG or WebP? It depends on the picture
JPG is often a practical choice for photographs when lossy compression is acceptable. PNG is useful for preserving exact details or transparency without lossy compression, although files can be larger. WebP supports both lossy and lossless compression plus transparency, making it an efficient candidate for modern browsers.
There is no universal winner. web.dev’s image-format guide recommends considering the actual image, its required quality, transparency and file size. A fine-lined graphic deserves different treatment from a detailed photograph.
Dimensions matter just as much as the format
Imagine a picture 4,000 pixels wide that will be displayed in an 800-pixel content column. Serving the original may ask visitors to download and decode far more information than they need. Preparing suitably sized versions can avoid that waste.
Use Resize images to adjust dimensions, then Convert images to compare JPG, PNG and WebP versions. Inspect thin lines, small text and transparent areas before deciding which result to publish.
Don’t mistake a compression setting for a quality guarantee
There is no dependable rule that “80% quality always cuts the file size in half.” Results depend on the source image, its details and the encoding settings. A better test asks two questions: How much does this version weigh? Does it still look right?
Compress images lets you experiment with quality settings and check the result. If the output is larger or noticeably worse, don’t use it. Optimization isn’t the same as degrading every image until the bytes disappear.
Why the hero image deserves special attention
Google explains that a major page image may affect Largest Contentful Paint (LCP), a performance metric related to when the most prominent content appears. It makes little sense to polish tiny icons while serving a massive hero photo. Prioritize the main visual, its dimensions and how soon the browser can discover it. See web.dev’s LCP advice.
HTML width and height attributes also help browsers reserve the right space and reduce layout shifts, as MDN documents. Those are implementation choices beyond simply selecting a file format.
One overlooked issue: photo privacy
Some images contain metadata such as camera information, timestamps or location coordinates, depending on the device and format. Before sharing a sensitive photo, try a metadata reader to inspect supported fields. Never assume that conversion or compression automatically removes every metadata field; inspect the resulting file.
A practical image preparation routine
- Decide what dimensions the image really needs.
- Resize a copy while keeping its aspect ratio.
- Test JPG and WebP, or PNG where exact details and transparency matter.
- Compare file size and real-size appearance.
- Inspect metadata if privacy is a concern.
- Replace the asset and measure the page again.
The goal isn’t to create the smallest image imaginable. It’s to deliver it quickly without losing what makes it useful.