各位观众老爷们，大家好！我是你们的老朋友，今天咱们来聊聊JavaScript在图片优化这块儿的那些事儿。这可不是随便贴几张图就完事儿了，这里面的门道多着呢！咱们争取用最通俗易懂的方式，把响应式图片、WebP格式、懒加载和预加载这些个概念给它扒个底朝天。
开场白：图片优化的重要性，别让你的网站卡成PPT！
想想看，你兴高采烈地打开一个网站，结果呢？页面刷了半天，图片才慢吞吞地冒出来，是不是感觉像回到了拨号上网的年代？用户体验瞬间降到冰点啊！图片优化就是为了避免这种惨剧发生，让你的网站跑得飞快，用户看得舒心。
第一幕：响应式图片，让图片“见人说人话，见鬼说鬼话”！
啥叫响应式图片？简单来说，就是根据不同的设备（手机、平板、电脑）和屏幕尺寸，加载不同大小和分辨率的图片。这样既能保证在小屏幕上图片清晰，又不会让大屏幕加载过大的图片，浪费带宽。
1. <picture> 元素：最强大的武器！
<picture> 元素是HTML5提供的，专门用来处理响应式图片的。它可以根据不同的 media 查询条件，选择不同的 <source> 元素加载不同的图片。
<picture>
<source media="(max-width: 600px)" srcset="small.jpg">
<source media="(max-width: 1200px)" srcset="medium.jpg">
<img src="large.jpg" alt="一张图片">
</picture>这段代码的意思是：
- 如果屏幕宽度小于 600px，加载
small.jpg。 - 如果屏幕宽度小于 1200px，加载
medium.jpg。 - 否则，加载
large.jpg。
<img> 元素是备选项，如果浏览器不支持 <picture>，或者没有任何 <source> 匹配，就会加载 <img> 里面的图片。
2. srcset 属性：简化版的选择！
<img> 元素的 srcset 属性也能实现响应式图片，但功能相对简单，只能根据像素密度 (DPR) 或视口宽度选择图片。
a. 根据像素密度 (DPR) 选择：
<img src="image.jpg"
srcset="image.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x"
alt="一张图片">这段代码的意思是：
- 如果设备 DPR 为 1，加载
image.jpg。 - 如果设备 DPR 为 2，加载
image-2x.jpg。 - 如果设备 DPR 为 3，加载
image-3x.jpg。
b. 根据视口宽度选择：
<img src="image.jpg"
srcset="image-480w.jpg 480w, image-800w.jpg 800w, image-1200w.jpg 1200w"
sizes="(max-width: 600px) 480px, 800px"
alt="一张图片">这段代码有点复杂，咱们慢慢解释：
srcset属性指定了不同宽度的图片和对应的宽度值（单位是w）。-
sizes属性指定了图片在不同屏幕尺寸下的显示宽度。(max-width: 600px) 480px表示：如果屏幕宽度小于 600px，图片显示宽度为 480px。800px表示：否则，图片显示宽度为 800px。
浏览器会根据 srcset 和 sizes 属性，计算出最合适的图片加载。
总结：srcset 简单易用，但 sizes 属性需要仔细设置，才能达到最佳效果。picture 元素功能强大，但代码相对复杂。
第二幕：WebP 格式，图片界的“瘦身专家”！
WebP 是 Google 开发的一种图片格式，它在保证图片质量的前提下，可以比 JPEG 格式压缩 25%-34%，比 PNG 格式压缩 26%。这意味着，使用 WebP 格式可以大大减小图片体积，提高页面加载速度。
1. 浏览器支持情况：
虽然 WebP 格式优势明显，但并非所有浏览器都支持。目前，Chrome、Firefox、Edge、Safari 等主流浏览器都已支持 WebP 格式。
2. 如何使用 WebP 格式？
a. HTML 中使用 <picture> 元素：
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="一张图片">
</picture>这段代码的意思是：
- 如果浏览器支持 WebP 格式，加载
image.webp。 - 否则，加载
image.jpg。
b. JavaScript 检测浏览器是否支持 WebP 格式：
function supportsWebp() {
if (!self.createImageBitmap) {
return false;
}
const webpData = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
return fetch(webpData)
.then(response => response.blob())
.then(blob => createImageBitmap(blob).then(() => true, () => false));
}
supportsWebp().then(supported => {
if (supported) {
console.log('浏览器支持 WebP 格式');
} else {
console.log('浏览器不支持 WebP 格式');
}
});这段代码通过创建一个小的 WebP 图片，然后尝试解码，来判断浏览器是否支持 WebP 格式。
3. 如何生成 WebP 格式的图片？
有很多工具可以生成 WebP 格式的图片，例如：
- Google 提供的
cwebp命令行工具。 - 在线 WebP 转换工具。
- 图片编辑软件（如 Photoshop、GIMP）的 WebP 插件。
总结：WebP 格式是优化图片的利器，但需要考虑浏览器的兼容性。可以使用 <picture> 元素或 JavaScript 来优雅降级。
第三幕：懒加载，让图片“姗姗来迟，却恰到好处”！
懒加载（Lazy Loading）是一种优化技术，它只在图片进入视口时才加载，而不是一次性加载所有图片。这样可以减少页面初始加载时间，提高用户体验。
1. 原生懒加载：HTML的新宠！
HTML5 提供了 loading 属性，可以实现原生的懒加载。
<img src="image.jpg" loading="lazy" alt="一张图片">loading 属性有三个值：
lazy：启用懒加载。eager：立即加载。auto：由浏览器决定是否懒加载。
2. JavaScript 实现懒加载：兼容性之王！
如果需要兼容不支持 loading 属性的浏览器，可以使用 JavaScript 来实现懒加载。
function lazyLoadImages() {
const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.removeAttribute('data-src');
observer.unobserve(img);
}
});
});
images.forEach(image => {
observer.observe(image);
});
}
document.addEventListener('DOMContentLoaded', lazyLoadImages);这段代码使用 IntersectionObserver API 来监听图片是否进入视口。当图片进入视口时，将 data-src 属性的值赋给 src 属性，从而加载图片。
解释：
document.querySelectorAll('img[data-src]')：选择所有带有data-src属性的<img>元素。IntersectionObserver：创建一个IntersectionObserver对象，用于监听元素是否进入视口。entry.isIntersecting：判断元素是否进入视口。img.src = img.dataset.src：将data-src属性的值赋给src属性，加载图片。img.removeAttribute('data-src')：移除data-src属性，防止重复加载。observer.unobserve(img)：停止监听该元素。
使用方法：
- 将图片的
src属性替换为data-src属性。 - 在页面加载完成后，调用
lazyLoadImages()函数。
<img data-src="image.jpg" alt="一张图片">3. 懒加载的优化：加个 Loading 图标！
为了提升用户体验，可以在图片加载之前，显示一个 Loading 图标。
<img data-src="image.jpg" alt="一张图片" class="lazy-load">
<style>
.lazy-load {
background: url('loading.gif') no-repeat center center;
}
</style>总结：懒加载可以显著提高页面加载速度，特别是对于图片较多的页面。原生懒加载简单易用，JavaScript 实现懒加载兼容性更好。
第四幕：预加载，让图片“未雨绸缪，先人一步”！
预加载（Preloading）是一种与懒加载相反的技术，它在页面加载完成后，提前加载一些图片，以便在需要时能够立即显示。
1. 如何预加载图片？
a. 使用 <link rel="preload"> 标签：
<link rel="preload" href="image.jpg" as="image">rel="preload" 属性告诉浏览器提前加载该资源。as="image" 属性告诉浏览器该资源是图片。
b. 使用 JavaScript 创建 Image 对象：
function preloadImages(images) {
for (let i = 0; i < images.length; i++) {
const img = new Image();
img.src = images[i];
}
}
const imagesToPreload = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
preloadImages(imagesToPreload);这段代码创建一个 Image 对象，并将 src 属性设置为需要预加载的图片 URL。浏览器会自动加载该图片。
2. 预加载的注意事项：
- 不要预加载过多的图片，否则会影响页面加载速度。
- 只预加载用户很可能看到的图片。
- 可以使用
as属性告诉浏览器资源的类型，以便浏览器更好地优化加载。
总结：预加载可以提高用户体验，但需要谨慎使用，避免过度预加载。
表格总结：各种图片优化策略的优缺点
| 策略 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 响应式图片 | 根据设备和屏幕尺寸加载不同大小的图片，节省带宽，提高用户体验。 | 代码相对复杂，需要生成不同大小的图片。 | 任何需要展示图片的网站，特别是移动端访问量大的网站。 |
| WebP 格式 | 压缩率高，在保证图片质量的前提下，可以大大减小图片体积，提高页面加载速度。 | 浏览器兼容性问题，需要考虑优雅降级。 | 任何需要展示图片的网站，特别是对页面加载速度要求高的网站。 |
| 懒加载 | 只有当图片进入视口时才加载，减少页面初始加载时间，提高用户体验。 | 需要 JavaScript 支持（原生懒加载除外），可能会影响首屏图片的加载速度。 | 图片较多的网站，特别是长页面或滚动加载的网站。 |
| 预加载 | 提前加载图片，以便在需要时能够立即显示，提高用户体验。 | 过度预加载会影响页面加载速度，需要谨慎使用。 | 需要快速显示图片的网站，例如图片轮播、图库等。 |
结尾：图片优化，永无止境！
图片优化是一个持续不断的过程，需要根据实际情况选择合适的策略。希望今天的分享能够帮助大家更好地优化网站图片，提升用户体验。记住，让你的网站飞起来！
好了，今天的讲座就到这里，谢谢大家！ 咱们下次再见！