模板网站官网,凡客设计,合肥建设局网站领导,合肥中科大网站开发优化步骤方案
不用图片。很多时候会使用到很多修饰类图片#xff0c;其实这类修饰图片 完全可以用 CSS 去代替。对于移动端来说#xff0c;屏幕宽度就那么点#xff0c;完全没有必要去加载原图浪 费带宽。一般图片都用 CDN 加载#xff0c;可以计算出适配屏幕的宽度#…优化步骤方案
不用图片。很多时候会使用到很多修饰类图片其实这类修饰图片 完全可以用 CSS 去代替。对于移动端来说屏幕宽度就那么点完全没有必要去加载原图浪 费带宽。一般图片都用 CDN 加载可以计算出适配屏幕的宽度然 后去请求相应裁剪好的图片。小图使用 base64 格式将多个图标文件整合到一张图片中雪碧图选择正确的图片格式 对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP格式具有更好的图像数据压缩算法能带来更小的图片体积而且拥有肉眼识别无差异的图像质量缺点就是兼容性并不好小图使用 PNG其实对于大部分图标这类图片完全可以使用 SVG 代替照片使用 JPEG
常见的图片格式及使用场景
BMP是无损的、既支持索引色也支持直接色的点阵图。这种图片格式几乎没有对数据进行压缩所以 BMP 格式的图片通常是较大的文件。GIF是无损的、采用索引色的点阵图。采用 LZW 压缩算法进行 编码。文件小是 GIF 格式的优点同时GIF 格式还具有支持动画 以及透明的优点。但是 GIF 格式仅支持 8bit 的索引色所以 GIF 格 式适用于对色彩要求不高同时需要文件体积较小的场景。JPEG是有损的、采用直接色的点阵图。JPEG 的图片的优点是采用了直接色得益于更丰富的色彩JPEG 非常适合用来存储照片与 GIF 相比JPEG 不适合用来存储企业 Logo、线框类的图。因为有损压缩会导致图片模糊而直接色的选用又会导致图片文件较 GIF更大。PNG-8是无损的、使用索引色的点阵图。PNG 是一种比较新的图片格式PNG-8 是非常好的 GIF 格式替代者在可能的情况下应该尽可能的使用 PNG-8 而不是 GIF因为在相同的图片效果下PNG-8具有更小的文件体积。除此之外PNG-8 还支持透明度的调节而 GIF并不支持。除非需要动画的支持否则没有理由使用 GIF而不是 PNG-8。PNG-24是无损的、使用直接色的点阵图。PNG-24 的优点在于它压缩了图片的数据使得同样效果的图片PNG-24 格式的文件大小要比 BMP 小得多。当然PNG24 的图片还是要比 JPEG、GIF、PNG-8大得多。SVG 是无损的矢量图。SVG 是矢量图意味着 SVG 图片由直线和曲线以及绘制它们的方法组成。当放大 SVG 图片时看到的还是线和曲线而不会出现像素点。这意味着 SVG 图片在放大时不会失真所以它非常适合用来绘制 Logo、Icon 等。WebP是谷歌开发的一种新图片格式WebP 是同时支持有损和无损压缩的、使用直接色的点阵图。从名字就可以看出来它是为 Web 而生的什么叫为 Web 而生呢就是说相同质量的图片WebP 具有更小的文件体积。现在网站上充满了大量的图片如果能够降低每一个图片的文件大小那么将大大减少浏览器和服务器之间的数据传输量进而降低访问延迟提升访问体验。目前只有 Chrome 浏览器和 Opera浏览器支持 WebP 格式兼容性不太好。 在无损压缩的情况下相同质量的 WebP 图片文件大小要比 PNG 小26% 在有损压缩的情况下具有相同图片精度的 WebP 图片文件大小要比 JPEG 小 25%~34% WebP 图片格式支持图片透明度一个无损压缩的 WebP 图片如果要支持透明度只需要 22%的格外文件大小。
