Web前端小白要了解什么 图片优化技巧都有哪些

Web前端小白要了解什么？图片优化技巧都有哪些？图片优化是Web前端工程师日常工作的重要组成部分，数据显示，图片内容已经占到了互联网内容总量的62%，想要优化网站性能，图片是绝对的热点和重点。很多Web前端学习小白想知道图片优化有哪些技巧，接下来小编就给大家介绍一下降低图片的大小的有效方式——图片压缩。

目前常见的图片类型有两种：JPEG、JPG、WebP。根据类型的不同，我们需要采用不同的压缩方式。

JPG

JPG适用于呈现色彩丰富的图片，比如打的背景图、轮播图或Banner图，但JPEG图像不支持透明度处理，透明图片需要召唤PNG来呈现。

对于JPEG格式的图片，你可以使用Mozjpeg进行压缩。注意，默认情况下，Mozjpeg生成渐进式JPEG，这会导致图像从低分辨率逐渐加载到高分辨率，直到图片完全加载为止。由于它们的编码方式，它们也比原始的JPEG略小。可以使用Sindre Sorhus提供的这个命令行工具来检查JPEG图像是否是渐进式的。如果你更喜欢使用原始的JPEG，可以在options对象中将progressive设置为false。

PNG

PNG(可移植网络图形格式)是一种无损压缩的高保真的图片格式，主要用来呈现小的 Logo、颜色简单且对比强烈的图片或背景等。PNG具有比 JPG 更强的色彩表现力，对线条的处理更加细腻，对透明度有良好的支持。它弥补了JPG的局限性，唯一的缺点就是体积太大。

对于PNG图片，通常使用pngquant进行图片压缩。pngquant是一个命令行工具和一个用于有损压缩PNG图像的库。转换显着减少文件大小(通常高达70%)，并保留完整的alpha透明度。生成的图像与所有网络浏览器和操作系统兼容。

WebP

WebP集多种图片格式的优点于一身，它可以像JPEG一样对细节丰富的图片信手拈来，像PNG一样支持透明，像GIF一样可以显示动态图片。与PNG相比，WebP无损图像的尺寸缩小了26%。在等效的SSIM质量指数下，WebP有损图像比同类JPEG图像小25-34%。

尽管WebP格式的图片具有各种优势，但它不能完全替代JPEG和PNG，因为浏览器对WebP支持并不普遍，比如Firefox、Safari和Edge。但据caniuse.com的数据显示，全球超过70%的用户使用支持WebP的浏览器。这意味着通过使用WebP图像，可以为大约70%的客户提供更快的Web页面及更好的体验。

一旦有了WebP图像，我们可以使用以下标记将它们提供给可以使用它们的浏览器，同时向不兼容WebP的浏览器使用png或者jpeg。

使用此标记，理解image/webp媒体类型的浏览器将下载Webp图片并显示它，而其他浏览器将下载JPEG图片。

每个Web前端网站都有可能引入很多的图片来达到酷炫或者展示的效果，图片越多、请求次数越多，造成延迟的可能性也就越大，因此对图片压缩优化至关重要。如果你进入Web前端行业，可以专业学习一下，让自己更快更好的学习Web前端。