Image Optimization
Overview
One of the concerns of frontend web design and development is site performance. A common element affecting performance is image load time. That is where image optimization becomes a factor because images account for most of the downloaded bytes from the web server. The art of optimization is the process of trying to find the balance between design quality needs and file size.
Here are some Web Almanac facts:
- 99.9% of pages on the web generate at least one request for an image resource.
- Most images (54%) are presented in landscape aspect ratio versus square or portrait.
- "Images are the poster child for balance between performance-enhancing technologies and asset byte size."
Basic Steps of Optimization
Often the original photos that we work with are very large and those photos need to be scaled down to the largest size that is actually needed on the page given the design and layout plan. Software can be used to crop, reduce, and optimize the images. These are the basic steps supported by most photo editing packages:
- Crop the original image to the critical content keeping in mind design principles, like the rule of thirds, and the site or section purpose.
- Resize the image to the maximum size that you actually need in the design of your site. That image will then be saved in smaller formats, possibly with slightly different design to match the design and layout in smaller views, meaning, smart phone, tablet.
- Reduce the quality of the image to an acceptable level, thus reducing its file size.
Image optimization is some of that low-hanging fruit which we can employ without a
staggering amount of investment of time. Additional image handling techniques include:
• Resizing images during the build process using script
• Creating
multiple
image sizes and use srcset to let the browser or user agent decide which image to load
• Use an image CDN (Content Delivery Network)
Measuring Performance / Page Weight
Check the size of the page resources by using the Dev Tools Network tab. Reload the page using a cache emptying "hard" refresh. The course standard will be outlined in the course development standards checklist and in the assessment rubrics.
Editing Tools
The following list of software applications is in no way comprehensive but rather provides some healthy options of tools that will help you manipulate images including the process of optimizing images. You may elect to use any tool you wish.
- Adobe Photoshop: Adobe Photoshop is the most popular software application when it comes to actually being named on front-end web designer job descriptions under qualifications or desired experience. It is an industry standard. This course does not require or teach Photoshop even though it certainly ranks high in the skill set for front-end web designers and developers. The tool has a built-in optimization process known as Save for web. You can specify some constraints via a setting that should help in finding this balance mentioned above.
- GIMP or GNU Image Manipulation Program, is an image manipulation, image authoring, and photo editing software that is freely distributed and has a lot of support online. It may be a step down from Photoshop, but it supports a large percentage of the actual work that is essential in graphical design.
- TinyJPG / TinyPNG is a free online application that will reduce JPEG images through encoding.
- PIXLR x is a web-based photo-editor that will let you crop, resize, and enhance your photos for free.
There are many other tools and you are free to use any image editing too. Many of these come with excellent support including the following:
- Squoosh.app – online photo editing
- JPEG Optimizer – online jpg file editing
- ImageOptim (Here is an absolute beginners guide for use on Mac computers)
- File Optimizer (for use on Windows)
Optional Resources
- Image Optimization (TL;DR) is documentation on optimizing page content for Google Developers.