Image Optimization for Portfolios: Protect the Proof and the Page

Start With the Image's Job

1. 1. Purpose: Is this proof, explanation, navigation, identity, or decoration?
2. 2. Rendered context: What is the largest slot it occupies, and does mobile need a different crop?
3. 3. Detail: What must remain legible—UI labels, typography, texture, chart data, or none of these?
4. 4. Format: Which candidate preserves that detail at an efficient size?
5. 5. Delivery: Which dimensions and variants should the browser choose from?
6. 6. Priority: Is it critical to the first view or safely deferred?
7. 7. Alternative: What should a person understand when they do not see the image?
8. 8. Verification: Does the browser load the intended file without losing proof or stability?

Choose a Format by Content

Browser support and encoders change. Avoid fixed “format X is always Y% smaller” claims; compare your own assets and confirm support for your audience.

Prepare the Source

• Export from the best available source instead of recompressing an already degraded web image.
• Crop away unused canvas and remove invisible layers.
• Resize for the largest real display need; keep an archival master outside the production site.
• Use a consistent color space appropriate for web delivery and inspect color-critical work after export.
• Strip metadata that is unnecessary for the experience and may expose private information.
• For UI screens, test whether fine text remains legible. Sometimes a tighter crop plus nearby live text works better than one giant screenshot.
• For comparisons, match crop, scale, background, and device framing so the visual does not distort the conclusion.

Deliver Responsive Images

Give the browser image candidates and accurate information about the rendered slot. In HTML, srcset supplies candidates, sizes describes the slot, and <picture> can provide art direction or format alternatives.

• Generate a small set of widths around real layout needs; more variants are not automatically better.
• Write sizes to match the CSS layout. A wrong hint can make the browser fetch a resource much larger than the slot.
• Use <picture> when the composition must change, not just when resolution changes.
• Keep a valid src fallback and one img element with the final alt text.
• If a CMS or framework transforms images, understand its generated variants, cache behavior, quality settings, and remote-source rules before pre-optimizing everything yourself.

Set Loading Priority

Do not combine aggressive preloading and lazy loading without understanding which signal wins. Inspect the network timeline and rendered result.

Prevent Layout Shift

• Set intrinsic width and height attributes or reserve space with a stable aspect ratio.
• Do not inject image wrappers whose dimensions appear only after client-side code runs.
• Give carousels and embeds a predictable container before their content loads.
• Use placeholders only when they preserve the final geometry and do not create distracting flashes.
• Check layout shift on the real page; a component can be stable in isolation and still move when fonts, banners, or adjacent content load.

Write the Accessible Alternative

Verify the Result

1. Open the page at narrow, medium, and wide widths with device-pixel differences when available.
2. Inspect the Network panel: requested URL, format, transfer size, dimensions, cache result, and loading priority.
3. Disable cache and throttle the connection to expose late images and layout movement.
4. Compare the rendered image with the source at the size a reviewer sees, not only at 100% in an editor.
5. Run Lighthouse or PageSpeed Insights, then trace each recommendation to a real page problem.
6. Test zoom, high contrast, reduced motion, keyboard navigation, and screen-reader output around media.
7. Repeat after CMS, framework, CDN, or template changes.

For page-level diagnosis, continue with site speed optimization.

Technical Sources

• MDN: Image file type and format guide — current format characteristics and compatibility references.
• MDN: Responsive images — resolution switching and art direction.
• MDN: The img element — dimensions, responsive attributes, loading, and decoding.
• web.dev: Browser-level image lazy loading — when native lazy loading helps and when not to use it.
• W3C: Alt Decision Tree — choosing a text alternative by image purpose.
• Next.js Image component — framework-specific sizing, loading, and optimization behavior.