如果打算使用图片,需牢记这些要点

5 浏览发布于 作者 zouyang留下评论分享按钮

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、SVG本身体积已经很小了,但是你还可以通过压缩让它们更小:

  • 使用webpack的loader可以有效地压缩SVG体积。用svgo-loader去除无用属性、用svg-sprite-loader合并多个SVG
  • SvgOmg
  • Svg-optimiser

9、掌握 各图片的格式,每种格式的优缺点、适用场景

  • 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文件格式。
  • 其它,比如,BMP:都或多或少因为一些原因没能在web领域占领地盘。

PS:

1) JPEG图片的保存支持2种方式,不同的保存方式会对应显示时的方式:
基线式(图片在显示时,加载方式是一行行从上往下加载出来)、
渐进式(图片在显示时,先显示一个模糊的轮廓,随着加载会越来越清晰)

JPEG2000)新一代压缩品质更好的格式。 展现方式为渐进加载图片,先传输图片轮廓呈现模糊外观,再渐渐的显示出清晰的原图。 压缩率比标准JPEG高约30%,支持无损和有损压缩。

比如 PS内保存 JPEG时可以选择格式:

2)一张图展示如何选择图片

10、使用 React 将 SVG 内联到 HTML 中,而不是将 SVG 以 img 的方式显示。
这样可以防止图标在其他内容之后出现时闪烁。
因为这些 SVG 现在是有效的 JavaScript,所以它们可以和周围的组件一起实现干净的单次渲染。在加载 js 的同时加载这些 SVG 的好处大于 SVG 的绘制性能。通过内联,不会出现图标闪烁。

想要打赏,请点击这里

发表评论

电子邮件地址不会被公开。 必填项已用*标注