我想知道在网页上加载高分辨率图像的最佳实践是什么。目前，我在本地加载了一堆图像，网站运行速度很慢。下面是一个例子:
https://shmoss.github.io/Gibbs-Lab/research.html
我是这样加载图像的:
<!-- Card image -->
<div class="view overlay">
<img class="card-img-top" src="img/Forest-Conservation-and-Biodiversity.png" alt="Card image cap">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
我读到图像应该在本地加载，而不是在Box, Google等地方托管。接下来我可以尝试什么?
这是一个"非常固执己见的问题"，因为很多人会根据他们上次看"标准"的时间有不同的答案，但这里有一些相当新的指导。这是指导，不是规则，所以你可以随意做出一些判断。
什么是网站的最佳图像大小?
图片的大小取决于你想在网站上放置它们的位置。网站上图片的优化文件大小不超过200 KB,全屏背景图像,2500像素宽,1500像素之间和其他大多数max-width 800像素的图像。这些周边将确保他们之间保持图像加载适当的电脑和移动屏幕上。
https://northwestmediacollective.com/blog/best-image-size-for-websites/
还有其他的指导方针，这只是我发现的第一个合理的。
要显示较大的图像，您应该将小的"缩略图"图像可点击，然后打开另一个选项卡来查看图像，导航到图像，或者显示一个模态/div/其他东西来显示页面顶部的图像。这允许人们选择要查看和下载的图像。这就为他们正在看的一张图片释放了带宽，而不是"一次浏览所有内容"。
在您的情况下，您不显示一个图库，只是一些文本的标题图像，所以您的图像不需要太大。您显示的分辨率远低于图像，因此大部分细节都完全丢失了。当你以243 x 162像素显示3.5 mb, 3600 x 2400像素的图像时，真的没有意义。调整页面大小，它增长到351 x 234像素，这仍然是浪费分辨率，这意味着你可以大大降低你的分辨率，仍然得到相同的外观在客户端的机器上。
无论如何，JPG文件会丢失数据，所以如果你想以较低的分辨率保留细节，你可以尝试使用PNG。这也有点"固执己见"。主题，所以我就把链接留在下面，让你决定。JPEG和PNG文件有什么区别?
尽管它们有相似之处并被广泛使用，但JPEG和PNG文件之间有许多不同之处。由于它们的压缩过程不同，jpeg比png包含更少的数据，因此通常尺寸更小。与jpeg不同，png支持透明背景，这使其成为图形设计的首选。
https://www.adobe.com/creativecloud/file-types/image/comparison/jpeg-vs-png.html
为分辨率和文件大小更改添加一些上下文，如果将分辨率降低2，则将文件大小减少到原始大小的大约1/4。一个3.5 mb的文件变成了~875 kb。再做一次，它是~220 kb。3600 x 2400像素的图像变成了900 x 600像素，这对于显示的内容来说仍然是过大的。在今天的网速下，220kb的加载速度非常快，即使在"慢"的移动设备上也是如此。细胞网络。
对于更多的上下文，1080p分辨率通常是1920 x 1080像素(取决于宽度)，所以即使在900 x 600像素，你的图像是屏幕面积的四分之一。4k屏幕是3840 x 2160像素(取决于宽度)，所以它仍然是总屏幕尺寸的1/15，这仍然比大多数人用来显示它的屏幕要大。(我应该知道，我用的是4k "电视作为监视器当前图像的像素比4k屏幕所能显示的像素多，即使它是不同的宽高比。所有这些额外的数据都被浪费了。
而且，作为一个做过很多web开发的软件开发人员，你的图像与你的网站放在同一个服务器上是非常标准的。只有当你有大量的图像，而你没有的时候，你才需要另一台服务器。我说的是成千上万，甚至更多的图像，你需要一种方法来管理它们的组织或卸载/负载平衡流量。使用第二台服务器，Google Drive, OneDrive, Dropbox或其他任何东西只会增加你不需要的复杂性。