[null,null,["最后更新时间 (UTC)：2025-07-25。"],[[["\u003cp\u003eThis page is outdated and users should refer to the latest version for current information on PageSpeed Insights.\u003c/p\u003e\n"],["\u003cp\u003eOptimizing images can significantly improve website performance by reducing page load times.\u003c/p\u003e\n"],["\u003cp\u003eConsider image format, quality, resolution, and responsiveness when optimizing for web.\u003c/p\u003e\n"],["\u003cp\u003eGIF and PNG images can be optimized by removing unnecessary alpha channels and, in some cases, converting GIFs to PNGs.\u003c/p\u003e\n"],["\u003cp\u003eJPEG images can be optimized by adjusting quality, chroma sampling, and using progressive or grayscale formats when appropriate.\u003c/p\u003e\n"]]],["PageSpeed Insights suggests optimizing images to reduce file size and improve page performance. Key actions include following best practices for responsive images and using an image optimization checklist. For GIFs and PNGs, convert to PNG unless animated or tiny, and remove the alpha channel if opaque. For JPEGs, reduce quality to 85, use 4:2:0 chroma sampling, employ progressive format for larger images, and utilize grayscale for black and white images. The convert binary can be used for optimization.\n"],null,["# Optimize Images\n\n| **Deprecated** . This page was written for version 4 of the PageSpeed Insights API, which is deprecated and will be shut down in May 2019. [Version 5](/speed/docs/insights/v5/get-started) is the latest and provides both real-world data from the Chrome User Experience Report and lab data from Lighthouse.\n\nThis rule triggers when PageSpeed Insights detects that the images on the page can be optimized to reduce their filesize without significantly impacting their visual quality.\n\n### Overview\n\nImages often account for most of the downloaded bytes on a page. As a result, optimizing images can often yield some of the largest byte savings and performance improvements: the fewer bytes the browser has to download, the less competition there is for the client's bandwidth and the faster the browser can download and render content on the screen.\n\n### Recommendations\n\nFinding the optimal format and optimization strategy for your image assets requires careful analysis across many dimensions: type of data being encoded, image format capabilities, quality settings, resolution, and more. In addition, you need to consider whether some images are best served in a vector format, if the desired effects can be achieved via CSS, and how to deliver appropriately scaled assets for each type of device.\n\n### Optimizations for all types of images\n\n- Follow the [best practices for serving responsive images](/web/fundamentals/design-and-ui/media/images)\n- Follow the [image optimization checklist for individual images](/web/fundamentals/performance/optimizing-content-efficiency/image-optimization#image_optimization_checklist)\n\n### Optimizations for GIF, PNG, and JPEG images\n\n[GIF](https://en.wikipedia.org/wiki/GIF), [PNG](https://en.wikipedia.org/wiki/Portable_Network_Graphics), and [JPEG](https://en.wikipedia.org/wiki/JPEG) formats make [96%](http://httparchive.org/interesting.php) of the entire Internet's image traffic. Because of their popularity, PageSpeed Insights provides specific optimization recommendations. For your convenience, you can download the optimized images directly from PageSpeed Insights (which is using image optimization library from [modpagespeed.com](http://www.modpagespeed.com)).\n\nYou can also use tools such as the [convert](https://www.imagemagick.org/script/convert.php) binary made by ImageMagick which can apply similar optimizations - see example instructions below.\n\nIf you use third party tools, please be aware that the transformation might make your images larger, if yours were already very well optimized. If that happens, please use your originals.\n\n**GIF** and **PNG** are lossless formats, in that the compression process does not make any visual modification to the images. For still images, PNG achieves better compression ratio with better visual quality. For animated images, consider using `video` element instead of a GIF, to achieve better compression.\n\n- Always convert GIF to PNG unless the original is animated or tiny (less than a few hundred bytes).\n- For both GIF and PNG, remove alpha channel if all of the pixels are opaque.\n\nFor example, you can use [convert binary](https://www.imagemagick.org/script/convert.php) to optimize your GIF and PNG images with the following command (parameters inside brackets are optional):\n\n`convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png`\ncuppa.png (1,763 Bytes)\n\n`convert cuppa.png -strip cuppa_converted.png`\ncuppa_converted.png (856 Bytes)\n\n**JPEG** is a lossy format. The compression process removes visual details of the image, but the compression ratio can be 10x larger than GIF or PNG.\n\n- Reduce quality to 85 if it was higher. With quality larger than 85, the image becomes larger quickly, while the visual improvement is little.\n- Reduce Chroma sampling to 4:2:0, because human visual system is less sensitive to colors as compared to luminance.\n- Use progressive format for images over 10k bytes. Progressive JPEG usually has higher compression ratio than baseline JPEG for large image, and has the benefits of progressively rendering.\n- Use grayscale color space if the image is black and white.\n\nFor example, you can use [convert binary](https://www.imagemagick.org/script/convert.php) to optimize your JPEG images with the following command (parameters inside brackets are optional):\n\n`convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg`\npuzzle.jpg (13,501 Bytes)\n\n`convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg`\npuzzle_converted.jpg (4,599 Bytes)\n\nFeedback\n--------\n\nWas this page helpful? \nYes Great! Thank you for the feedback. If you have a specific, answerable question about using PageSpeed Insights, ask the question in English on [Stack\n| Overflow](https://stackoverflow.com/questions/tagged/pagespeed-insights). For general questions, feedback, and discussion, start a thread in the [mailing list](https://groups.google.com/forum/#!forum/pagespeed-insights-discuss).\nNo Sorry to hear that. If you have a specific, answerable question about using PageSpeed Insights, ask the question in English on [Stack\n| Overflow](https://stackoverflow.com/questions/tagged/pagespeed-insights). For general questions, feedback, and discussion, start a thread in the [mailing list](https://groups.google.com/forum/#!forum/pagespeed-insights-discuss)."]]
