1、加载图片
- 按需使用 预加载，比如浏览首屏，预加载第二屏……
- 按需使用 懒加载，比如入屏再加载
2、加载不成功的处理
- 按需使用 alt 属性来指定图片无法加载时的提示文本
- 按需为图片指定宽高，这样当无法加载时，不会因为图片宽高问题导致布局错乱。
- 按需使用 默认图策略
3、图片处理
- CSS精灵图(sprite)：当你为图片实现了移入移出改变效果时避免图标闪烁/当你需要使用许多小图时，是否考虑了使用 合并各图像到一张图上
- 按需使用 响应式 图片。
- 按需使用 打包工具 批量处理图片，比如使用 webpack 的 loader 来处理图片
- 使用 图片压缩 ，比如 TinyPng(https://tinypng.com/) 、智图(https://zhitu.isux.us/) 。
4、图标
- 是否考虑过将图片图标，改为使用 svg、 字体图标 icon-font
- 按需考虑 简单图标，亦可 CSS 画出来。
- 按需使用 base64 代替小图标，亦可通过 打包工具 来批量生成
5、背景图：
- 背景图像是否增加了页面的加载时间。
- 背景图像是否与页面中的其他图象搭配良好。
- 背景图像是否与页面中的文字颜色搭配良好。
- 图像在页面中平铺后，看上去还可以吗？
- 对文字的注意力被背景图像喧宾夺主了吗？
- 使用大背景图时可设置一个符合视觉的背景色作为衬底。
6、独立的图片服务器、独立图片域名、CDN加速、H5本地存储的配合使用
7、img 的 Srcset 属性的选择使用：
<img src="ing.jpg" srcset="img.jpg, img2x.jpg 2x" alt="img">
<img src="img.jpg" srcset="img1024.jpg 1024w, img2048.jpg 2048w" alt="img">
srcset 是为了那些支持该属性的浏览器。img2x.jpg是为了适配dpr = 2的retina屏幕。
img1024 是为了适配宽度为 1024 像素的屏幕。
设置 src 是防止浏览器不支持 srcset 属性8、css image-set() 的选择使用：
为不同的设备分配合适得图像 :
.box {
background-image: image-set( "test.png" 1x, "test-2x.png" 2x, "test-print.png" 600dpi );
}9、SVG本身体积已经很小了，但是你还可以通过压缩让它们更小：
- 使用webpack的loader可以有效地压缩SVG体积。用svgo-loader去除无用属性、用svg-sprite-loader合并多个SVG
- SvgOmg
- Svg-optimiser
10、掌握 各图片的格式，每种格式的优缺点、适用场景
- JPEG：
有损压缩，色彩信息保留好，支持 24位 真彩色（每个像素点可以显示 2的24次方 种颜色，大概是1600万种颜色）；
不支持透明色、不支持动画；
在色调及颜色平滑变化的相片或是写实绘画（painting）上可以达到它最佳的效果，压缩质量可以根据需要来选择，压缩比率越大质量越差；
不适合于线条绘图（drawing）和其他文字或图示（iconic）的图形。压缩率越高，质量越差。 - GIF：
无损压缩，GIF 是 8位 色彩，每个像素点只能显示256色。GIF分为 静态GIF 和 动画GIF；
支持透明色、支持动画、“体型”很小；
由于颜色单一，所以适用于具有单色或颜色数少的图像，不仅能获得更小的文件体积，还不会影响画质（如 线状图、Logo 等）。 - PNG：
无损压缩，主要有 PNG-8（8位 支持256种颜色）、PNG-24、PNG-32 的三种格式，色彩丰富程度递增；
支持透明（但24位PNG不支持透明）且比 GIF 透明效果更好，不支持动画；
相比 JPEG，防锯齿 PNG 非常有优势；
PNG 文件容量较大，不适合日常的传播流通，其设计目的是为了替代 GIF和TIFF文件格式。 - 如果你想又具有png的品质又可是动图或者静图，可以考虑 WebP 图片格式。
- 其它，比如，BMP：都或多或少因为一些原因没能在web领域占领地盘。
PS:
1) JPEG图片的保存支持2种方式，不同的保存方式会对应显示时的方式：
基线式（图片在显示时，加载方式是一行行从上往下加载出来）、
渐进式（图片在显示时，先显示一个模糊的轮廓，随着加载会越来越清晰）
JPEG2000）新一代压缩品质更好的格式。 展现方式为渐进加载图片，先传输图片轮廓呈现模糊外观，再渐渐的显示出清晰的原图。 压缩率比标准JPEG高约30%，支持无损和有损压缩。
比如 PS内保存 JPEG时可以选择格式：
2)一张图展示如何选择图片
11、使用 React 将 SVG 内联到 HTML 中，而不是将 SVG 以 img 的方式显示。
这样可以防止图标在其他内容之后出现时闪烁。
因为这些 SVG 现在是有效的 JavaScript，所以它们可以和周围的组件一起实现干净的单次渲染。在加载 js 的同时加载这些 SVG 的好处大于 SVG 的绘制性能。通过内联，不会出现图标闪烁。
12、按需为图片指定 最大、最小 宽高度：
img { max-width: 100%;}win 平台缩放图片时，可能出现图像失真现象。可使用 IE 专有命令：
img { -ms-interpolation-mode: bicubic; }13、当为 鼠标 自定义鼠标指针图片时，需设置备选图标。
下例，如果 cur图片 没加载进来或出错了，那么就用第二备选pointer样式。
body{
cursor:url(xxxx.cur) ,pointer;
}
想要打赏，请点击这里