Thumbnail image preview resize using img tag auto resize or canvas redraw?

2
votes

In my html5-based mobile app I have an image uploader which has the very basic functionality like any other - an image thumbnail once the picture to be uploaded is selected. For resizing down to the thumbnail size for preview purpose, I've played around with 2 ways:

  1. Simply set width and height on img tag and let the browser do the resize
  2. Use canvas to explicitly resize the image down to my desired size.

And I need some help choosing which way to go. So from some of my different tests I've boiled them down to these observed pros and cons.

Speed

It takes more time to do the work in javascript when using canvas to resize than just setting the src for img tag. However, my observation is that once the image is resized with canvas the display is much faster than using the img tag.

For instance, it would take around 1 to 2 seconds for the image to be seen after I add the Image object to be shown. Whereas it takes almost no time for the image to be seen after the drawImage method finishes for canvas-based resize. This led me to think that the actual resize for img tag only happens when the image is added into view?

Eitherway, both img and canvas rounded up at about the same speed with distribution of time used in different areas.

Memory

I need somebody to tell me if this is true?

  1. In Img tag, the full-size info of the image is still being stored although it's resized on display.
  2. And of course, in canvas, the image has already been redrawn to a smaller size image, so only the smaller image info is taking up memory.

So using the Img tag takes more memory unnecessarily? (just for thumbnail display purpose)

Thumbnail Quality

This I actually don't really care because my thumbnail is rather small. But I bet they are going to be similar anyway with Img tag having more variation across browsers?

1
javascripthtmlimagemobilehtml5-canvas

1 Answers

2
votes
  1. True.
  2. True. Well almost. Canvas method takes memory too, but its temporary. Once you are done with canvas conversion, you basically freed that memory.

Yes, the img method takes more memory unnecessarily.

IMO, Your thumbnails will not be good quality with the img method.

I have previously done resizing using the canvas method. Let me dig it.

Update Previously on Stack Overflow I had answered my own question about Creating square thumbnails of images. In my answer I posted that I ended up using the canvas method myself.

Also, in my experience canvas method was quite fast as well. It takes way less than 1 to 2 seconds in canvas method.