CODEWITHSUNDEEP
javascriptimageimage-resizingimage-compression
Jake Stanger
Jake Stanger

Reputation: 449

Client-side image compression

I've made an image gallery, but the browser lags as it renders images. Six images are rendered at one time, but because these images are full-size jpegs taken straight from people's phones or cameras they are often large and it causes a lot of lag. I'd like to save the images to the server in their full size to reduce any loss of quality, however this is obviously not ideal when rendering small previews (only about 330px wide).

What I therefore would like to do (unless there's a much better way of approaching this; perhaps something server-side with PHP?) is reduce the image sizes to a few hundred KB rather than a few thousand on the client just before they are actually loaded onto the page.

I hope that makes sense, and I hope I'm not being really stupid and missing something really obvious, which is what it feels like. Help is always appriciated.

Upvotes: 0

Views: 1155

Answers (1)

ZEE
ZEE

Reputation: 5849

I advice you tu use Echo.js , to avoid all image loading issues

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.

Here is a DEMO using Echo.js which load the image only when it show up on the view port !

echo.init( {
            offset: 10,
            throttle: 550
        } );

Upvotes: 3

Related Questions