Prepare images for the web by resizing, compressing, converting, and packaging one image while checking each trade-off.
Beginner30–45 minutes5 steps
Why this workflow matters
A large source image can slow a page even when CSS displays it at a small size. The reliable workflow is to choose display dimensions first, then choose a format, then compress, and finally verify the result visually.
When an existing workflow requires PNG output, compare the general compressor with the dedicated PNG re-encoder; browser canvas output is not guaranteed to reduce every PNG.
Work through the steps
0 of 5 complete
1
Set the pixel dimensions
Uses Image Resizer
What to understand
Resize near the largest rendered size you need, while accounting for high-density screens. Keeping a 5000-pixel source for a 600-pixel card wastes transfer and decode work.
Try it
Use a non-sensitive sample image. Create one card-sized version and one larger hero version while preserving aspect ratio. Complete the exercise in the Image Resizer, then return here to verify the checkpoint.
Checkpoint
Neither output is stretched and each has a documented display use.
2
Reduce transfer size
Uses Image Compressor
What to understand
Compression trades bytes for detail. The best setting is the smallest result that still looks acceptable at its actual display size—not the highest quality slider value.
Try it
Compress the card image at two quality levels. Compare file size and inspect edges, gradients, and text at 100% zoom. Complete the exercise in the Image Compressor, then return here to verify the checkpoint.
Checkpoint
You selected a result by visual evidence and recorded the byte reduction.
3
Choose a delivery format
Uses JPG to WebP Converter
What to understand
Format choice depends on browser support, transparency, image type, and the output produced by your encoder. Always compare real files instead of assuming one format wins.
Try it
Convert a JPEG sample to WebP and compare dimensions, byte size, transparency support, and visible quality. Complete the exercise in the JPG to WebP Converter, then return here to verify the checkpoint.
Checkpoint
You can state why the chosen format fits this specific asset.
4
Create a recognizable favicon
Uses Favicon Generator
What to understand
Favicons are viewed at very small sizes. A simple shape with strong contrast survives better than a detailed photograph or a wordmark with tiny text.
Try it
Generate favicon sizes from a simple square mark, then inspect the smallest preview for legibility. Complete the exercise in the Favicon Generator, then return here to verify the checkpoint.
Checkpoint
The mark remains recognizable at 16×16 pixels.
5
Know when not to inline
Uses Image to Base64
What to understand
A data URL can simplify a tiny, self-contained asset, but Base64 increases text size and prevents normal file caching. It is usually a poor fit for ordinary content images.
Try it
Convert a tiny icon and compare the data-URL length with the original file size. Do not use a private image. Complete the exercise in the Image to Base64, then return here to verify the checkpoint.
Checkpoint
You can explain the caching and size trade-off before choosing to inline an asset.
Path complete
You finished every checkpoint. Revisit any tool with your own non-sensitive practice data, or choose another path to connect this workflow to a new topic.