什么是为网络优化图像的好方法？(Figma线框到代码)

Question

我在白手起家建立自己的投资组合。有很多高质量的图像，我想包括，但我不知道如何做到这一点，而不放慢网站或牺牲太多的图像分辨率。

我用Figma创建了我的线框，但是当我输出这些图像时，质量大大降低了。如果我把它们导出2倍或3倍，分辨率就会更好，但这是与速度的权衡。我是很新的前端，试图编码我自己的网站，作为学习编码的方式，所以请帮助。我的问题是：

1. 什么是为网络优化图像的好方法？
2. 如何知道你的形象是不是太大了？优化图像的典型大小是什么？
3. 我可以进一步了解哪些技巧/技巧/资源？谢谢一堆

Answer 1

看一看懒散的加载图像，它在开始时加载一个质量较低的版本，然后使用JavaScript来显示当用户到达网站的那个点时的全部质量。

以下是google深入研究的一些参考：https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

Answer 2

对于高质量的图像，您可以做几件事：

延迟加载：使用JavaScript，一旦用户滚动到网站的该部分，图像就会加载。好处是它没有加载不需要的资源，这意味着更快的加载时间和更高效的页面加载。

这里有更多的信息：https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

渐进加载(就像介质加载一样)：加载到一个非常低质量的映像中，然后随着时间的推移逐渐加载到该映像的更高版本中。这样做的好处是向用户展示了一些东西最终会在这里显示出来。

这里有更多的信息：https://jmperezperez.com/medium-image-progressive-loading-placeholder/

替代文件格式：考虑使用替代的文件格式，如WebP。虽然浏览器支持要小心，但您可以设置JPEG或PNG的回退。

这里有更多的信息：https://developers.google.com/speed/webp/

其他要注意的事情：的好/标准实践是确保压缩您的图像。如果它在网络上，那么72 DPI分辨率(打印时不像300 )，RGB颜色格式，并确保使用正确的文件格式，如用于图标或透明背景的PNG和更详细的图片JPEG。在可能的情况下，使用SVG对基于矢量的图形使用PNG和JPEG。

就大小大小而言，一个常见的错误是人们将4000×4000大小的图像放入一个600 x 600的图像帧中，因此确保您的图像对于该空间的大小不太大。

Answer 3

目前，谷歌建议照片应该在200 be左右，所以我知道这是真的不够:)我也参与摄影。我有一个网站准备，以便它是索引，甚至有80张图片每页和网站是非常快的。在https://developers.google.com/speed/pagespeed/insights/，它是100/100，由google索引；)我也根据屏幕的宽度使用几个大小相同的图像。

我使用的是IntersectionObserver，它只加载屏幕上可见的图片，使该页面工作得非常快。

下面是一个例子，说明一张照片如何寻找不同的屏幕宽度。

<picture>
  <source data-srcset="./images/lwow/576/IMG_0114.jpg" media="(max-width: 576px)"> 
  <source data-srcset="./images/lwow/768/IMG_0114.jpg" media="(max-width: 768px)"> 
  <source data-srcset="./images/lwow/992/IMG_0114.jpg" media="(max-width: 992px)"> 
  <source data-srcset="./images/lwow/1200/IMG_0114.jpg" media="(max-width: 1200px)"> 
  <img data-src="./images/lwow/1200/IMG_0114.jpg">
  <noscript><img src="./images/lwow/1200/IMG_0114.jpg"></noscript>
</picture>

下面是指向整个代码https://github.com/tomik23/photoBlog的链接

PS。利用https://tinyjpg.com/对从photoshop输出的一张非常重要的照片进行了优化，可惜photoshop并不适合于照片优化。为了满足我的需要，我准备了一本圣经，可以同时以不同的分辨率和格式生成几张照片，并在我的githab上被称为锐利图像。