I'm working on a website that sells different artwork, what's the best way to handle different image sizes?

Question

I'm working on a website that will allow users to upload and sell their artwork in different sizes. I was wondering what the best way would be to handle the different file sizes automatically. A few points I was curious on:

• How to define different size categories (small, medium, large) in such a way that I'll be able to dynamically re-size images with proportional dimensions.

• Should I store actual jpegs of the different sizes for download? Or would it be easier to generate these different sizes for download on the fly

• My thumbnails will be somewhat larger than your average thumbnails, should I store a second 'thumbnail image' with the sites watermark overlaying it? Or once again, generate this on the fly?

All opinions, advice are greatly appreciated!

Answer 1

you can check php thumbnails for this. Here's a code snippet that maybe useful.

<?php
# Constants
define(IMAGE_BASE, '/var/www/html/mbailey/images');
define(MAX_WIDTH, 150);
define(MAX_HEIGHT, 150);

# Get image location
$image_file = str_replace('..', '', $_SERVER['QUERY_STRING']);
$image_path = IMAGE_BASE . "/$image_file";

# Load image
$img = null;
$ext = strtolower(end(explode('.', $image_path)));
if ($ext == 'jpg' || $ext == 'jpeg') {
    $img = @imagecreatefromjpeg($image_path);
} else if ($ext == 'png') {
    $img = @imagecreatefrompng($image_path);
# Only if your version of GD includes GIF support
} else if ($ext == 'gif') {
    $img = @imagecreatefrompng($image_path);
}

# If an image was successfully loaded, test the image for size
if ($img) {

    # Get image size and scale ratio
    $width = imagesx($img);
    $height = imagesy($img);
    $scale = min(MAX_WIDTH/$width, MAX_HEIGHT/$height);

    # If the image is larger than the max shrink it
    if ($scale &lt; 1) {
        $new_width = floor($scale*$width);
        $new_height = floor($scale*$height);

        # Create a new temporary image
        $tmp_img = imagecreatetruecolor($new_width, $new_height);

        # Copy and resize old image into new image
        imagecopyresized($tmp_img, $img, 0, 0, 0, 0,
                         $new_width, $new_height, $width, $height);
        imagedestroy($img);
        $img = $tmp_img;
    }
}

# Create error image if necessary
if (!$img) {
    $img = imagecreate(MAX_WIDTH, MAX_HEIGHT);
    imagecolorallocate($img,0,0,0);
    $c = imagecolorallocate($img,70,70,70);
    imageline($img,0,0,MAX_WIDTH,MAX_HEIGHT,$c2);
    imageline($img,MAX_WIDTH,0,0,MAX_HEIGHT,$c2);
}

# Display the image
header("Content-type: image/jpeg");
imagejpeg($img);
?>

Answer 2

I do something like this with aarongriffin.co.uk.

There, some images are resized on the fly the first time they are requested, and then they are stored; whilst others are generated at upload time. Images that tend to be requested in groups (i.e. thumbnails) are generated at upload time, and images that tend to be displayed one at a time are generated on the fly. This has worked well for me, but that's a site without too much traffic.

I'm working in Python and Django, so I use sorl-thumbnail for this. In PHP you've got access to the various imagecreatefrom* functions that do (sort of) the same thing.

I generate watermarked versions of photos (if a particular album should be watermarked), and store those instead of unwatermarked copies.