Image Optimization
Overview
One concern of frontend web design and development is site performance. A common factor affecting performance is image load time, which is where image optimization comes in: images often account for most of the bytes a page downloads. Optimization is the process of finding the balance between design quality and file size.
Facts from the 2024 Web Almanac (Media chapter):
- 99.9% of pages request at least one image.
- Most images (54% on desktop) are landscape-oriented rather than square or portrait.
Basic Steps of Optimization
The original photos you work with are often very large. Scale them down to the largest size actually needed on the page, given the design and layout plan. Most photo editing software supports these basic steps:
- Crop the original image to the critical content, keeping in mind design principles such as the rule of thirds and the purpose of the site or section.
- Resize the image to the maximum size you actually need in your design. You may also save smaller versions, possibly cropped differently, for smaller views such as phones and tablets.
- Reduce the quality of the image to an acceptable level, which reduces its file size.
- Save the image in a modern format such as WebP or AVIF. These formats usually produce smaller files than JPEG or PNG at similar quality.
Image optimization is low-hanging fruit: it improves performance without a large investment of time. Additional image handling techniques include:
- Resizing images during a build process using a script.
- Creating multiple image sizes and using
srcsetto let the browser decide which image to load. - Serving images from an image CDN (Content Delivery Network).
Measuring Performance / Page Weight
Check the size of the page resources by using the DevTools Network panel. Reload the page with the cache disabled (check Disable cache in the Network panel) or with a hard reload (Ctrl+Shift+R on Windows/Linux, Cmd+Shift+R on macOS). Your course's development standards and assignment rubrics describe the page weight target.
Editing Tools
The following list is not comprehensive, but it provides good options for editing and optimizing images. You may use any tool you wish.
- Adobe Photoshop is the image editor most often named in front-end web designer job descriptions and is an industry standard. Courses in this program do not require or teach Photoshop. Its Export As feature lets you choose the format, size, and quality of the exported image.
- GIMP (GNU Image Manipulation Program) is free, open-source image editing software with extensive online support. It handles most of the image work needed for web design.
- TinyPNG is a free online tool that compresses WebP, PNG, and JPEG images.
- Pixlr Express is a free web-based photo editor that lets you crop, resize, and enhance your photos.
There are many other image tools, including the following:
- Squoosh – online image compression and format conversion
- JPEG Optimizer – online JPEG compression and resizing
- ImageOptim – for macOS (beginner's guide video)
- FileOptimizer – for Windows
Optional Resources
- Learn Images – web.dev