Send the right file for the job
Photographs, illustrations, icons, and animation have different format needs. Resize raster images near their display size and avoid sending a huge source file that CSS merely shrinks on screen.
Load important assets at the right time
The main visible image may deserve early loading, while images far below the fold can load lazily. Limit font variants and make sure text remains usable while custom fonts are unavailable.
A familiar example
Preparing a course illustration
- Export the illustration with the transparency and dimensions its slot needs.
- Keep meaningful labels readable at the displayed size.
- Load it normally near the top instead of marking every image on the site as high priority.
What to remember
- Match format and dimensions to the actual content.
- Prioritize visible assets; defer off-screen assets.
- Avoid making readable text depend on a delayed font or image.