Jump to content

Image resizing on the fly (in a loop)


rockinaway

Recommended Posts

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.

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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;
}

Link to comment
Share on other sites

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.