How to resize images

[x360]

Really stupid question, I know

How do you resize images in HTML?

Say I have <img src=url.png</img> and that image is 190x190 pixels but I want it 150x150 pixels. How do I do that. Thanks

[chicgeek]

<img src="url.png" width="150px">

or

<img src="url.png" style="width: 150px;">

I'd tend to use the latter. Though this will not resample your image and may leave your skewed image looking a little funny.

[jpmitchell]

Your best bet is to resize it appropriately with a graphics program. If you do not have one, you can download free versions that will allow you to do this. Or you could download a demo/trial of one that isn't free and use it for just this purpose.

Free Solution: Gimp
Non-Free (but may have trial): Photoshop

[websiteideas]

If you don't use a graphics program to resize it, but instead use HTML then you're going to be wasting a lot of bandwidth and load time will be slower.

[lordspace]

You used the code below OR give a search at phpclasses.org for OOP style or much more feature rich solution(s).

I found it in a book for PHP 1-2 years ago.

if (empty($max_width))
  $max_width = 100;
if (empty($max_height))
  $max_height = 80;

$image = "image.jpeg" // This is works only with JPEGs.
$size = GetImageSize($image);
$width = $size[0];
$height = $size[1];

$x_ratio = $max_width / $width;
$y_ratio = $max_height / $height;

if ( ($width <= $max_width) && ($height <= $max_height) ) {
  $tn_width = $width;
  $tn_height = $height;
}
else if (($x_ratio * $height) < $max_height) {
  $tn_height = ceil($x_ratio * $height);
  $tn_width = $max_width;
}
else {
  $tn_width = ceil($y_ratio * $width);
  $tn_height = $max_height;
}

$src = ImageCreateFromJpeg($image);
//$dst = ImageCreate($tn_width,$tn_height);
$dst = imagecreatetruecolor($tn_width,$tn_height);

//ImageCopyResized($dst, $src, 0, 0, 0, 0,
//    $tn_width,$tn_height,$width,$height);
imagecopyresampled($dst, $src, 0, 0, 0, 0,
    $tn_width,$tn_height,$width,$height);
header('Content-type: image/jpeg');
ImageJpeg($dst, null, 90);
ImageDestroy($src);
ImageDestroy($dst);

[x360]

Thanks for the help. The first is what I needed and only that will work. Hard to explain why, but thanks.

[c-low]

<img src=url.png</img> is not the correct way to format an image tag, the correct way is:

<img src="image.png" /> (no closing tag)

if you want it to validate as xhtml strict you also need to include an alt attribute: <img src="image.png" alt="Description of image" />

finally, you should never resize an image with html because it'll look terrible. resize with an image editor (jpmitchell has good suggestions above) and upload the new version.

[chicgeek]

Everyone is making things complicated. Just... straight and simple html above.

[lordspace]

... if you display 100 images per page and the user clicks only on 5 images the server load will be huge.

[c-low]

Originally Posted by chicgeek

Everyone is making things complicated. Just... straight and simple html above.

yes, straight and simple... of course, the straightest and simplest is to not resize an image with html or css. unless you want funny looking slow loading images

[chicgeek]

Yes, but he didn't ask for an opinion on saving bandwidth or how to do it using a program. He asked how to do it in HTML. Not even PHP.

And as far as we know, it's one 300 x 300 image going down to 150 x 150. Not going to crash any servers any time soon.

[jpmitchell]

@chicgeek - you are correct they didn't ask for all the options for saving it. However, there is no sense in taking a shortcut (even if one is available). One should be in the habit of doing things the proper way, as it will save them in the long run.

Just my

[KeithCash]

Originally Posted by jpmitchell

Your best bet is to resize it appropriately with a graphics program. If you do not have one, you can download free versions that will allow you to do this. Or you could download a demo/trial of one that isn't free and use it for just this purpose.

Free Solution: Gimp
Non-Free (but may have trial): Photoshop

Another free solution would be: Paint