一直以来我都热衷于使用CSS来制作动效，特别是随着CSS Houdini的到来，能更轻易的帮助我们实现一些优秀的动画效果。但不管怎么样，她在制作动效，特别是创建引人注目的动画有时也非常的棘手。即使你对CSS制作动效非常的了解，但很难避免制作动效带来的高开发成本，也因此，开始探讨Lottie Web来快速帮助我们还原Web动画效果，提高效率，提升效果。不过是哪一种，都需要开发者对其有较深的了解，才能在开发动效的时候不会感到棘手。特别是在一些框架开发体系下（比如React）开发动效，更令大家感到困惑，不过幸运的是，Framer 为大家带来一个开源的React动画库，即 Framer Motion。

开发者基于Framer Motion可以制作出漂亮的动效，而且开发过程非常简单，甚至可以说是傻瓜式开发。这是因为Framer Motion为开发者提供了可用于开发动效的API。这些API都是声明式的，通过props来驱动的。在这篇文章中，我们将仔细看看如何使用Framer Motion帮助我们快速地创建令人敬畏的动效。如果你也对此感兴趣的话，请继续往下阅读。

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

图像是Web中最常见的媒体属性之一，对于开发者而言，都知道使用HTML的<img>元素或CSS的background-image属性可以将图像放到Web上，但更多的时候都在聊，如何使用CSS相关的属性来处理Web中的图像，比如使用图像的适配、图像效果的处理等。事实上，HTML中的<img>元素也有很多属性对于我们在Web中使用图像起着重要的作用，特别是随着前端技术革新，<img>新增了一些新的属性，比如srcset、sizes、loading和intrinsicsize等。

图像优化应该是自动化的。图像优化的最佳实践发生变化很容易被忽略，而且不经过构建管道的内容很容易丢失。为了实现自动化：在构建过程中使用Imagemin或libvip。这些有许多替代方案。大多数CDN(如Akamai)和第三方解决方案，如Cloudinary、imgix、Fastly’s Image Optimizer、Instart Logic’s SmartVision或ImageOptim API都提供了全面的图像优化自动化解决方案。在阅读博客文章和调整配置上花费的时间可能会超过服务月费(Cloudinary有一个免费套餐)。如果你不想关心这项工作外包的成本或延迟问题，那么上面的开源选项是可靠的。像Imageflow或Thumbor这样的项目启用了自我托管的替代方案。