我正在使用React构建我的网站,并且要显示多个图像。使用Google Chrome审核功能运行审核后,我收到了“以下一代格式提供图像”的机会消息。
在阅读了各种格式(WebP,JPEG2000,JPEGXR)之后,似乎只有某些浏览器才支持每种格式。例如,我不能将所有图像都转换为WebP,因为它们不会显示在Safari浏览器中。因此,我的问题是如何根据所使用的浏览器“提供”每种类型的图像?这是我尝试过的:
我有3种类型的文件,jpg,JPEG2000和WebP。每个都像这样被导入:
import Imagejpg from './path/image.jpg'
import ImageJPEG2000 from './path/image.JPEG2000'
import ImageWebP from './path/image.webp'
Run Code Online (Sandbox Code Playgroud)
然后在我的课堂上,我有一个包含图像的对象数组。要使用图像:
<picture>
<source>
srcSet={`
${project.Imagejpg},
${project.ImageJPEG2000},
${project.ImageWebP},
</source>
<img src={project.imageWebP} alt=""/>
</picture>
Run Code Online (Sandbox Code Playgroud)
现在,如果我仅使用jpg图片,则它在所有浏览器上都可以正常工作,因为大多数浏览器都可以使用jpg。但是,我正在尝试优化网站并使用更好的图像文件类型。有没有办法使用几种类型的文件,或者我缺少什么?
最近在一次采访中有人问我这个问题,并对其他人的想法感到好奇。
“什么时候应该计算大O?”
大多数网站/书籍都在谈论如何计算Big O,但实际上并没有在您应该进行计算的时候。我是入门级开发人员,经验很少,因此不确定我是否在正确的道路上思考。我的想法是,您将有一个目标Big O要努力实现,开发算法然后计算BigO。然后尝试重构算法以提高效率。
然后我的问题就变成了这实际上是在工业界发生的事情还是我离这还很遥远?