I need to develop image zoom-in functionality with JavaScript and HTML5. Which strategy will be better –
Take a single image and apply the zoom level – Can we download image for higher zoom level – 4x and on-load of a page show images in 1x. By this approach does image will get distorted specially if it has lots of text?
Different images for different zoom level – this will surely increase the page load time, would like to avoid this.
I would suggest go with the first option.
If the image is of good resolution, The text wont distort. Use a PNG or if possible go for an SVG.
In your second option, the zoom effect wont be smooth as you will only have different images at different level.
Even if you dont need it to be that smooth but to avoid time to load image on zoom effect , you should load all the images before the zoom can be done. But in that case it will be lighter to have one heavy image loaded once and being zoomed smoothly than having multiple images off different size.
I think the best would be to create different images for different zoom levels (this way you make sure that they will always look good) and load different zoom levels only if requested (with ajax) - this way you avoid the increase in page load time.
Definitely the second option will add overhead to the network traffic resulting in bad performance. So using one image and then applying zoom levels on it will be better, but with this you have make choice in making selections on the image type like png, gif etc (what ever suits you better).
In practice pngs are of good quality and suitable for this kind of operations.
zoom/transformCSS property.