Take the 2-minute tour ×

I'm sure this problem isn't one you guys aren't unfamiliar with.

For example, if I had a picture, which I displayed at the size 32 by 32 px, and then enlarged with JavaScript to 64 by 64 px, the picture quality goes terrible for about 1 to 2 seconds, and then gets better.

So is there a way to prevent the quality of the picture from going down when it is resized using JavaScript?

share|improve this question
are you calling a larger image with your script? or just messing with the width and height? –  AMember Oct 15 '12 at 9:12
@AMember just messing with the width and height. –  think123 Oct 15 '12 at 9:15
That means that your browser is responslibel for rendering the image at the ratio you have set, that process can take time depending on your machine and browser vendor. I suggest you to create a second image at the new width and height, preload it to your document and just swap between the 2. –  AMember Oct 15 '12 at 10:43
add comment

2 Answers

up vote 1 down vote accepted

You could swap the images for preloaded imaged, instead of resizing.

share|improve this answer
could you provide an example? –  think123 Oct 15 '12 at 9:14
just get images to load by either building a sprite, or loading them into hidden divs, then swap the image by either moving the sprite, or swapping the src attribute. –  Mild Fuzz Oct 15 '12 at 9:17
add comment

well it depends on the size of the image first of all, if the image size is greater than what you have set in your code, it is obvious that it will show you with little more clarity if you zoom with javascript.

if the image itself is less size and you want to zoom, the image will be distorted and pixelated.

also when ever you are trying to zoom or make it bigger try with equal proposition, or you can use css zoom attribute to zoom

share|improve this answer
add comment

Your Answer


