How to optimize size for Thumbnail & Full size images

[totaram]

Hi, Is there a way to optimize the size of the thumbnail & full size images displayed. Our problem is that we have the thumbnail & full size images of all different sizes. Is there a way to determine the size of the image before it gets displayed, compare that size to a pre-specified size, if the existing image size is smaller than the pre-specified (pre-determined) size, then display it as it is and if the image size is bigger than the pre-determined size, then display the image in the pre-determined size, that way there will be a uniformity in all pages. There are too many images, so it not possible to go and resize each images, plus, each image is unique and sometimes resizing it makes the image look bad. If we can achive this, then maybe, we can run a on-mouse over script to show the complete image in its original size? Any thoughts, suggestions, ideas would be greatly appericiated. Thanks much

[Biffy]

Re: How to optimize size for Thumbnail & Full size images

The way I do this is to use Photoshop. Setup a script that automatically resizes the images to either a specific width or a height. Run the script. Then upload the new images.

Be sure your CSS width values match up.

All done.

[Barrett]

Re: How to optimize size for Thumbnail & Full size images

Assign a class name to your image containers in your templates and then control you desired size with css.
Should work as long as you are not trying to blow up the smaller images you have too much.
This triage should take you about 10 minutes or less....
Hopefully they are all in same proportion and you could set a hover for the img tag inside your class too without any scripting needed.

[samgold]

Re: How to optimize size for Thumbnail & Full size images

Barrett
How does one do this with css. I am happy to read any books you recommend etc. Let me know. Thanks Sam

[Barrett]

Re: How to optimize size for Thumbnail & Full size images

It's not a big deal. Biffy there usually comes through with way more horsepower on that stuff than me....

You can try some of these examples.

img {
    width: 150px;
    height: 150px;
}

.myclassname img {
    width: 150px;
    height: 150px;
}

img {
    width: 40em;
    height: 40em;
}

You only use one of the examples.
The one with the class name is likely the best to use because it will only affect the images that are descendant of any Div etc with your class name assigned and not screw up all IMG instances throughout the site.

<img class="myclassname" src=....

or <div class"myclassname"> <img src=....> </div>

The em ones you might experiment with as it can lead to some interesting features for elastic pages.
Hope that helps.