Upload one large file once, and change its scale using css, or use different files of the same image in different sizes?

Question

I have a little book flipping site. I have it so I upload an image (the page), the size is about 1500x1948, but it is scaled down using css to fit on the ipad better (it becomes about 946x728). Then I have it so if you double click the image, it scales into its original size (1500x1948) and you can scroll around the page.

Is it better to use that one image and scale it using css or would it be better performance-wise to just make different image files with the different sizes that are needed?

Also, when you go into landscape mode, it changes its size to 475x366.

...I also heard its best to use large images as a background instead of an actual image, Should I do this? Would it really make a difference? Because I have about 30-50 images..

Thanks!

Answer 1

It would be better performance wise to initially on upload process the image to create all the various scaling formats. This way you are not passing a huge image if you merely want a thumbnail.

Answer 2

I guess it depends on what the most common use-case is.

If your users are likely to always double-tap the image then it should be faster to just serve them the big image and scale with CSS. That way you will transfer less data which should be faster.

On the other hand, big images take up a huge amounts of memory on the iPad, plus more bandwidth thus longer loadtimes. So if people will seldom double-tap the image then I would go with the two image strategy and only load the big image on demand.

As to whether it's better to have them as background or inline: I doubt it makes a difference but can't tell. The in-memory uncompressed image should be the same.