现代 CSS

image

如何使用AVIF:新一代图像压缩格式

一直以来,我们熟悉的图片格式或者说到目前运用到Web页面或Web应用的图片格式主要是.jpg.png.gif.svg,以及.webp等,其实能运用到Web上的图片格式除了这些之外,还可以是JPEG 2000JPEG XR等。但最近社区有关于图片格式讨论最多的是AVIF图像,它将是新一代图像压缩格式,该格式(AVIF)图像质量与压缩文件大小的比率要优于我们熟悉的JPEG、PNG,甚至Webp图像格式。那么AVIF是什么样的图像呢?我们在Web开发中可以使用这种格式图像?如果可以,我们又将如何使用呢?今天这篇文章我们就来一起探讨这方面的知识,如果你感兴趣的话,请继续往下阅读。

探索Web上图片使用方式

图片在Web上的使用占比已经非常的高,特别是在手淘互动这样的环境之下,我们每一个项目的图片使用量都非常的大。如果能把图片用好,的确是件不容易的事情,而且面对的挑战也不小。经常会碰到有关于图片如何加载,如何适配,如何优化等等。另外在移动端开发中,很多同学在Web上使用图片的方法一般都是通过<img>标签和CSS的background-image属性来处理。也正因如此,很多同学却忘记了这两者应该如何?怎么使用又是最优的。甚至有很多前端同学都已经忘记了这两者的差异是什么?加上Web的技术不断革新,事实上除了前面提到的加载图片的方式之外,还有其他的方式,比如HTML5的<picture>(虽然这个元素标签曾经一度废弃过,但后来又添加回来了)。就算还是使用img标签,也有了新的优化,比如imgsrcset属性。那么面对这么多的变化,以及使用的场景,我们应该怎么来选择,才是最优的选择。今天这篇文章,我们就来一起探讨一下这些东西,希望大家会喜欢。

CSS美化图片

很久没有写blog了,不知道是时间太紧的原故还是人懒惰了。今天在webdesignerwall.com看到一篇不错的文章《CSS Decorative Gallery》,文章中介绍了多种不同的方法,用于美化Web页面中的IMG。学得很有意思,其实早在《CSS3制作图片样式》和《jQuery和CSS3给图片制作圆角》中有介绍过怎么美化img,但是今天这篇文章更有意思。我们不仿一起来看看:

返回顶部