CODEWITHSUNDEEP
htmlcssimage
Jawad
Jawad

Reputation: 6672

Placing images in web sites

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?

Upvotes: 0

Views: 162

Answers (5)

illbzo1
illbzo1

Reputation: 470

Images should be resized to the exact size you're using and optimized for the web. I recommend using smaller formats (such as .jpg or .gif) as opposed to .png when it's possible to do so without losing quality.

Upvotes: 1

verenion
verenion

Reputation: 383

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!

Upvotes: 5

Vijay Joseph
Vijay Joseph

Reputation: 492

You must re-size the image to the size you actually need. Please don't use the 2000px 1500px image.

Here is the reason:

  1. When you scale in html (width & height), browser still downloading the full image and take more time to load
  2. If you re-size bigger image to something very small size, it won't look good in browser

If you need two different dimensions, then you should create two images with different dimensions.

You can also use tools to optimize your images for fast loading in browsers without loosing the image quality.

Here are couple of tools that will help you:

Smash it: http://www.smushit.com/ysmush.it/

RIOT: http://luci.criosweb.ro/riot/

Hope my answer will help you!

Upvotes: 2

Artyom
Artyom

Reputation: 1599

From the best practices point of view, you should resize your image to the size you want to display it in. Your visitors might not be happy to load a large image, thus wasting their bandwidth (think smartphones) and increasing the load time, without even knowing that they have access to a larger image. Optionally, you may want to link your resized image to the full-sized version.

From my experience, some browsers make the image look broken up when they resize it themselves (e.g. IE7 in some cases), so again better make the image the size you want to display it in.

Upvotes: 2

Alan Shortis
Alan Shortis

Reputation: 1109

Do both (though specifying width/height isn't really essential if they're the correct size).

While you can use the width and height attributes to make a large image smaller, it'll hit the performace of your site and bandwidth used for no good reason.

Resize your images and (in photoshop), save for web/devices.

Also, if you're placing images together to appear as one, make sure you use display:block in your css to avoid spacing at the bottom of your images.

Upvotes: 1

Related Questions