图片优化

项目中图片的忧优化方案

使用CDN
图片懒加载
图片的动态剪裁
骨架屏

CDN（内容分发网络）

什么是CDN

CDN是指内容分发网络（Content Delivery Network），是一种用于提高网站性能和可用性的网络架构。它通过在全球各地的服务器上缓存网站的静态和动态内容，使用户能够更快速地访问网站并获得更好的用户体验。

CDN的作用

CDN通过将内容缓存在分布式的服务器上，使得用户可以从最近的服务器获取内容，从而减少了加载时间和延迟。它还可以通过负载均衡和自动故障转移，提高网站的可用性和稳定性。

使用CDN缓存，可以提高图片的加载速度和用户体验

主要体现在以下方面：降低服务器压力、降低成本、提高图片访问速度

图片懒加载

实现原理都可以使用IntersectionObserver的API实现

图片懒加载、无限滚动 → 阮一峰IntersectionObserver API 使用教程

什么是…、作用是…

图片懒加载是当图片进入视口区域才进行加载，这样可以节省带宽，提高网页性能。

如何实现

IntersectionObserverFunc组件

import { useEffect, useRef, useState } from 'react'
import styles from './index.less'

interface PropsType {
  src: string
}

const IntersectionObserverFuc = (props: PropsType)=>{
  const {src} = props;

  const imgRef = useRef(null)
  const [imgSrc, setImgSrc] = useState(src)

  useEffect(() => {
    const intersectionObserver = new IntersectionObserver(function(entries) {
      entries.forEach( function(element: any, index) {
        // debugger
          if (element.isIntersecting) {
            setImgSrc(src)
						//停止观察
            intersectionObserver.disconnect()
          } else{
            let img = ''; //可以使用默认图片
            setImgSrc(img)
          }
      });
    });
    intersectionObserver.observe(imgRef?.current);

    return () => {
      if(imgRef.current) {
				//关闭观察器
        intersectionObserver.unobserve(imgRef.current)
      }
    };
  }, [])

  return <img src={imgSrc} alt=""  ref={imgRef} className={styles.img}/>
}

export default IntersectionObserverFuc

//使用
let imgSrc = 'https://img0.baidu.com/it/u=2054720471,487433032&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500';
{
  Array(100).fill(imgSrc)?.map((item, index) => {
    return(
      <IntersectionObserverFuc src={item} key={index}/>
    )
  })
}

图片的动态剪裁

什么是…、作用是…

图片的动态剪裁是一种图片处理的技术，可以根据实际需要动态地剪裁图片的大小和比例，以适应不同的显示设备和尺寸。图片的动态剪裁通常是通过调用服务器端的图片处理的API实现的。

通常可以配置：图片地址、剪裁位置、缩放模式、加水印、滤镜等效果

作用：提升图片的加载速度和用户体验。

举例

图片的动态剪裁：阿里云和七牛云都支持参数，比如:

//没剪裁的
https://img.alicdn.com/imgextra/i4/379092709/O1CN01adpXJe1VslgpbprWS_!!379092709.jpg
//剪裁后的
https://img.alicdn.com/imgextra/i4/379092709/O1CN01adpXJe1VslgpbprWS_!!379092709.jpg_310x310