CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
Greg Peckory
Greg Peckory

Reputation: 8048

Speed up web page by compressing large images

I have a blog slideshow on my web page which accesses images from a given url.

The problem is, people add images with massive resolution (3000px*6000px), which noticeably slows down the animation of the slideshow.

These high resolution images are necessary, but not for this particular purpose, since the images live inside a div of size (300*600)

Is there any way CSS (or some other way) can convert the image to a smaller specified resolution (say 300px * 600px), before scaling down.

This way the animation won't involve high res image frames and so it won't be as laggy.

The only alternative I can think of, is that everytime an image is uploaded on the database, the backend creates a secondary compressed image for this purpose.

However, this seems like a lot of effort.

Upvotes: 2

Views: 70

Answers (2)

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

Since you said in the comments that bandwidth and download time are not the issue and it's acceptable to download the full res image, scale it down, then add it to the page, please consider the following solution which does exactly that.

Download the original image via AJAX, then use ctx.drawImage to draw the image to an HTML canvas with much smaller size. For instance, you can take a 3000px*6000px image and draw it scaled onto a 300px*600px canvas. Then free the original image using JavaScript so that it no longer takes up memory in the browser.

After that, you can use the canvas to do your animations and there should not be nearly as much lag as using the large, original image (since the compositor will need to move much fewer pixels).

Edit: According to your later comment, your users are uploading to an external image hosting service, so this solution will prevent them from having to upload a thumbnail version in addition to their full-res version.

If you choose Imgur.com like you are considering in the comments: They let you modify the image size a bit in the URL. So for instance if you have an image at https://i.imgur.com/9ZC02Os.jpg, you can use https://i.imgur.com/9ZC02Oss.jpg for the small version, https://i.imgur.com/9ZC02Osm.jpg for the medium version, and https://i.imgur.com/9ZC02Osl.jpg for the large scaled version (note the s, m, and l at the end of the URLs). That way you can probably avoid drawing to a canvas completely.

Upvotes: 1

Bonzo
Bonzo

Reputation: 5299

This was a site I found a few years agowhich may be of interest: http://sneak.co.nz/projects/img-resizing/

You could store a small version on your site for use in the slideshow. A good way to do this may be to check if a small image is available and if not create it the first time it is called and save it somewhere.

This code will resize an image on the fly but I think you would still have some lag while the image is resized.

$photo="sunflower.jpg"; 

$cmd = "convert $photo -thumbnail 200x200 ". 
" -quality 100 JPG:-"; 

header("Content-type: image/jpeg"); 
passthru($cmd, $retval);

Upvotes: 1

Related Questions