Resizing One Image vs. Multiple Images

Get Started
1

My website contains Articles, and there are at least 3 places where I need different sizes for the same Image.

On the Article page, the Image would be largest.

On the Article Index page, the image is maybe 70-80% the original, and varies depending on what fits the best.

And on my “Manage Subscriptions” page, I need a pretty tiny Image.

So, is it better to have One Image and Re-size it using HTML/CSS, or is it better to create 3 Images of Different Sizes?

The main Image in an Article would typically be only 150px wide by whatever height.

Thoughts?

Thanks,

Debbie

2

Depends on your definition of “better”. Resizing the pic by using the “height” and “width” attrributes works and is quick and easy, but you will be streaming unnecessary data, which puts unnecessary strain on your resources and slows down loadtimes.
If you don’t upload that many pages, I would resample the original image externally to the exact dimensions you want, and then upload each version. You can’t beat “precision engineering” imho, if you can afford the time to do it.
The best software for this, by far, is Iview aka Irfanview. Once I got the hang of it, it didn’t take me more than about 1 minute to take a jpg, select the section I want, make a new pic out of it, resample it to exact size to the pixel accurate, and save it in exactly that size without a byte more than necessary. To make a medium and small version of that one, takes one more minute all together.