1. 懒加载（Lazy Loading）
懒加载是一种延迟加载图片的技术。只有当图片进入用户的视口（viewport）时，才会开始加载图片资源。这样可以显著减少初始页面加载时间，因为只加载当前视口内的图片。
React中的懒加载
在React中，可以使用 react-lazyload 或 Intersection Observer API 来实现懒加载。
使用 react-lazyload：
npm install react-lazyload
import React from 'react';
import LazyLoad from 'react-lazyload';
const ImageGallery = ({ images }) => (
<div>
{images.map((image, index) => (
<LazyLoad key={index} height={200} offset={100}>
<img src={image} alt={`img-${index}`} />
</LazyLoad>
))}
</div>
);
export default ImageGallery;
使用 Intersection Observer API：
import React, { useEffect, useRef, useState } from 'react';
const LazyImage = ({ src }) => {
const [isVisible, setIsVisible] = useState(false);
const imgRef = useRef();
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setIsVisible(true);
observer.disconnect();
}
},
{ threshold: 0.1 }
);
if (imgRef.current) {
observer.observe(imgRef.current);
}
return () => {
if (imgRef.current) {
observer.unobserve(imgRef.current);
}
};
}, []);
return (
<img
ref={imgRef}
src={isVisible ? src : ''}
alt="lazy"
style={
{ height: '200px', width: '100%', background: 'gray' }}
/>
);
};
const ImageGallery = ({ images }) => (
<div>
{images.map((image, index) => (
<LazyImage key={index} src={image} />
))}
</div>
);
export default ImageGallery;
Vue中的懒加载
在Vue中，可以使用 vue-lazyload 插件。
安装 vue-lazyload：
npm install vue-lazyload
在项目中使用：
import Vue from 'vue';
import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
});
在组件中：
<template>
<div>
<img v-lazy="image" v-for="(image, index) in images" :key="index" />
</div>
</template>
<script>
export default {
data() {
return {
images: ['image1.jpg', 'image2.jpg', 'image3.jpg', ...]
};
}
};
</script>
2. 图片压缩
图片压缩通过减少图片文件的大小来提高加载速度。压缩后的图片质量可能会有所降低，但对用户来说通常是不可察觉的。通过压缩图片，页面加载所需的带宽减少，从而提高了加载速度。
在线压缩
你可以使用TinyPNG在线压缩图片。上传图片并下载压缩后的版本。
本地压缩
你可以使用ImageMagick或其他本地工具批量压缩图片。
# 安装ImageMagick
brew install imagemagick
# 压缩JPEG图片
mogrify -quality 85% *.jpg
# 压缩PNG图片
mogrify -strip -resize 50% -quality 85 -format jpg *.png
3. 使用CDN
CDN（内容分发网络）将图片存储在多个地理位置的服务器上。用户请求图片时，会从距离最近的服务器获取，从而提高加载速度，并减少服务器的负担。
使用CDN
例如，可以使用Cloudflare CDN。
- 创建一个Cloudflare账户。
- 添加你的域名并完成设置。
- 上传你的图片到Cloudflare的存储空间。
- 使用提供的CDN URL来替换你的网站图片URL。
<img src="https://your-cdn-url.com/path/to/image.jpg" alt="example image">
4. 图片格式优化
现代图片格式（如WebP）通常比传统格式（如JPEG和PNG）更小，但具有相似或更好的质量。使用现代格式可以进一步减少图片文件大小，提高加载速度。
转换为WebP格式
你可以使用cwebp工具将图片转换为WebP格式。
# 安装cwebp
brew install webp
# 转换图片
cwebp input.jpg -o output.webp
在网页中使用WebP格式图片，并提供回退格式：
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="example image">
</picture>
5. 预加载关键图片
比如说，在react或者vue中可以在页面底部添加一个<img /> 标签来实现
预加载关键图片可以确保这些图片在页面加载时立即可用，提升用户体验。使用<link rel="preload">标签可以在页面加载时优先加载这些图片。
实现预加载
<head>
<link rel="preload" as="image" href="path/to/important-image.jpg">
</head>
<body>
<img src="path/to/important-image.jpg" alt="important image">
</body>
6. 瀑布流布局
瀑布流布局将图片分布在不同的列中，随着用户滚动页面，逐步加载新的图片。这种布局可以显著减少一次性加载图片的压力，提高用户体验。
React中的瀑布流布局
可以使用react-masonry-css库。
安装react-masonry-css
npm install react-masonry-css
使用react-masonry-css
import React from 'react';
import Masonry from 'react-masonry-css';
const breakpointColumnsObj = {
default: 4,
1100: 3,
700: 2,
500: 1
};
const ImageGallery = ({ images }) => (
<Masonry
breakpointCols={breakpointColumnsObj}
className="my-masonry-grid"
columnClassName="my-masonry-grid_column"
>
{images.map((image, index) => (
<img key={index} src={image} alt={`img-${index}`} />
))}
</Masonry>
);
export default ImageGallery;
CSS样式
.my-masonry-grid {
display: flex;
margin-left: -30px; /* gutter size offset */
width: auto;
}
.my-masonry-grid_column {
padding-left: 30px; /* gutter size */
background-clip: padding-box;
}
/* Style your images */
.my-masonry-grid_column > img {
margin-bottom: 30px;
}
通过结合以上优化技术，你可以显著提高图片加载的性能，提供更好的用户体验。如果你对具体实现有更多问题，欢迎在评论中提出。希望这篇博客能帮助你理解并应用这些优化策略。