Image resizing on the fly (in a loop)

[rockinaway]

I am wanting to resize images on the fly in a loop (i.e. without saving them).

 

However, any methods I have looked all need saving and won't just output the image in a loop.

 

Is there any way to actually accomplish this?

[redsmurph]

Search for 'php gd' and you'll get all the info you need. GD supports rendering of images without saving them as files.

[PFMaBiSmAd]

If you are going to resize an image and output it to the browser, you can only do one at a time since you must output a content-type header followed by the data for an (one) image.

 

Why don't you want to save the resized images? If you save them, you will save on the large memory and processing resources needed.

[litebearer]

from where are you original images coming?

could you show us what you have tried thus far?

[Mahngiel]

if you just want to loop through some results with a lot of images for display (like in a gallery), you should be using CSS to do this.

#this_div > img { width: 150px; height: auto; }

[litebearer]

Mahn, potential bandwidth issue.

 

OP, look at this link... http://www.wprecipes.com/how-to-resize-images-on-the-fly

 

[Mahngiel]

quite the script there lite - could very well be overkill, depending on OP's needs.  Lots of variability comes into play, depending on what, where, how, and why the images are displaying. 

[QuickOldCar]

If you are going to resize an image and output it to the browser, you can only do one at a time since you must output a content-type header followed by the data for an (one) image.

 

Why don't you want to save the resized images? If you save them, you will save on the large memory and processing resources needed.

 

You can use GD for multiple images in a loop on the fly if you link to a script using GD and the image source

This way there will be no header issues.

 

something like

foreach($images_array as $image){
echo "<a href='$image'><img src='./GD-image-resize.php?image=$image' /> ":
}

 

I would save the resized image and cache it.

 

Take a look at phpthumb.

http://phpthumb.sourceforge.net/

[rockinaway]

Thanks for all the input. Well at the moment I haven't tried any code as I was reading up on ways to do it and hit a wall. I have looked at some scripts that save the files etc but I wanted to avoid this as I will be using the same image in a huge number of locations and each time it will change slightly in terms of it's size and layout. Basically, they are user uploaded images and so it's not a constant image, and they would be cropped for resize etc.

 

Would you suggest that saving them would be the better method?

[Mahngiel]

If you're only going to be displaying one to a few images at a time, then just resize with CSS.  You could even set up a modal box using the same image source - which reduces HTTP requests.

 

Using CSS means you will not have to carry multiple copies of the same file.

 

Depending on your layout, you need to maintain aspect ratio. 

 

#main .image_div > img {
width: 500px;
height: auto;
}

#sidebar .images > img {
height: 100px;
width: auto;
}

[redsmurph]

The immediate benefit of not saving to a file is that you don't have to create unique file names (remember that a web site is always a multi-user application).

 

A simple cache could though be implemented by saving images with the size included in the name somehow, like image1_300_300.png. That way you could easily test for it and grab it later. If it doesn't exist you generate the image in the right size and save it as mentioned.

 

The problems I've found with controlling the size in CSS are:

- The browser still has to download the full size file. Not a good choice if you access images via a mobile phone, especially if what you need is a tiny thumbnail picture.

- Some browsers aren't good at resampling the image, causing artefacts. Admittedly it was way worse a few years ago.

 

Cheers

[rockinaway]

Okay thanks for all the input. I've decided saving the files are the best way and I have a cache for each user. So basically, if the called image doesn't exist already, it's created, others just called from the cache.