How to plan image size on website?

[zambala]

Hello,

I have this problem regularly - how to reserve a space for image on website and what size image to use?

I mean - when website is created - there should be planned - Image for Article - this size; for category view - this size, etc....


...and then come images - some Vertically aligned, some horizontally , some large, some small, some too high, some too wide ...

- How to manage all this out?

In my previous website I put max-height: 300px - to resize it somehow proportionally , yet still - not all images came out of similar size, some too wide, etc...

Now I am creating a new website - I have set for image "to resize and crop" for certain dimensions - now they are nicely the same size - but still in some images somebody is with cut head - because the original image was 900 X 300 ....

How to deal with these problems?

[mvaz]

You should resize your images and not crop them. Cropping your images will result in you losing part of the original image. Resizing the uploaded image (presumably you are uploading through an uploader script) will retain the ratio and quality.

BTW, welcome to Webmasterworld.

[not2easy]

If an image is 2600px wide by 1800 px height and you set the max height to 300px, the width would be 208px, but if the image started out at 2600px wide by 900px height it would show at nearly 900px wide. If the images are not in your control for resizing, it is best to limit both width and height. Ideally only a width setting is used but if images shown on your site might have unknown size that is not uniform you may need to set both width and height.

If you use specific images sizes site wide and want to control images in css, you can create image containers:
div.imgcat {
max width: size you want;
max-height: size you want;
}

div.imgart {
max width: size you want;
max-height: size you want;
}

If the image is smaller than that size, it will not fill the container, but larger images will resize to whatever sizes you set.

mvaz is right, if these are your own images you add to your site, it is better to resize them to the size(s) you want before uploading. A 10Mb image is still 10Mb even if it is displayed at 150x150 px. Not user friendly and hard on your bandwidth consumption. If the images are loaded from elsewhere you get what you get, but you can control the size displayed in css.

[mw11]

@Zambala

#1: If you use a truckload of images on your web sites, you want to invest in a good image editor software. There are a few free ones, too.

#2: After hundreds of trials and errors I've learned to always resize (using #1) before I upload any of those images.

#3: I always copy and RESPECT the dimensions of the images I'm using.

#4: I do NOT force any of them to be smaller or larger than what they really are.

#5: Instead of using max-with and/or max-height, I simply use 'height' and 'width'. It works out far better this way, as to predictability and reliability.

#6: Make your images of the same size. It works out far better in the long run. For starters, if you do, then all you need is ONE object, as opposed to THOUSANDS of objects (in CSS)!