在一个页面上加载多个高分辨率图像的最有效方法是什么？

Question

我正在建立一个为不同摄影师设置摄影部分的网站。我想要与副文章相同的风格，其中所有图像都在一个屏幕上 - 没有滑块或jQuery插件，只是一个接一个。加载它们甚至压缩它们以保持质量但减小尺寸的最佳方法是什么？

Answer 1

在编写标记时最有效的方法是简单的img标记。

<img src="your image">

对于响应更快的布局，您可能需要使用CSS和背景图像。

就压缩而言，JPG是最佳选择。

就“最有效处理带宽的方式”而言，您希望将图像放在CDN上。

就“从可用性角度处理它的最有效方式”而言，您可能会考虑一种“延迟加载”，即在滚动到视口之前图像实际上不会被提取。

Answer 2

也许不是将所有大图像提取到一个页面，而是可以显示每个图像的小图像，并且只有当用户点击它时，它才会放大到大版本。

Answer 3

我会为索引页面创建高分辨率的缩略图，然后在主照片页面上加载原始版本。这是减小文件大小但保持质量的最佳方法。