Images on the Web

Images are usually the largest file size on a web page, and therefore have the greatest impact on how quickly your page loads, as well as how appealing it is to look at. In this overview we'll cover:

• The different file types used on the web
• How file type affects size and quality
• How to choose the correct file type
• How to ensure the highest quality image with the smallest size
• Responsive images
• Tools to edit images

Which image format is best?

Use the following rubric as a guide to selecting the correct image format.

• Photographs: use JPEG or, if you’re a thrill-seeker, WebP
• Logos: use SVG as the first choice, followed by PNG or JPEG (if a transparent background isn’t required. If using PNG or JPEG for graphics, I’d recommend adding it at twice the display size, so if you’re displaying the image as 350 pixels wide, upload the image at 700 pixels to ensure the best quality, and then use css to size it down. This is bandwidth wasteful, but sometimes you gotta do what you gotta do.
• Artwork with sharp lines, solid colors, and clearly-defined shapes: use SVG as the first choice, followed by PNG or JPEG

Practical advice

All images need to be edited before being added to a site. At a minimum, images need to be resized and, usually, compressed.

Images cannot be copied and pasted from other documents. They must be added using Drupal, or manually added to static web pages. If you copy and paste an image from word it adds thousands of lines of code, but doesn't actually add the image to the page.

Use the Media tool to upload images, rather than the default image selector. This allows you to set the default image size in ckEditor to a pre-defined maximum size. For example, you might set the maximum allowable size to 1200 pixels to ensure that no image will be over that size. This prevents the single biggest problem with images—files that are far too large and slow for the intended need.

Vector images

Vector graphics are a set of instructions for how an image should be drawn. When that image is scaled up or down, the set of points and lines that the image represents are redrawn to scale. A smooth curve between two points will be redrawn just as smoothly at any size—similar to the way a CSS-defined border on an HTML element is redrawn as that element is scaled in the viewport.

Scalable Vector Graphics (SVG) is an XML-based markup language developed by the W3C. It is a vector image format designed for the modern web.

SVG images can be uploaded using Drupal using the following steps:

• Enable the SVG image module
• Use the media manager to upload images
• Change the Media types > image settings to allow for uploading the following image types: png, gif, jpg, jpeg, svg

It may take a little trial and error before you're able to instantly recognize an image source candidate as better served by SVG rather than a conventional raster format. There are a few guidelines, though: interface elements like icons are almost always well served by SVG. Artwork with sharp lines, solid colors, and clearly-defined shapes will likely be a strong candidate for SVG.

SVG is a huge topic: an entire markup language made to coexist alongside HTML, with unique styling options and capabilities. For a more detailed introduction to SVG see the MDN SVG tutorial.

Best for:

• Logos
• Sharp, detailed graphics with flat color
• Graphics that contain text

Not advised for:

• Complicated images
• Photos
• Images with lots of gradations

Raster (Bitmap) Images

JPEG, GIF, PNG, and WebP are all raster images, which can be thought of as a set of pixel-by-pixel instructions. Common raster image formats include GIF (.gif), JPEG (.jpg), PNG (.png), and WebP (.webp). The way each image format compresses and encodes these instructions differs, resulting in a huge variance between file sizes: a photographic image encoded as a JPEG might only be a few hundred kilobytes, while the same image encoded as a PNG might be several megabytes, without any discernible difference in quality to the end user. Raster images can also be compressed to make them smaller by discarding some of the image instructions.

900 pixel image exported as GIF - 460kb

900 pixel image exported as PNG - 1.1mb

900 pixel image exported as JPEG - 227kb

For artwork containing real world levels of detail, raster images are the right tool for the job.

GIF

GIF images are bitmapped images that can contain a maximum of 256 colors, making them very limited in their modern usefulness, however they do allow for a transparent background, which can make them useful in cases where the image is placed against a colored background.

Detail of GIF image, showing extreme bitmapping

Ultimately, GIF is only an efficient format for encoding simple images that already use limited color palettes, hard edges rather than anti-aliasing, and solid colors rather than gradients—all use cases that are far better served by other formats. The smaller and more featured PNG is often a better choice for raster images, though both are far inferior to SVG in terms of file size and visual fidelity for use cases like icons or line art, where vector shines.

Best for:

• Very simple images that require transparency
• Images with limited color palette

Not advised for:

• Photos
• Large complex artwork

PNG

PNG is a modern replacement for the GIF format, and allows for up to 16 million colors, and true transparency and results in very high quality images, however file sizes are often unreasonably large compared to other formats.

Best for:

• Simple artwork that requires transparency
• Small images

Not advised for:

• Photos
• Large complex artwork

JPEG

JPEG is the most common type of image used on the web, and with good reason: for decades, JPEG has almost invariably been the right choice for encoding photographs. The use case is right there in the name: JPEG stands for "Joint Photographic Experts Group," the committee responsible for first issuing the standard in 1992. You'll see the file extension for a JPEG as either .jpg or .jpeg, though the latter is rare in modern usage.

While lossless compression passively compresses image data as best it can, JPEG's lossy compression looks for opportunities to make the compression more efficient with tiny, often imperceptible alterations to the image data. Lossy compression is a one-way street: once an image is compressed that information is lost forever, and over-compression results in blocky, crude-looking images.

Progressive JPEG

Progressive JPEG (PJPEG) effectively reorders the process of rendering a JPEG. "Baseline" JPEGs are rendered from top to bottom as the transfer progresses, while progressive JPEG breaks rendering into a set of full-sized "scans"—likewise done top-to-bottom—with each scan increasing the quality of the image. The entire image appears immediately, albeit blurry, and grows clearer as the transfer continues.

This results in a huge perceptual benefit: by delivering a full-size version of the image right away instead of empty space, PJPEG can feel faster than a baseline JPEG to the end user. In addition, except for the smallest images, encoding an image as PJPEG almost always means a smaller file size compared to a baseline JPEG—not by much, but every byte helps.

Using JPEG

When saving an image as a JPEG there is almost always the chance to save with compression, usually using a scale from 0-100. Some tools allow you to preview the effect of the compression while compressing. In general, starting with a compression around 70 is a good starting place. There is usually also an option to save as a progressive JPEG.

Recommended for:

• Photographs
• Images with smooth gradations
• Images with lots of detail

Not recommended for:

• Simple graphics, such as logos

Other formats

There are other formats that are also possible, though you may need to adjust your image processing workflow, and ensure that browsers support the format.

WebP

Google originally developed WebP as a lossy image format to supersede JPEG, one that was able to produce files smaller than a comparable-quality image file encoded as JPEG. Later updates to the format introduced the option of lossless compression, PNG-like alpha channel transparency, and GIF-like animation—all of which can be used alongside JPEG-style lossy compression. WebP is an unbelievably versatile format.

Drupal requires changes to the allowable file formats in order to use WebP.

AVIF

AV1 Image File Format (AVIF) is an encoding based on the open source AV1 video codec. AVIF is even newer—than WebP, only supported in Chrome and Opera since 2020, Firefox in 2021, and Safari in 2022. As with WebP, AVIF aims to address every conceivable use case for raster images on the web: GIF-like animation, PNG-like transparency, and improved perceptual quality at file sizes smaller than JPEG or WebP.

Browser support

If you find yourself wondering why we've spent so much time discussing JPEG when AVIF and WebP can offer us higher quality results and far smaller file sizes, it's because they—and any new image encoding—come with a major catch. Support for GIF, PNG, and JPEG is guaranteed across all browsers, and has been for decades. Relative to those legacy image formats, AVIF is brand new, and while support for WebP is excellent across modern browsers, it isn't a given across the entire web.

Key performance issues

Images are now the largest assets affecting the average page size, and it’s very important to select the best file format, size, and compression to ensure the best balance of quality and file size.

In general:

• JPEG is best for photos. Usually a quality size of 60-72% retains a good quality/file size. It is very rare that an image with a horizontal pixel count about 1600 pixels is necessary.
• PNG is good for images where a transparent background is desired, but is best kept for images, like logos, where the image isn’t highly reliant of color gradations. The file size of PNGs can be quite a bit larger than JPEG.
• SVG images aren’t bitmapped, they are images that are rendered using mathematical descriptions (vector images.) This allows them to resolution independent, ensuring that the image will be the highest-resolution possible on the viewers screen. They are best for relatively simple images with lots of flat color.
• Crop images to the correct ratio, especially on panoramic images, such as hero images.

Deferring image requests

One the best performance improvements that can be made is to enable the “Blazy” module for Drupal, which allows for “lazy” image loading.

This attribute ensures that requests for images aren't made until they fall close to the user's viewport, deferring them from the initial page load—the time when the browser is at its busiest—and removing those requests from the critical rendering path.

Simple as it may be in practice, using this attribute can have a huge positive impact on performance: an image that never falls within the user's viewport will never be requested, and no bandwidth will be wasted on images that the user will never see.

Cumulative Layout Shift

Anyone that has spent a significant amount of time using the web has experienced Cumulative Layout Shift (CLS), where they lost their place in a long run of text due to a page "jumping" as a delayed webfont or image source is suddenly rendered—or had an interactive element suddenly moved away from your pointer. A high CLS is a nuisance at best, and cause of user error at worst—a "cancel" button shifting to a space previously occupied by a "confirm" button just as the user clicks, for example.

To minimize CLS it is best practice to ensure that images have an explicit height and width, but to also add css to ensure that images are resized as viewport changes. This code will ensure that images resize gracefully as the screen size change:

img.responsive {max-width:100%;height:auto;}

Responsive images

Responsive images use multiple image files of differing file sizes and only loads the image most appropriate to the visitors screen size and resolution. This ensures the most efficient and smallest delivery, while balancing the size with the highest quality.

A simple use case for this would be an image that is displayed full-width in the main content area within the state agency template. If this is on a page that has both a left and right column, the maximum available width is @752 pixels, so the image must be sized to be at least 752 pixels wide. However, there are some other factors to consider:

• many screens are 4k or 5k, much higher resolution than normal, and an image sized to 752 pixels will, essentially, need to be displayed at twice the normal size, resulting in poor quality
• many sites have most traffic coming on mobile devices, where the standard screen size is both much narrower, and much higher resolution. This would make a 752 pixel image larger (and slower) that one optimized for the smaller screen.

What we might end up with is the need for there to be at least 4 file options in this case:

• 752 pixels for standard low-resolution desktop display
• 1504 pixels for high-resolution desktop displays
• 360 pixels for small low-resolution display
• 720 pixels for small high-resolution display

Drupal has methods of using the media module to offer this sort of complex image display, but it requires:

• theme-level changes to set breakpoints
• creating image styles
• creating responsive image styles
• creating image display types
• customizing ckEditor

If there’s interest we can cover this another day.

The “insert media” button in ckEditor

Choosing the default image size in the ckEditor configuration

Image tools

Photoshop - if you have the Adobe Creative Suite you have access to Photoshop, which can resize images, crop them, fix color and contrast, and export in almost all formats. You can also create automations in Photoshop, for example, you can select an entire folder of images and have them all resized automatically. Expensive and powerful.

GIMP - is a free, cross-platform tool that has most of the features of Photoshop. It’s extremely powerful and has a steep learning curve.

More image tools

Sqoosh - is an online optimization tool developed by the Google Chrome team. This tool allows you to select a compression, preview the compression, resize, and export in all common formats. It’s cool and it’s free (for now!).

ImageOptim - a free tool available for Macs and as a paid online tool that can be used by anyone.

Windows Photos and Apple Photos - Built in tools that offer basic resizing and editing, though usually with a somewhat convoluted interface.