Prepare images for the web

Outcome

You will prepare one source photograph as two web-ready image files. You will add both files to your profile page so the browser can choose a suitable resource for the current display conditions.

Why this matters

An unprepared image can use more network data than the page needs, delay visible content, distort at some sizes, or provide no useful text alternative. A repeatable image pipeline protects quality while controlling file size and behavior.

What you will practice

Distinguish source dimensions, intrinsic dimensions, rendered dimensions, aspect ratio, and file size.
Choose a suitable raster format for a photograph or pixel-based graphic.
Crop, resize, and compress an image without overwriting the source.
Use src, srcset, sizes, width, height, and alt on an img element.
Verify image quality, layout stability, responsive selection, and alternative text.

What is new and what is reused

New: Raster images, pixels, intrinsic dimensions, rendered dimensions, aspect ratio, lossy and lossless compression, image formats, srcset, sizes, and an image preparation pipeline.
Reused: Project asset folders, semantic HTML, relative paths, flexible-image CSS, media conditions, developer tools, accessibility checks, and the visual system from the previous lesson.

Starting point

Before you start

Your completed design-profile folder from the visual-design lesson.
A current version of Edge, Chrome, or Firefox.
An image editor that can crop while preserving an aspect ratio.
Access to Squoosh at https://squoosh.app for resizing, previewing, and exporting WebP. A local editor with equivalent controls is also valid.

Current state: The profile page has a deliberate visual system and flexible-image CSS, but it does not yet contain the lesson image or responsive image candidates.
First action: Create an empty image-profile folder. Copy the visible contents of design-profile into it without copying .git, then create source-images and assets/images.
First checkpoint: The lesson workspace still works, contains no copied repository metadata, and has two empty image folders with different jobs.
Help trigger: Use the recovery note or ask for help if the source download does not open, an export changes aspect ratio, a file becomes larger than its source, or the browser shows a broken-image icon.

Keep repository metadata out of this lesson workspace. Copy the project contents that the page needs, not a hidden .git folder or an earlier origin remote.

Required result

You have completed the lesson when image-profile contains:

the unchanged workspace-source.png file inside source-images;
workspace-480.webp at 480 × 320 pixels inside assets/images;
workspace-960.webp at 960 × 640 pixels inside assets/images;
one img element that uses src, srcset, sizes, width, height, and a context-appropriate alt value;
flexible CSS that preserves the image’s aspect ratio;
output files that are each smaller than the source and do not show unacceptable compression artifacts;
a page that does not clip, distort, or overflow at about 320px width or 200% zoom; and
developer-tools evidence that the browser requested one of the WebP candidates rather than the source PNG.

Understand the image properties

A raster image stores a grid of colored pixels. Photographs are raster images because their details and color changes vary across the grid.

These properties describe different things:

Property	Meaning	Lesson source
Intrinsic dimensions	The pixel width and height stored in the file	`1536 × 1024` pixels
Aspect ratio	The relationship between width and height	`3:2`
Rendered dimensions	The CSS size used when the browser lays out the page	Changes with the containing block
File size	The amount of storage and network data used by the file	About `2.1 MB`
Format	The rules used to store and decode the image	PNG

A file can have large intrinsic dimensions and small rendered dimensions. CSS can display a 1536-pixel-wide image at 400 CSS pixels, but the browser still downloads the file unless the HTML offers another resource.

Changing print-resolution metadata such as 72 DPI or 300 DPI does not by itself change the number of pixels that a browser downloads. For this task, inspect pixel dimensions, rendered size, and file size.

Choose a format by content

No single image format is best for every image.

Format	Useful starting point	Important property
JPEG	Photographs when a widely supported fallback is required	Lossy compression; no transparency
PNG	Screenshots, pixel graphics, or images that need lossless storage or transparency	Lossless; photographs can become large
WebP	Photographs and graphics in current web projects	Lossy or lossless; can include transparency
AVIF	Photographs or graphics when the project and target browsers support it	Strong compression; test encoding time and browser support
SVG	Logos, icons, and diagrams made from vector shapes	Scales without raster pixels; covered in the next lesson

Lossless compression stores the image so decompression can recover the encoded pixel data exactly. Lossy compression removes some image information to reduce file size. A lossy export can still look suitable for its intended rendered size.

This lesson uses WebP because the practice source is a photograph and the output will run in current browsers. The required decision is not “WebP is always best.” The required decision is “test a suitable format against the content, target environment, quality, and measured file size.”

A laptop showing a green and coral page layout on a desk with a notebook and headphones. — Prepare a web image from the preserved source. Crop for meaning, resize for likely rendered sizes, export with measured quality, then give the browser enough HTML information to choose and lay out the resource.

Preserve the source and record its state

Copy the downloaded file into image-profile/source-images and keep its filename as workspace-source.png.

Your project should now have this structure:

image-profile/
├── assets/
│   └── images/
├── source-images/
│   └── workspace-source.png
├── index.html
└── styles.css

Open the file properties in your operating system or image editor. Confirm these values before editing:

width: 1536 pixels;
height: 1024 pixels;
aspect ratio: 3:2; and
file size: about 2.1 MB.

The displayed file size can use MB, MiB, KB, or KiB, depending on the tool. Record the number and unit that your tool shows instead of converting it silently.

Check

Open workspace-source.png from source-images. The full photograph appears, and the file still reports 1536 × 1024 pixels.

Checkpoint: The source is preserved

What now works: The original PNG is stored separately, its dimensions and file size are recorded, and the page still runs from the copied project.
Files changed: source-images/workspace-source.png
What remains: Create one crop and export two WebP sizes from the preserved source.
Next action: Open workspace-source.png in the image editor and select a 3:2 crop.
If it does not work: If the source dimensions differ, download the supplied PNG again and replace only the copy inside source-images before editing.

Crop for meaning

Cropping removes pixels from the edges. It changes composition and can change meaning, so make the crop before resizing.

For the required crop:

Set the crop tool to a 3:2 aspect ratio.
Keep the complete laptop screen and enough of the notebook to identify it.
Keep either the headphones or the pencil cup as supporting context.
Remove some empty desk or shelf space without cutting through the main objects.
Apply the crop only when the main subject remains clear at a small preview size.
Save the crop as workspace-crop.png inside source-images. Do not overwrite workspace-source.png.

You can choose the exact crop boundaries. The technical constraint is the 3:2 ratio and the visible laptop-and-notebook subject.

Check

Reduce the preview until it is about 240 pixels wide. You should still be able to identify the laptop and notebook without searching the image.

If it does not work

If the crop feels crowded, restore the source and include more space around the laptop.
If an object is cut at an unclear point, move the crop edge or remove that object from the composition.
If the ratio changes after you resize, confirm that the editor has locked the aspect ratio.

Resize and export two candidates

This lesson uses Squoosh for the resize and export steps. Squoosh processes the image locally in the browser. If your class uses another editor, use its equivalent resize, WebP, quality-preview, and download controls.

Open the cropped image in Squoosh.
Enable Resize for the output side.
Enter a width of 480 pixels. Confirm that the height becomes 320 pixels.
Choose WebP as the output format.
Start with a quality value near 78. Inspect the laptop edges, keyboard, notebook paper, and window area at 100% zoom.
Adjust the quality only if the preview shows unacceptable blocks, smearing, or ringing. Quality numbers are not equivalent across every tool or format.
Download the output and name it workspace-480.webp.
Return to the same cropped source. Change the width to 960 pixels and confirm the height becomes 640 pixels.
Inspect the preview again, then download workspace-960.webp.
Move both WebP files into image-profile/assets/images.

Do not create the 960-pixel file by enlarging the 480-pixel file. Export both sizes from the same preserved crop.

Compare measured results

Record each file in a small table. Your file sizes can differ from these site-generated examples because crop boundaries and encoder versions can differ.

