随着时代的变迁和技术的不断更新,Web中的图标(icons)不再仅仅是局限于<img>。除了<img>直接调用icons之外,还有Sprites(俗称雪碧图)、Icon Font(字体图标)、SVG Icon等等。
前端工程师关心页面可访问姓、性能以及重构的灵活性,可重复性,可维护性等等。
原始的<img>
优势
更换简单方便,只需要修改图标路径或覆盖图标文件名
图标大小易于掌控
劣势
增加HTTP请求,如果页面使用的图标过多,直接拉高了HTTP的请求数,也就直接影响了页面的加载性能。
不易适配各种终端和分辨率,特别是高PPI的显示设备,有可能造成图标模糊
不易修改图标的样式,比如颜色,阴影等
不易维护
Sprites图标(雪碧图)