In today's internet age, website performance has become one of the keys to user experience. According to the latest April 2024 Page Weight data provided by httparchive, image resources account for 57% of the entire web page resources. More than other resource types such as CSS, JavaScript, fonts, etc. combined.
In web development, "Page Weight" refers to the overall size of a web page, usually measured in bytes or, more commonly, kilobytes (KB) or "megabytes" (MB). Page Weight is an important performance metric that has a direct impact on how fast a web page loads and how well it experiences the user experience.
At the same time, according to the data of image requests and image bytes in the past year, the number of image requests has been increasing while the number of image requests has remained almost unchanged. While the average number of image requests within a web page is almost the same, the size of an image within a web page has increased by about '5%'.
This means that with the continuous improvement of hardware devices and network speeds, the images of web pages are becoming larger and larger, and in the process of improving the performance of websites, optimizing image resources should be one of our top priorities. In this article, we will discuss image formats, compression techniques, and metrics to evaluate the performance of images.
一、优先考虑替代方案: CSS、SVG 及 WEB Font
In web development, sometimes we can use other alternatives to replace images, which can reduce the loading time of the page. Here are some common alternatives:
Alternative 1: CSS
CSS makes it easy to create simple graphics and patterns, such as solid backgrounds, gradients, and shapes. These styles can be applied directly to HTML elements via CSS attributes without the need for additional image resources, reducing HTTP requests and page load times.
Alternative 2: SVG
SVG is a vector graphics format that stores graphics information in XML format that can be controlled and dynamically modified via CSS and JavaScript. SVG graphics can be infinitely scaled up without distortion and are suitable for a wide range of resolutions and screen sizes, making them ideal for icons, simple graphics, and animations.
替代方案 3：WEB Font
Web fonts allow you to apply a specific font to the text of a web page without having to render the text as an image. This saves bandwidth and allows text to remain legible and optionally accessible. Common web font formats include WOFF (Web Open Font Format) and WOFF2, which support a wide range of font styles and languages, and work with CSS.
替代方案 4：Icon Fonts
Icon Fonts is an alternative to rendering icons as fonts. They are usually font files that contain various icons that can be controlled to be displayed on a web page using CSS.
2. Picture format
In web development, choosing the right image format is crucial. Different image formats have different characteristics and application scenarios, and the right choice can improve page load speed, optimize user experience, and reduce bandwidth consumption.
APNG(image/apng)
Dynamic portable network graphics that are a good choice for lossless animation sequences (GIFs have poor performance). AVIF and WebP perform better, but have less browser support. The following browsers are supported: Chrome, Edge, Firefox, Opera, Safari.
AVIF (image/avif)
The AVIF image archive format, due to its high performance and royalty-free use, is ideal for images and animated images. Compared to PNG or JPEG, it has better compression and supports higher color depth, animation frames, transparency, and more. Note that when using AVIF, you should include that the browser supports a better fallback format (i.e., to use <picture> elements). The following browsers are supported: Chrome, Firefox (only static graphs are supported, dynamic graphs have not yet been implemented), Opera, and Safari.
GIF (image/gif)
The image is interchangeable and is a good choice for simple images and animations. PNG is preferred for lossless and indexed still images, and WebP, AVIF, or APNG can be considered for animated sequences. The following browsers are supported: Chrome, Edge, Firefox, IE, Opera, Safari.
JPEG (image/jpeg)
Ideal for joint image expert panel images, lossy compression of still images (currently the most popular). If you need to reproduce the image more accurately, PNG is preferred; If you need better reproduction and a higher compression ratio, WebP/AVIF is preferred. The following browsers are supported: Chrome, Edge, Firefox, IE, Opera, Safari.
PNG (image/png)
Portable network graphics, PNG is preferred for more accurate reproduction of the source image than JPEG, or in cases where transparency is required. WebP/AVIF provides better compression and reproduction, but browser support is limited. The following browsers are supported: Chrome, Edge, Firefox, IE, Opera, Safari.
WebP (image/webp)
Web image format, which is a great choice for both still and animated images. WebP's compression is much better than PNG or JPEG, and it supports higher color depth, animation frames, transparency, and more. AVIF has slightly better compression, but it doesn't support as much in the browser, and progressive rendering isn't supported. The following browsers are supported: Chrome, Edge, Firefox, Opera, Safari.
Information sources:
[MDN Web Docs]
(https://developer.mozilla.org/zh-CN/docs/Web/Media/Formats/Image_types)
3. Image compression
In web development, image compression is an important optimization technique that reduces the file size of the image and thus the loading time of the page.
Lossy compression
Lossy compression is when part of the image information is lost during the compression process, thereby reducing the file size. This compression method is suitable for scenarios where image quality requirements are not particularly high, such as most images on a web page. Common lossy compression algorithms include JPEG, WebP (lossy mode), and more. Lossy compression can significantly reduce file size, but it can cause slight distortion in the picture.
Lossless compression
Lossless compression refers to reducing the file size while maintaining the quality of the image without losing image information during the compression process. This compression method is suitable for scenarios that require high image quality, such as icons and line drawings. Common lossless compression algorithms include PNG, WebP (lossless mode), and others. Although lossless compression cannot achieve the ultimate compression effect of lossy compression, it can maintain the integrity of image quality.
Compression tool
In web development, there are many excellent image compression tools that can help us compress images, so as to reduce the file size. Here are some commonly used image compression tools:
- TinyPNG (https://tinypng.com/): This is an online image compression tool that can compress PNG and JPEG images to a smaller file size without compromising image quality. It offers a simple and easy-to-use interface that allows users to upload and compress images quickly.
- Squoosh (https://squoosh.app/): Squoosh is an image compression tool developed by Google that can quickly compress images in the browser. It supports a variety of compression algorithms and parameter settings, and users can adjust the compression quality and file size according to their needs to achieve the best compression effect.
- imagemin (https://www.npmjs.com/package/imagemin): imagemin is an npm package for compressing images, which supports a variety of image formats, including PNG, JPEG, GIF, SVG, etc. By using different plugins, it can be easily integrated into the build process for the purpose of automating image compression.
- tinify (https://www.npmjs.com/package/tinify): tinify is an npm package for compressing JPEG and PNG images, it provides a simple and easy-to-use API to call Tinify's service for image compression with Node.js code. Although it is a paid service, it offers a free API quota and is suitable for small projects and individual developers.
Fourth, performance evaluation indicators
In web development, we can use some tools to evaluate the performance of images, so as to optimize image resources. The following are some commonly used image performance evaluation metrics:
File size
Image file size has a direct impact on how fast a web page loads. Larger image files take longer to download, which increases the loading time of web pages. Therefore, minimizing the file size of your images is one of the top priorities for optimizing your images' performance. Normally, we can reduce the file size by compressing the image, choosing the appropriate image format, and optimizing the image quality.
Image size
In addition to the file size, the size of the image also affects the loading speed. Excessive image size can cause unnecessary delays in the display of page content, especially on mobile devices. Therefore, it is crucial to ensure that the image is the right size for display on the web page. By resizing an image, you can reduce the number of unnecessary pixels, which can reduce the size and loading time of the image file.
Load time
Image load time refers to the time it takes for an image to be fully rendered in the user's browser from the time it is sent to the request. Optimizing image load times can improve the user experience and reduce the waiting time for users. Common methods include using lazy image loading techniques, lazy loading, and using a CDN to speed up image loading.
Image format
Choosing the right image format is essential to optimize image performance. Different image formats have different compression algorithms and transparency support, so there are trade-offs to be made on a case-by-case basis when choosing an image format. For example, the JPEG format is suitable for photos and complex images, while the PNG format is suitable for images with transparent backgrounds. Newer image formats such as WebP and AVIF can provide better compression and quality, but there may be some limitations when it comes to browser support.
Visual quality
In addition to optimizing the loading speed of your images, you also need to pay attention to maintaining the visual quality of your images. Excessive compression may cause distorted or blurry images, which can affect the user experience. Therefore, when optimizing the performance of images, it is necessary to maintain the clarity and detail of the images as much as possible while ensuring the file size.
compatibility
Finally, you also need to consider the compatibility of your images on different devices and browsers. Ensure that the image format and optimization strategy you choose will display and load correctly across browsers and operating systems to provide a consistent user experience.
5. Performance evaluation tools
Network
In the browser's developer tools, you can view the image request status of the website through the Network panel, including information such as request time, file size, load time, etc. By analyzing this data, you can understand how well your images are loading and optimize accordingly.
Lighthouse
Lighthouse is a web page performance evaluation tool developed by Google that helps developers evaluate the performance, accessibility, best practices, and more of web pages. In Lighthouse, you can view image performance metrics for your website, including information such as image file size, load time, format selection, and more. With Lighthouse's evaluation report, you can understand how well your website is optimizing your images and make recommendations for optimization.
PageSpeed Insights
PageSpeed Inights () is another web page performance evaluation tool developed by Google that helps developers evaluate the performance of web pages and provide optimization suggestions. In PageSpeed Insights, you can view image performance metrics in your website, including information such as image file size, load time, format selection, and more. With PageSpeed Insights' evaluation reports, you can understand how well your website is optimizing your images and make recommendations for optimization.
6. Summary
In today's Internet era, image optimization has become an important part of website performance optimization. By selecting the appropriate image format, compressing the image file, and optimizing the image loading time, you can effectively improve the performance of the website and optimize the user experience. In web development, we should pay attention to image optimization, and constantly learn and master the best practices of image optimization to improve the performance and user experience of the website.
Author: Home-Liang Jiawei
Source-WeChat public account: Home front-end sharing stream
Source: https://mp.weixin.qq.com/s/O3WjpMvSsxwZIQsxFoomqw