One image, six website files: a responsive image case study

The source and the chosen settings

Open Website Ready Pack and choose Try a sample image. Our source was pikozip-studio.png, a 1536 × 1024 still-life photo. We kept the default maximum widths of 480, 960 and 1600 pixels, selected WebP, left the lossy quality setting at 85 and used the Blog / two columns example layout.

The optimizer first prepared its same-format preview. The pack builder then worked from the original source, not from a chain of already compressed outputs. Encoding each requested delivery copy from the original avoids cumulative export changes.

The six exported image variants

The live exported-size list showed the following files. Because the original was only 1536 pixels wide, the 1600-pixel request was capped at the source width. Height followed the original 3:2 proportions.

What the 904.2 KB ZIP contains

The live interface reported one source, six image files and a 904.2 KB ZIP. That is the interface’s rounded display, not an asserted exact byte count. The archive also includes a responsive HTML preview, a README and a JSON manifest recording the generated files and their actual sizes.

The source is opaque, so the compatibility fallback is JPEG. When a source contains transparency, the pack uses PNG fallback instead. A transparent PNG fallback can be larger; that is a format requirement to review rather than a reason to silently discard transparency.

Adapt the markup to your own layout

The included picture examples provide a starting point. Add useful alt text for informative images, set sizes to the actual layout and update paths if you move the files. A two-column preview does not establish the width of an image on every real page.

Use eager loading for an above-the-fold hero instead of copying a lazy-loading example unchanged. Keep lazy loading for appropriate offscreen images. The browser can then choose a source using the available widths, format support and the layout information you provide.

Measure the finished page separately

Six exports do not mean a visitor must download all six images. Correct picture/srcset markup allows a browser to select an appropriate candidate. Inspect the finished page’s actual network requests on mobile and desktop to check that your integration behaves as intended.

This export case does not include a controlled before/after website performance experiment. Fonts, JavaScript, caching, layout and hosting also affect page speed. We do not convert one ZIP size into a universal PageSpeed gain. The benchmark guide provides separate measured codec outputs for source-image comparison.

Reproduce the workflow before a full handoff

Use the same public sample and the settings above, create a pack, open See the exported sizes and download the archive. Review its manifest and preview before uploading the files to your own site. Small encoder/version or environment differences can change exact bytes.

Try a representative transparent image and a smaller source next. Confirm that proportions and no-enlargement rules still suit your placement. Start with a single reviewed source, then prepare a larger batch when the destination and settings are clear.

• Retain original masters.
• Check actual dimensions and allowed formats.
• Write meaningful alternative text.
• Adapt sizes and paths to the real layout.
• Inspect the published mobile and desktop page.