从前端的角度说一下网站图片该如何优化

主要从两个角度来优化图片：
①降低图片的大小，即对图片进行合理的压缩
②进行响应式加载图片
③使用一些自动优化的cdn或者插件进行合理的优化

首先：图片优化首先要根据你所想适应的场景进行合理选择图片的格式

①降低图片的大小，即对图片进行合理的压缩

比如说压缩png格式图片，可以选择TinyPNG:一个压缩PNG的神站

②进行响应式加载图片

响应式加载图片即当页面对图片请求是，根据用户的设备来来请求不同分辨率的图片，如一个小屏幕低dpi的设备的用户，可以请求一个压缩后或者一倍图，但是如果一个高清屏幕高dpi的用户，则可以请求一个高倍图高清图，增加用户体验。

③使用一些自动优化的cdn或者插件进行合理的优化**

1. 自动优化：CDN：

向CDN请求图片的URL参数中包含了图片处理的参数（格式、宽高等），CDN服务器根据请求生成所需的图片，发送到用户浏览器。
推荐好用的CDN，七牛云https://www.qiniu.com/
又拍云https://www.upyun.com/
CDN的图片处理接口极其丰富，覆盖了图片的大部分基本操作，例如：
图片裁剪，支持多种裁剪方式（如按长边、短边、填充、拉伸等）
图片格式转换，支持JPG, GIF, PNG, WebP等，支持不同的图片压缩率
图片处理，支持图片水印、高斯模糊、重心处理等

2. 自动优化的插件：Grunt/Gulp：

这款grunt-image插件功能就十分优秀

3.自动优化：Google PageSpeed

对于Web优化，Google发布了了Google PageSpeed这个服务器模块，可以在apache或ngnix中加载，通过在服务器配置文件中进行设置来进行自动化的优化。对于图片格式转换、图片优化甚至图片LazyLoad都有相关选项。这部分展开会非常长，请感兴趣的同学参考Google的手册。

文章部分内容参考https://www.cnblogs.com/sunshq/p/4154913.html