Question

When images are placed in web documents using the <img /> elements/tag, should the images to sliced and edited to fit the dimensions of the document or they should be placed as they are but the width and height attributes should be modified to fit the need.

For example if I have an image, say, “bldg_pic.png” which is 2000px wide and 1500px in height, And I want to place and fit it in a 400px X 300px <div>, should I leave the image unchanged and do as

<img src="bldg_pic.jpg" width="400" height="300" alt="Building Picture" />

So that the acutal image that loads is 2000px X 1500px but shows as 400px X 300px. Or do I just edit the image and make it smaller to 400px X 300px and use the same above code.

I assume that when placing images, the browsers acutally just inserts a “placeholder” for the image and if the height and width attributes are setup in front, the browsers know how much “space/memory” should be reserved for it.

I seek which method should be used and are their any performance/best pratices issues related?

Answer 1

Always resize your images. Resizing your images on the fly is also possible.

https://github.com/lencioni/SLIR

SLIR is an awesome library. You take the slir folder, and put it in your website root. When you access images, you can do this:

    <img src="/slir/w400/path/to/image.png" width="400" />

Lets assume that /path/to/image.png is 4000px wide, SLIR will not only compress the image, it will resize it, and store a cached version of this request in a folder on your server – when requested again, it will serve the cached version.

If you need any help with file permissions, just ask.

good luck!