客户端图像压缩
Client-side image compression
我制作了一个图片库，但浏览器在呈现图片时出现延迟。一次渲染六张图像，但由于这些图像是直接从人们的手机或相机中拍摄的全尺寸 jpeg，它们通常很大并且会导致很多延迟。
我想将图像以完整尺寸保存到服务器以减少任何质量损失，但是这在渲染小预览（仅约 330 像素宽）时显然不理想。
因此我想做的（除非有更好的方法来解决这个问题；也许服务器端有 PHP？）将图像大小减少到几百 KB，而不是几个在它们实际加载到页面之前，客户端上有 1000 个。
我希望这是有道理的，我希望我不是真的很愚蠢，没有遗漏一些非常明显的东西，这就是感觉。随时提供帮助。
我建议你使用 Echo.js ，以避免所有图像加载问题
Lazy-loading works by only loading the assets needed when the elements
‘would’ be in view, which it’ll get from the server for you upon
request, which is automated by simply changing the image src
attribute. This is also an asynchronous process which also benefits
us.
这是一个使用 Echo.js 的 DEMO，它仅在显示在视口上时才加载图像！
echo.init( {
offset: 10,
throttle: 550
} );
我制作了一个图片库，但浏览器在呈现图片时出现延迟。一次渲染六张图像，但由于这些图像是直接从人们的手机或相机中拍摄的全尺寸 jpeg，它们通常很大并且会导致很多延迟。 我想将图像以完整尺寸保存到服务器以减少任何质量损失，但是这在渲染小预览（仅约 330 像素宽）时显然不理想。
因此我想做的（除非有更好的方法来解决这个问题；也许服务器端有 PHP？）将图像大小减少到几百 KB，而不是几个在它们实际加载到页面之前，客户端上有 1000 个。
我希望这是有道理的，我希望我不是真的很愚蠢，没有遗漏一些非常明显的东西，这就是感觉。随时提供帮助。
我建议你使用 Echo.js ，以避免所有图像加载问题
Lazy-loading works by only loading the assets needed when the elements ‘would’ be in view, which it’ll get from the server for you upon request, which is automated by simply changing the image src attribute. This is also an asynchronous process which also benefits us.
这是一个使用 Echo.js 的 DEMO，它仅在显示在视口上时才加载图像！
echo.init( {
offset: 10,
throttle: 550
} );