[eluser]Leon Stafford[/eluser]
[quote author="slowgary" date="1239647816"]In my opinion it's not a good idea to add the page's background color to an image for padding purposes. You're ruining your images this way. Just place them inside of a <div> and use CSS.
Code:
//html
<div class='img_240x180'>
<img src='resized_img.jpg'>
</div>
//css
.img_240x180 {
width: 240px;
height: 180px;
overflow: hidden;
}
If you don't need to support IE6, you can use max-width/max-height to make it even simpler:
Code:
//html
<img src='resized_img'/>
/css
img {
max-width: 240px;
max-height: 180px;
}
Note, the second method will cause resizing if the image exceeds either dimension, whereas the first method will crop. Either way, since you'll have already resized your image you won't have to worry about either. It just REALLY doesn't make sense to add whitespace for so many reasons.
Here's 3 reasons that immediately come to mind:
1) You'll be increasing the image filesize for no good reason.
2) If you think of the internet as an abundance of text and images (minus design), your website's images are basically useless because of this added whitespace. Imagine search engines that can provide useful images to the searcher based on context. What is this white strip at the bottom of your images? Snow? Is it winter in that picture? It's like adding a bunch of LOREM IPSUM text to the bottom of your page because you want the page to be longer. You're adding content for the sake of presentation.
3) JPEG compression does bad things to solid colors. That means that even though the background of your page is a solid white color, this whitespace you add to your JPEG images will be a noisy speckled dirty white that ANYONE with an eye for design will be able to notice.
Additionally, I think you'll find the CSS solution to be much simpler, and less taxing on your server.[/quote]
Hi Slowgary,
Thanks for the advice. I totally agree on those reasons. Alas, once again I have to bow down the time constraints of this project....
I got my desired effect with GD but even as someone who tries to stay as far away from design as possible, I hate the white space
As a compromise, time permitting, I will retain the original images and allow them to be cropped by the admin as they check them (user uploaded photos).
I would prefer a totally separated design via CSS, but our design/coders don't have any more time to work on this and so the story goes...
I just got home but can paste this code for anyone interested - dirty a method as it is, it solved my problem...