The ultimate guide to optimizing website images

Images are an essential part of any website, and they can have a significant impact on the user experience. However, images can also slow down your website's loading speed if they are not optimized correctly. In this ultimate guide to optimizing images for use on a website, we'll cover everything you need to know to ensure your website images are high quality and load quickly.

‍

‍

1. Choose the Right File Type (Ultimate Guide)

‍

When it comes to image file types, the most common options are JPEG, PNG, and GIF. JPEGs are best for photographs, while PNGs are best for graphics with transparent backgrounds. GIFs are best for animations. In recent years, a number of new image formats have emerged that offer significant advantages over the long-dominant JPEG format for use on the web. While JPEG remains a popular choice for web images due to its wide support and compatibility, these newer formats offer superior compression and quality, faster loading times, and other benefits that make them worth considering for web developers and designers. Depending on where you're at in your project we'll help you choose the file type that best suits your project needs.

‍

‍

A Deep Dive into JPEGs

‍

JPEG, which stands for Joint Photographic Experts Group, is a widely used image file format that is commonly used for digital photography and web design. The JPEG format is a lossy compression technique, which means that it compresses the image data by discarding some of the image information. However, this loss of information is often not noticeable to the human eye, which is why the format is so popular.

‍

One of the main advantages of the JPEG format is its ability to compress images to a small file size without sacrificing too much image quality. This made it ideal for use on the web, where file size and download times are critical factors. The smaller file size of JPEG images also means that they take up less server space and are easier to load on a website, which can help to improve website performance and user experience.

‍

Another advantage of the JPEG format is its compatibility with most web browsers and image editing software. JPEG images can be easily opened and edited using popular image editing programs such as Adobe Photoshop and GIMP, and can be easily uploaded to websites or shared on social media platforms.

‍

JPEG images can also be optimized for web use by adjusting the compression level to find the right balance between image quality and file size. This is particularly important for websites that rely heavily on images, such as online stores or photography portfolios. By optimizing JPEG images for web use, website owners can ensure that their website is fast, responsive, and visually appealing to their visitors.

‍

In conclusion, JPEGS are still a good option for images mainly because they are so widely used and compatible with all modern day editing tools and browsers. If you're using images that are not too large and don't have a large quantity of images on your website, jpegs will work fine and will be an easy file format to work with. If you're using a lot of images or want to display them larger, you may want to explore new image formats like WebP or AVIF.

‍

‍

WebP

‍

WebP is an image format developed by Google that uses both lossless and lossy compression techniques to achieve smaller file sizes and faster load times. In most cases, WebP images are around 30% smaller than equivalent JPEG images, while maintaining similar or even better image quality. WebP also supports transparency and animation, making it a versatile format for web designers.

‍

One of the primary advantages of WebP now in 2023 is its support by most major web browsers. The main criticism of WebP at first was that it wasn't supported by big browsers like Safari & Internet Explorer. The good news is that now with Safari 14 and up WebP file formats are supported both on macOS and iOS. The last hold out was Microsoft Internet Explorer 11 which did not support WebP, but Microsoft ended support for IE in 2022, and is now focused on their Microsoft Edge product which supports WebP from Edge 18 and up. Before fallback images were necessary for these browsers. It's good to note though that some older devices and operating systems may not support WebP, so keep in mind your target customer and whether they'll be running new software or not. Worst case you can setup fallback images if needed.

‍

In 2023 WebP has successfully become a good default alternative to JPEG images for web design. You can view current compatibility at caniuse.com

‍

‍

List of Current Browser support for WebP (March 2023)

‍

‍

WebP lossy support

‍

• Google Chrome (desktop) 17+
• Google Chrome for Android version 25+
• Microsoft Edge 18+
• Firefox 65+
• Opera 11.10+
• Native web browser, Android 4.0+ (ICS)
• Safari 14+ (iOS 14+, macOS Big Sur+)

‍

WebP lossy, lossless & alpha support

‍

• Google Chrome (desktop) 23+
• Google Chrome for Android version 25+
• Microsoft Edge 18+
• Firefox 65+
• Opera 12.10+
• Native web browser, Android 4.2+ (JB-MR1)
• Pale Moon 26+
• Safari 14+ (iOS 14+, macOS Big Sur+)

‍

WebP Animation support

‍

• Google Chrome (desktop and Android) 32+
• Microsoft Edge 18+
• Firefox 65+
• Opera 19+
• Safari 14+ (iOS 14+, macOS Big Sur+)

‍

‍

source: March 23, 2023 developers.google.com

‍

‍

‍

AVIF

‍

AVIF (AV1 Image File Format) is a newer image format based on the AV1 video codec, developed by the Alliance for Open Media. AVIF offers superior compression compared to JPEG and other image formats, resulting in even smaller file sizes and faster load times. In some cases, AVIF images can be up to 50% smaller than equivalent JPEG images, while maintaining high image quality.

‍

AVIF also supports features like transparency, animation, and HDR (High Dynamic Range) imaging, making it a powerful and versatile format for web images. Browser support for AVIF has grown in recent years and is now supported by key browsers like Chrome and Safari, but still is not supported by Microsoft Edge as of early 2023.

‍

AVIF is predicted to supersede the new WebP image format, and is close to having the browser support needed to make it the right format to use for your next web project. Keep an eye on browser support at: caniuse.com/avif

