在本文中，我们将探索有效的图像优化技术，从而大大提高您的Web应用程序的性能。所以让我们深入研究！
1.图像格式
为每种类型的图像选择正确的图像格式可以显着影响图像的文件大小和质量。这里是可以用于应用的不同图像格式的列表。
A。 WebP
WebP是由Google开发的图像格式，与JPEG和PNG相比，它提供了更好的压缩和较小的文件大小。它得到了大多数现代浏览器的支持（不包括一些版本的Safari和Internet Explorer）。要使用WebP，您可以在HTML中同时提供JPEG或PNG等WebP和后备格式。
<!-- 👇 Set image sources with different formats in the `srcSet`
the attribute in order of preference -->
<!-- 👇 Fallback image source for browsers that don't
support srcSet in `src` attribute -->
<img
srcset="car.webp, car.jpg"
src="car.jpg"
alt="Car"
/>
b。 JPEG 2000
JPEG 2000是另一种具有良好压缩的高质量图像格式。但是，它在浏览器中的支持是有限的。与WebP相似，您可以提供JPEG 2000版本和后备格式。
<img
srcset="car.jp2, car.jpg"
src="car.jpg"
alt="Car"
/>
C。阿维夫
AVIF是一种较新的图像格式，可提供出色的压缩和图像质量。它在Chrome和Firefox等现代浏览器中得到了支持。
<img
srcset="car.avif, car.jpg"
src="car.jpg"
alt="Car"
/>
虽然WebP和AVIF在现代浏览器中得到了支持，但JPEG 2000的支持有限。因此，必须在不同浏览器上测试您的网站或应用程序，以确保所有用户显示正确的图像。
2.响应式图像
响应式图像允许您根据用户的设备和屏幕尺寸提供不同的图像。这样可以防止将大图像加载到较小的屏幕上，从而节省带宽。使用IMG元素中的SRCSET和大小属性来实现这一目标：
<img src="small.jpg"
srcset="medium.jpg 800w,
large.jpg 1200w,
xlarge.jpg 1600w"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw,
33vw"
alt="Responsive Image">
大小 - 根据媒体查询，将图像的预期显示尺寸告知浏览器。它不会影响浏览器选择下载的哪个图像。 SRCSET列出了具有宽度描述符（800W）的多个图像源。每个宽度描述符表示像素中图像的实际宽度。当浏览器遇到两个属性（大小和SRCSET）时，它遵循以下步骤：
- 它根据设备的视口宽度来评估大小属性，以确定图像的预期显示大小。
- 然后，它使用此计算出的大小以及SRCSET中的可用宽度描述符来决定要下载哪个图像。浏览器从SRCSET中选择最接近宽度描述符（最接近计算的大小）的图像。
3.懒惰加载
懒惰加载是一种推迟图像加载的方法，直到它们在用户的视口内可见为止。这减少了初始页面加载时间。在IMG元素上使用loading =“ Lazy”属性（默认情况下，将属性设置为急切）
<img src="image.jpg" alt="Image" loading="lazy">
4.预加载和缓存
预加载临界图像可在需要时减少延迟。在HTML的头部使用REL =“ PRELOAD”的链接标签：
<link rel="preload" href="image.jpg" as="image">
此外，考虑使用服务工作者缓存图像以进行后续访问。以下是使用服务工作者缓存图像的一个基本示例
// Service worker code (sw.js)
self.addEventListener('install', event => {
event.waitUntil(
caches.open('images-cache').then(cache => {
return cache.addAll([
'image.jpg',
'other-image.jpg',
// Add more images to the cache here
]);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
})
);
});
在React应用程序中，您可以使用React-Helmet软件包在HTML头部中添加预紧式链接以进行关键图像
import React from 'react';
import { Helmet } from 'react-helmet';
import PreloadImage from './assets/preload-image.png';
const ImageComponent = () => {
return (
<>
<Helmet>
<link rel="preload" href={PreloadImage} as="image" />
</Helmet>
<img src={PreloadImage} alt="Preload image alt" />
</>
);
};
5.图像精灵
图像精灵表是一个包含多个较小图像或图标的单个图像。在网页上呈现大量小图像时，它用于减少HTTP请求的数量。通过加载单个精灵表，您可以通过调整CSS背景位置显示特定图像。
假设您正在构建社交媒体网络应用程序，并希望显示各种图标，以供诸如喜欢帖子，评论和共享的操作。每个图标是一个通常用于应用程序不同部分的小图像。
没有图像精灵：
在传统方法中，您将每个图标作为单独的图像文件在您的HTML或CSS中包括在内：
<!-- Separate images for each icon -->
<img src="like-icon.png" alt="Like">
<img src="comment-icon.png" alt="Comment">
<img src="share-icon.png" alt="Share">
<!-- and so on... -->
与图像精灵：
使用Image Sprites，您可以将所有这些图标组合到单个精灵表中，从而减少HTTP请求的数量。这里是一个外观的例子：
/* CSS using image sprites */
.icon {
background-image: url("icons-sprite.png");
background-repeat: no-repeat;
}
.like-icon {
background-position: 0 0;
width: 24px;
height: 24px;
}
.comment-icon {
background-position: -24px 0;
width: 24px;
height: 24px;
}
.share-icon {
background-position: -48px 0;
width: 24px;
height: 24px;
}
/* and so on... */
<div class="icon like-icon"></div>
<div class="icon comment-icon"></div>
<div class="icon share-icon"></div>
在此示例中，所有图标（例如，注释，共享等）都合并为单个图标sprite.png Sprite表。 CSS类（例如。类似-Icon，.comment-icon，.share-icon）使用背景位置属性显示精灵表的正确部分作为每个图标的背景。
好处：
- Web应用程序现在只加载一个图像（Icons-sprite.png），而不是加载多个图像文件，减少了HTTP请求的数量。
- Sprite表已加载一次，可以通过浏览器缓存，改善后续页面负载。
- css类控制着从雪橇板上显示单个图标的显示，允许无缝悬停和滚动效果，而无需额外的加载延迟。
- 这会带来更快，更有效的用户体验，并改善了整体页面加载时间。
6.自适应图像服务
自适应图像服务是一种用于Web开发中的技术，可提供针对用户特定设备和网络条件进行优化的图像。自适应图像服务旨在提供最佳的图像质量，同时最小化图像文件大小并确保最佳性能。
它通常由具有动态调整功能的CDN或Image Server处理，并且实现细节可能会根据所选服务而有所不同。例如，如果您喜欢使用AWS CloudFront，请参阅此链接以获取有关图像优化的更多信息：AWS博客Image Optimization using Amazon CloudFront and AWS Lambda.
7.删除元数据
从图像中删除元数据是图像优化的重要步骤。由于图像元数据有时可以占用图像文件大小的很大一部分，尤其是对于由数字摄像机或智能手机捕获的图像，您可以通过删除元数据，因此您可以显着减少图像的整体文件大小，从而在网页上加载速度更快。 ImageMagick或在线图像元数据删除剂等工具可以帮助您。
8.将SVG用于图标和徽标
SVG是简单图标和徽标的理想选择，因为它们是基于向量的，并且可以缩放而不会失去质量。
<!-- logo.svg -->
<svg width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
<!-- index.html -->
使用SVG进行徽标和图标提供了轻巧，可扩展和视觉吸引力的解决方案，可改善网页性能，确保视觉效果清晰，并增强各种设备和浏览器的整体用户体验。
9.图像尺寸
在HTML或CSS中指定图像的尺寸对于防止布局变化并提高页面渲染速度至关重要。通过在HTML或CSS中指定图像的尺寸，您可以在初始渲染过程中为浏览器提供必要的信息，以分配图像的正确空间。
好处
- 防止布局变化：指定尺寸确保浏览器在加载之前知道图像的确切尺寸，以防止突然的布局移动。
- 更快的页面渲染速度：随着图像尺寸提前已知，浏览器可以更有效地渲染布局，从而导致页面加载时间更快。
- 改进的用户体验：通过消除布局变化，用户具有更加一致且令人愉悦的浏览体验。
要指定图像尺寸，您可以直接在IMG标签中包含宽度和高度属性，或通过将类属性添加到CSS中的IMG标签来应用特定样式。
<img src="logo.jpg" alt="logo" width="300" height="200" />
<!-- or -->
.logo {
width: 300px;
height: 200px;
}
<img src="logo.jpg" alt="logo" class="logo" />
奖金
除了上面提到的技术外，您还可以利用诸如Blurhash诸如占位符图像之类的技术，渐进的图像加载，以逐步改进质量（最初以低分辨率显示图像，并随着质量的质量逐渐提高质量），以及带有图像的自动图像压缩，用于cdn的自动图像。
> cdn。我希望您真的很喜欢它，并学习了一些有价值的技术。我没有涵盖图像优化的许多其他技术，因此请随时探索它们。如果您知道我没有提到任何其他技术，请发表评论。
保持好奇；保持编码。