File	Dimensions	Site example size	Your measured size
`workspace-source.png`	`1536 × 1024`	about `2.1 MB`	Record it
`workspace-480.webp`	`480 × 320`	about `16 KB`	Record it
`workspace-960.webp`	`960 × 640`	about `44 KB`	Record it

Each output must be smaller than the source. A smaller file is not automatically acceptable. Inspect the image at its intended rendered size and at 100% zoom before you keep it.

Assistance 3 — Use this export decision sequence

For each candidate:

Start from the preserved crop.
Set the required pixel width.
Confirm the height and aspect ratio.
Choose WebP.
Inspect the preview at the intended size.
Inspect detailed edges at 100% zoom.
Compare the output file size with the source and the other candidate.
Keep the lowest file size that still preserves the details needed by this page.

If you cannot tell whether an artifact matters, compare the output with the source at the size the page will display. The required result is suitable quality in context, not pixel-for-pixel equality with the source.

Checkpoint: Two web-ready files exist

What now works: The assets folder contains 480 × 320 and 960 × 640 WebP files from the same 3:2 crop, and both outputs are smaller than the source.
Files changed: assets/images/workspace-480.webp, assets/images/workspace-960.webp
What remains: Add responsive image markup, write the text alternative, and verify which resource the browser requests.
Next action: Open index.html and choose the section where the workspace image supports the content.
If it does not work: If an output has the wrong dimensions, return to the preserved crop, lock the aspect ratio, and export that size again.

Add the responsive image to HTML

Place the image in the projects section or another part of the page where it supports the profile content. Do not insert it between a heading and content that the heading introduces unless the image belongs to that group.

Use this img element and adapt the surrounding text to your page:

<figure>
  <img
    class="profile-image"
    src="assets/images/workspace-960.webp"
    srcset="
      assets/images/workspace-480.webp 480w,
      assets/images/workspace-960.webp 960w
    "
    sizes="(max-width: 44rem) calc(100vw - 2rem), 48rem"
    width="960"
    height="640"
    alt="Laptop showing a green and coral page layout beside a notebook and headphones."
  >
  <figcaption>Workspace used to plan and build the profile-page projects.</figcaption>
</figure>

The attributes have separate jobs:

src supplies a normal source and fallback.
srcset lists candidates and their true intrinsic widths. The w descriptor means image pixels, not a CSS width.
sizes describes the approximate layout width of the image under the listed media condition.
width and height provide the intrinsic aspect ratio so the browser can reserve layout space before the image loads.
alt supplies a text alternative when the image communicates information.

The browser chooses a candidate. It can consider the layout slot, pixel density, zoom, cached resources, and other conditions. The browser does not promise to choose the 480-pixel candidate every time the viewport is narrow.

Write alternative text from context

Alternative text describes the image’s purpose in its current context. It is not a complete inventory of every visible object.

For the required figure, the image supports the claim that the profile includes a web-development workspace. This value is suitable:

alt="Laptop showing a green and coral page layout beside a notebook and headphones."

If the same image appears only as decoration and nearby text does not depend on it, use alt="". Do not omit the alt attribute.

The figcaption remains visible to everyone. Do not copy the complete caption into alt when that would repeat the same information without adding value.

Keep the image flexible

Your stylesheet should already contain a flexible-image baseline. Confirm that it includes equivalent behavior:

.profile-image {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-card);
}

figcaption {
  margin-block-start: var(--space-sm);
  color: var(--color-muted);
  font-size: 0.875rem;
}

max-inline-size: 100% prevents the rendered image from exceeding its containing block. block-size: auto preserves the aspect ratio while the inline size changes.

Do not set a fixed width and fixed height that disagree with the 3:2 ratio. Use object-fit: cover only when a fixed crop box serves a stated design purpose and you have tested which pixels it hides.

Verify the resource and layout

Use the browser’s Network panel to confirm that the page requests a WebP candidate.

