WDD Topics

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.

Prepare

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. Image editing software can be used to crop, reduce, and optimize the images.

Image optimization is some of that low-hanging fruit that can be employed without a staggering amount of investment of time.

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. When cropping, focus on the most important elements, removing any unnecessary background or distractions.

    The rule of thirds states that an image is most pleasing and impactful when its subjects are placed along imaginary lines that divide the image into thirds, both horizontally and vertically. This technique helps create balance and interest in the composition by avoiding placing the subject directly in the center of the frame.

  2. Resize the image to the maximum size that is actually needed in the design of the page. 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. Adjust the quality of the image to an acceptable level. The final image should maintain a balance between quality and file size, thus reducing its file size.

Additional image handling techniques include:

Measuring Performance / Page Weight

The size of the page resources can be reviewed by using the browser's DevTools Network tab. The total size of the page resources is often referred to as the page weight. The smaller the page weight, the faster the page will load. The Network tab will also show how long each resource takes to load.

The network tab shows the size of each resource, the time it took to load, and other useful information. The total size of all resources is shown at the bottom of the tab. This is the page weight.

DevTools Network Tab
DevTools Network Tab Screenshot

To see the impact of your changes, you can use the "Reload" button in the DevTools Network tab to refresh the page and view the updated resource sizes. Additionally, you can perform a cache-emptying "hard" refresh by holding down the Shift key while clicking the browser's refresh button or by pressing Ctrl + F5 (Windows) or Command + Shift + R (Mac). or by right mouse clicking on the browser's reload button and selecting "Empty Cache and Hard Reload" from the context menu.

Empty Cache Hard Refresh Context Menu
Empty Cache Hard Refresh Context Menu Screenshot

Image 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: