我正在从头开始构建自己的投资组合。我想包含很多高质量的图像，但是我不知道如何在不降低网站速度或牺牲太多图像分辨率的情况下做到这一点。
我在Figma中创建了线框，但是当我导出图像时，质量明显下降了。如果我将它们导出为2倍或3倍，则分辨率会提高，但需要权衡速度。我对前端很陌生，尝试对自己的网站进行编码作为学习编码的一种方式，请提供帮助。我的问题是：
答案 0 :(得分：0)
看看延迟加载图像，它一开始会以较低质量的版本进行加载，然后在用户到达您网站的该点时使用JavaScript来显示完整质量。
以下是Google的一些参考资料，涉及的范围更广： https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/
答案 1 :(得分：0)
您可以对高质量的图像进行以下操作：
延迟加载：使用JavaScript，当用户滚动到您网站的该部分视图中时，图像就会加载。好处是它不会加载不需要的资源，这意味着更快的加载时间和更有效的页面加载。
此处有更多相关信息：https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/
渐进式加载（例如Medium的加载方式）： 您加载的是质量很差的图像，然后逐渐加载该图像的更高版本。这具有向用户显示最终将在此处显示内容的好处。
有关此的更多信息： https://jmperezperez.com/medium-image-progressive-loading-placeholder/
替代文件格式： 考虑使用其他文件格式，例如WebP。虽然请谨慎使用浏览器支持，但是您可以设置JPEG或PNG的备用版本
有关此的更多信息： https://developers.google.com/speed/webp/
其他注意事项： 良好/标准做法是确保压缩图像。如果在网络上，则为72 DPI分辨率（不像300那样用于打印），RGB颜色格式，并确保使用正确的文件格式，例如PNG用于图标或透明背景，而JPEG用于更详细的图片。如有可能，请在基于PNG和JPEG的矢量图形上使用SVG。
就尺寸调整而言，一个常见的错误是人们将4000 x 4000尺寸的图像放入600 x 600的图像框架中，因此请确保您的图像在该空间内的尺寸不会过大。
答案 2 :(得分：0)
目前，Google建议照片的长度应为200kb，所以我知道这还不够:)我也参与摄影。我已经准备好一个网站，以便将其编入索引，每页甚至有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上称为清晰图像