WDD 230: Web Frontend Development I

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 2022 almanac facts:

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:

  1. Crop the original image to the critical content keeping in mind design principles, like the rule of thirds, and the site or section purpose.
  2. 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.
  3. 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.

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:


Additional Resources