Last Updated on September 13, 2024
No website should be lacking in visual appeal, but failing to optimize its images correctly or use suitable formats can lead to significantly slower loading times and responsiveness. When designing your website, it is important that you pay special attention to image formats and optimization in order to find the right compromise between quality and loading time.
Digital images fill up email inboxes and storage devices, often taking up more memory than they need to. When it comes to websites, images have one of the greatest impacts on performance, and even a delay of a few seconds is enough to turn the majority of new visitors away. As such, it is important to use the right file types for each situation, as explained in this guide.
1. JPEG
Moon wallpaper by K?PKL?M
JPEG is by far the most common image format in existence, and it’s the format of choice for the vast majority of images found on the Web. Most low- to mid-range digital cameras also store images in the JPEG format by default. Although the formats are identical, JPEG images may use either the .jpeg or .jpg file extension. Having long been the industry standard for compressed image files, JPEG was invented in 1986, though it has been refined ever since.
The most important thing to remember about the JPEG format is that it is lossy in nature. In other words, it sacrifices image quality for a smaller file size which, in turn, means faster loading times when used on websites. JPEGs also come with various levels of compression, with higher levels leading to much lower image qualities. The optimal compression level for Web images is around 60 percent, although anything up to 75 percent may be suitable for visual components wherein quality is not a major priority. Much higher than 75 percent, and the original image starts to become noticeably distorted and blurry.
Being universally supported by all Internet-enabled devices, digital cameras, Web browsers, and modern operating systems, JPEG is the obvious format to use for any still image where maximum possible quality is not required (as it usually isn’t). Since it can display millions of different colors, including clear distinctions between lighter and darker shades, it’s suitable for use in almost all situations. However, when a professional and original level of quality is required, JPEG is not suitable. For this reason, most professional photographers always keep original copies of their images in uncompressed formats such as BMP or RAW.
2. GIF
The go-to format for all of those animated cat images that have been trolling the Internet for some two decades, Graphics Interface Format has been around for almost as long as JPEG, having been invented in 1987. GIF, like JPEG, was invented to save bandwidth due to the limitations of early dialup Internet connections, as well as save space on the relatively tiny hard drives of the time.
Unlike JPEG, GIF supports animated visuals, so it is invariably used to render small animations rather than still images. As such, it’s most popular for small icons, buttons, and other navigational features, animated emoticons on forums and social networks, simple images with relatively few colors, and of course, those countless animated Internet memes you’ve no doubt seen over the years. Technically, GIF is a lossless compression format, since it doesn’t remove any of the original data, instead compressing it using a completely different algorithm. However, the format is also limited by an 8-bit color palette, meaning that it can only display a maximum of 256 colors per frame. Because of this limitation, it is ideally suited to monochrome images, which are 8-bit by nature anyway.
While still widely encountered online, GIF has little practical use these days, and it is largely obsolete. Instead, most animated content is delivered via streaming video formats, while still images use the JPEG or another format. Nonetheless, GIF is still as widely supported as JPEG, although actual animations might not work on all devices.
3. PNG
iPhone wallpapers by Maria Shanina
The newest of the main three image formats featured in Web design is Portable Network Graphics, invented in the mid-90s as a solution to the limitations of the GIF format. Unlike GIF, however, PNGs only feature still images, although a rarely used extension known as APNG does also exist but is not widely supported. PNG uses a lossless compression algorithm to preserve the details of the original image.
PNG falls into two varieties: PNG-8, an 8-bit version that supports 256 colors, making it similar to GIF; and PNG-24, featuring a 24-bit color palette for displaying up to 16 million colors, like JPEG. Most importantly, both versions support transparency, so they may be used over other images to create a variety of different backgrounds and special effects. Designers may use the alpha channels supported by the format to change the transparency level to, for example, fade into a different background image. In other words, a PNG image may be placed on a background of any color while maintaining its original appearance.
PNG is most suitable for design and branding elements such as logos, and the format is supported by all modern web browsers. Only very old and long-deprecated systems may have problems rendering transparency correctly. The format is also suitable for complex images such as photographs, but only if file size does not present a major issue, since PNGs take up significantly more space than JPEGs.
4. SVG
Free Line Illustrations by Vincent Tantardini
Unlike all of the previously mentioned image formats, SVG is a vector graphics format, while the others are raster graphics formats. While raster graphics use a dot-matrix structure to represent images, vector graphics use polygons connected by nodes known as vectors. Because of the completely different nature of the formats, vectors can scale to any size without losing quality, since each vector is already assigned a color, shape, curve, and line thickness.
Invented in 2001, SVG (Scalable Vector Graphics) is the most common vector graphics format. While not as widely supported as JPEG, GIF, or PNG, most modern browsers, such as recent editions of Google Chrome, Microsoft Edge, and Mozilla Firefox, do support it. Nonetheless, SVG is by far the most suitable format to use for complex diagrams, such as blueprints, plans, and designs, since it preserves all of the original information and can be zoomed in on without sacrificing image quality. On the other hand, the format is completely unsuitable for photos. Due to the fact that vector graphics are not supported by many older browsers, particularly those for mobile devices, Web designers should always provide an alternative JPG to render in place of the SVG file, should the latter turn out to be unsupported.
Final Words
In most cases, you’ll want to stick to using the JPEG format in Web design, using GIF, PNG, or SVG only when you have specific requirements. However, JPEG is a versatile format in itself, and it is important to choose the optimal compression level to find a good compromise between quality and performance. For things like photo albums, it’s often best to display lower-quality thumbnails on the webpage itself which, when clicked on, open a full-resolution, high-quality version.