Open the page at about 320px viewport width.
Open developer tools and select Network.
Enable Disable cache if your browser offers it. Keep developer tools open while this setting is active.
Reload the page.
Filter the request list to images.
Find the workspace request and record whether the browser requested the 480-pixel or 960-pixel file.
Widen the viewport, reload with the cache still disabled, and record the requested file again.
Inspect the img element and confirm that its rendered width changes while its visible aspect ratio stays 3:2.

A high-density display or browser zoom can make the browser choose the 960-pixel file at a narrow width. That result can be correct. The required evidence is that the browser selects one of the WebP candidates described by your HTML and does not request workspace-source.png.

Test the page at 200% zoom and with images disabled if your browser provides that option. The caption and nearby content must still make sense, and the alternative text must communicate the image’s purpose when the image cannot load.

If it does not work

Broken-image icon: Compare the src and srcset paths with the exact folder and filenames. Paths and extensions are case-sensitive on many web servers.
Distorted image: Remove a conflicting fixed height or restore block-size: auto.
Source PNG requested: Search index.html and styles.css for workspace-source.png. The page should not link to the source file.
Only the 960-pixel file appears in Network: Disable cache, reload after changing the viewport, and remember that display density can still justify the larger candidate.
Layout moves when the image loads: Confirm that width="960" and height="640" are present on the img element.

Self-check

Complete these checks against the required result.

Confirm that source-images/workspace-source.png is unchanged and reports 1536 × 1024 pixels.
Confirm that assets/images contains 480 × 320 and 960 × 640 WebP files created from the same crop.
Compare the measured file sizes and confirm that each WebP file is smaller than the source PNG.
Inspect the two WebP files at their intended rendered sizes and confirm that important edges and details remain acceptable.
Point to src, srcset, sizes, width, height, and alt in the img element and explain the job of each attribute.
Confirm that each w descriptor matches the true intrinsic width of its file.
Explain why the alt text fits the image purpose in this profile-page context.
Use the Network panel to confirm that the browser requests one WebP candidate and not workspace-source.png.
Test at about 320px width and confirm that the image stays inside its containing block without distortion.
Test at 200% zoom and confirm that the image, caption, and nearby content remain readable and ordered.

The complete pipeline

The source file protects future editing quality. The crop controls meaning and composition. The intrinsic dimensions control how many pixels each candidate contains. Compression and format control how the pixels are stored. HTML describes the candidates, expected layout slot, aspect ratio, and alternative text. CSS controls the rendered size.

No one number proves that an image is ready. A useful check combines:

visual suitability for the content;
correct crop and aspect ratio;
enough pixels for the largest likely use;
measured file size;
acceptable artifacts at the intended rendered size;
correct responsive markup; and
a context-appropriate text alternative.

Optional image investigations

The required lesson is complete before these investigations. Choose one route that tests a different image decision.

Compare JPEG and WebP

Export the 960-pixel crop as both JPEG and WebP. Adjust each export until the visible quality is comparable at the intended rendered size. Record format, quality setting, file size, and any artifact differences. Do not compare quality numbers as if they use one shared scale.

Add an AVIF candidate

Export the same 960-pixel crop as AVIF. Use a picture element with a WebP img fallback. Test the result in the target browsers and record which file the Network panel requests.

Test art direction

Create a closer square crop that keeps the laptop screen legible at a small layout size. Use picture and a media condition to show the square crop only when the page layout makes the wider composition ineffective. Keep the same text alternative when both crops communicate the same information.

Optional references

Squoosh provides the browser-based resize, format, quality-preview, and download workflow used in this lesson.
The MDN img reference documents src, srcset, sizes, intrinsic width and height, and alt.
Responsive images from MDN explains resolution switching and art direction in more depth.

Next step or safe stopping point

The required lesson is complete when the source remains preserved, both WebP candidates pass the quality and size checks, the HTML describes them correctly, and the Network panel confirms that the page requests a WebP resource.

Continue to Create a simple web graphic to build a scalable SVG graphic from shapes, paths, color roles, and accessible text alternatives.

If you stop here, leave yourself this resume note: The profile page now uses responsive raster images. Next, open the web-graphics lesson and create an SVG asset for the same project.