Graphics Image Optimization

Unoptimized images are the single biggest reason web pages feel slow, and fixing that comes down to three levers: compressing well, choosing the right format, and not loading images the user can't see yet.

Why Image Weight Dominates Page Speed

On a typical web page, images account for more transferred bytes than every other resource combined — more than the HTML, CSS, and JavaScript put together. That makes image optimization one of the highest-leverage things you can do for load time, and it directly affects metrics like Largest Contentful Paint, which in turn affects how a page ranks and how usable it feels on a slow connection.

Compression: Trading Invisible Detail for Bytes

Lossy compression (used by JPEG, and optionally by WebP/AVIF) discards detail the eye barely notices to shrink file size dramatically — a photo saved at 75-85% quality is often visually indistinguishable from the original but a fraction of the size. Lossless compression (PNG, or lossless WebP) keeps every pixel exact, which matters for screenshots, illustrations, or anything with sharp edges and text, where lossy artifacts would actually be visible.

Resize images to the actual dimensions they'll display at — serving a 4000px photo into a 400px thumbnail wastes almost all of the download.
Strip unnecessary metadata (camera info, unused color profiles) that adds bytes without adding visual value.
Re-encode with modern, efficient encoders — the same visual quality from a well-tuned encoder can be noticeably smaller than a naive save.
Avoid repeatedly re-saving a lossy image; each pass compounds the artifacts.

Choosing the Right Format (Quick Recap)

Content type	Best format	Why
Photograph	JPEG or WebP	Lossy compression handles continuous tone efficiently
Screenshot or UI graphic	PNG or lossless WebP	Sharp edges and text survive without artifacts
Logo, icon, or diagram	SVG	Scales losslessly and is usually smaller than any raster equivalent
Short looping animation	GIF or a small WebP/video	Frame-based animation without full video overhead

Lazy Loading: Don't Pay for What Isn't On Screen

A page with fifty images doesn't need to download all fifty before it's usable — most of them are below the fold and won't be seen unless the user scrolls. Lazy loading defers fetching those offscreen images until the user actually scrolls near them, which shrinks the initial page weight and speeds up the content that matters first.

Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<img
  src='team-photo.jpg'
  alt='The team at our 2025 offsite'
  width='800'
  height='600'
  loading='lazy'
/>

</body>
</html>

Note: Always include width and height (or a CSS aspect-ratio) on every image, lazy-loaded or not. Without them, the browser doesn't know how much space to reserve, and the layout jumps around as images arrive — a jarring effect measured by Cumulative Layout Shift.

Note: You rarely have to do this all by hand: build tools and CDNs (image pipelines, on-the-fly resizing services) can automatically generate compressed, correctly-sized, modern-format images from a single source file, and tools like Squoosh are useful for testing compression settings manually.

Keep Going

Graphics Interview QuestionsPractice real questions asked for Graphics Frontend Developer SalarySee what Frontend Developer roles pay in the market Auto Apply for JobsApply to open roles related to Graphics and tweak your resume