HTML5与CSS3基础教程-第5章 图像

第5章 图像

《HTML5与CSS3基础教程（第8版）》 第5章读书笔记

• 2020/03/03
• 常用图片格式对比： （p96）

格式	用法	颜色	索引色（基本）透明	alpha透明	是否无损
JPEG	适用于大多数照片，以及其他颜色较多且可接受一些质量损失的图像。	1600万+	不支持	不支持	有损
PNG-8	适用于标识、重复的团及其他颜色较少的图像，或具有连续颜色的图像。	256	支持	支持	无损
PNG-24	与PNG-8相似，更适用于颜色丰富且质量要求较高的照片。	1600万+	支持	不支持	无损
PNG-32	与PNG-24相似，不过支持alpha透明。	1600万+	不支持	支持	无损
GIF	用法与PNG-8相似，大多数情况下使用PNG-8.	256	支持	不支持	无损

• WebP格式： 谷歌建立的图像格式，既支持有损压缩也支持无损压缩，文件大小远小于JPEG和PNG，支持alpha透明。但是现在兼容性不够好。（p96）
• SVG动画： 动画图片大多使用GIF，但是近年来SVG动画也是热门。（p99）
• img标签的alt属性： （p105）
  • alt属性可以为图像添加一段描述性文本，屏幕阅读器可以朗诵这些文本内容。
  • 当图像对内容价值较小，对障碍用户不太重要，或与邻近图像表达信息相似时，alt属性可以留空。
  • 不要使用alt属性代替caption，当有标题时可以考虑放在figure标签下使用fiigcaption。
• 合理使用img： （p105） 如果图像是页面设计的一部分，而不是内容的一部分，则应该使用background-image，而不是使用img。
• 应对Retina显示屏： Retina屏的PPI更多，所以导致同等大小的图片在Retina屏上会模糊。解决方法： 图像实际大小扩大两倍，但是所占尺寸不变。（p109）