‍

‍

‍

JPEG XL

‍

JPEG XL is a new image format that aims to combine the best features of JPEG and other image formats, such as WebP and AVIF. Developed by the JPEG Committee, JPEG XL uses advanced compression techniques like variable block sizes and prediction filters to achieve smaller file sizes and better image quality.

‍

JPEG XL also offers features like transparency, animation, and support for high-dynamic-range imaging, making it a versatile format for web designers. The main issue with JPEG XL is that it is struggling to get a foothold and become widely supported by web browsers. Right now using this file type requires removing flags for certain browsers and it's support is spotty at best. Although JPEG XL shows promise, as of 2023 it's not the best image format to use for your website.

‍

‍

While JPEG remains a popular and widely supported format for web images, the emergence of newer formats like WebP, AVIF, and JPEG XL offer significant advantages in terms of compression, quality, and versatility. As support continues to expand among web browsers and devices, web designers and developers should consider using them to improve the performance and user experience of their websites.

‍

‍

‍

2. Resize Images

‍

‍

Resizing images for website use is an essential task that can significantly impact the user experience of your website. Images that are too large can slow down your website's load times, while images that are too small may appear pixelated or blurry. To ensure that your website's images look great and load quickly, it is essential to follow some basic guidelines when resizing images for website use.

‍

First, choose the appropriate image dimensions for your website. It's essential to maintain a balance between image quality and file size. A general rule of thumb is to aim for an image that is no more than 1500 pixels wide for desktop displays and 768 pixels wide for mobile displays.

‍

When resizing the image, use an image editing software like Adobe Photoshop, Lightroom, or Gimp to adjust the image's dimensions and compression levels. Most image editors will allow you to set the compression level and optimize the image for web use, reducing the file size without significantly affecting the image quality. If you don't have an image editor, you can use tools like Preview to simply resize the image.

‍

Finally, it's important to test the resized image on different devices and screen sizes to ensure it looks good and loads quickly. If the image is too large, it may cause slow load times, and if it's too small, it may appear pixelated.

‍

‍

‍

3. Compress Images

‍

‍

Compressing images reduces their file size without affecting their quality. There are several tools available for compressing images, such as TinyPNG and JPEGmini. You can also use online compression tools like Kraken.io and Compressor.io.

‍

My favorite for Mac is imageoptim which can compress images inside your existing folders through your right click menu, which speeds up my workflow. In conclusion compressing images can significantly reduce their file size, which can help improve your website's loading speed.

‍

‍

‍

4. Use Descriptive File Names

‍

‍

When you save your image files, make sure you use descriptive file names. This not only makes it easier for you to find the images you need later, but it also helps search engines understand what your images are about. For example, instead of using a generic name like "IMG_1234.jpg," use a descriptive name like "blue-widget.jpg."

‍

‍

‍

5. Optimize Alt Text

‍

‍

Alt text, or alternative text, is a description of an image that is displayed when the image cannot be loaded or is read by a screen reader for users with visual impairments. Writing appropriate alt text for website images is an essential step in ensuring accessibility and improving the user experience for all visitors to your website. Here are some guidelines on how to write effective alt text for website images.

‍

Firstly, the alt text should be descriptive and accurate, providing a concise summary of what the image is about. Avoid using vague or generic descriptions and instead focus on the specific content of the image. For example, instead of writing "picture of a dog," write "golden retriever playing fetch in a park."

‍

Secondly, keep the alt text concise and to the point. While it's important to provide enough detail to describe the image, avoid long and complex descriptions that may be difficult to understand. A good rule of thumb is to aim for a maximum of 125 characters.

‍

Thirdly, use appropriate language and tone when writing alt text. Avoid using overly technical terms or jargon that may be unfamiliar to some users. Additionally, consider the tone of your website and use language that is consistent with your brand and messaging.

‍

Fourthly, use keywords that are relevant to the image and your website's content. This can help improve the search engine optimization (SEO) of your website, making it easier for users to find your content.

‍

Lastly, test the alt text to ensure it is working correctly. Check that the alt text is displayed correctly when the image cannot be loaded and that it is read correctly by a screen reader.

‍

‍

‍

6. Consider Lazy Loading

‍

‍

Lazy loading is a technique that only loads images when they are needed, rather than loading all images at once. This can significantly improve your website's loading speed, especially if you have many images on a single page. To set this up manually it can become a bit more involved, but luckily most modern web builders have an option to lazy load using tools or by default like Webflow does.

‍

‍

‍

7. Host Images on a Content Delivery Network (CDN)

‍

‍

Finally, hosting your images on a Content Delivery Network (CDN) can significantly improve your website's loading speed. A CDN is a network of servers that are spread out across the globe, so when a user requests an image, it's delivered from the server closest to them. This reduces the distance the image needs to travel, which can speed up loading times. Many website builders, like Webflow and Wordpress have built-in CDN options, or you can use third-party services like Cloudflare or Amazon CloudFront.

‍

‍

In conclusion, optimizing images for use on a website is essential for improving your website's loading speed and user experience. By choosing the right file type, resizing and compressing images, you can make sure that you're delivering a great experience to the end user, while also improving your SEO and accessibility.

‍