New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

progessive image #142

Open

dlrandy opened this issue Apr 24, 2020 · 1 comment

Owner

dlrandy commented Apr 24, 2020

https://www.hostinger.com/tutorials/website/improving-website-performance-using-progressive-jpeg-images

https://riot-optimizer.com/
https://imagecompressor.com/

Owner Author

dlrandy commented May 6, 2020

JPEG适合多种不同的色彩，放射，以及纹理（JPEG适合多种不同的色彩，放射，以及纹理（相片摄影）；png适合清晰的线条和平滑的颜色文本区域分割明显的；

同等质量的图片，png可能要比jpeg大很多

JPEG的压缩算法
将相似的像素进行分组，不同物体之间的线条尽量模糊

jpeg可以无损压缩到一个比较小的size；但是png压缩的小的话，图片的质量可能很次

只有png支持背景透明

icon font的一些缺点：

干扰语义，屏幕阅读器会读出来
高分辨率显示的时候，可能会模糊
3.如果font下载失败，可能会出现不好的风格
4,多颜色的icon不好支持

svg可以替换icon：

svg也可以有精灵图，使用工具svg-sprite iconMoon，
但是svg sprite会需要用到css mask和filter，浏览器的支持程度不是很好
2.svg的size一般会比icon大
3.svg是标记语言
4.浏览器支持率也很好
5.svg的语义也很好
缺点就是
因为是标记语言可能会恶意注入的安全问题

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment