Improving image quality by preventing correctly sized images being resized

Tweet

7 January 2011 | Roman Schmid | Images | Supports v2.4, v2.3

13 12

Sometimes you'll have to create websites for clients that are very demanding when it comes to image quality, say graphic designers or photographers. SilverStripe can be a showstopper here, since images are always being re-saved when you're using something like $SetHeight in your template. This can reduce image quality quite a lot, especially when using JPEG images.

A first thing to do is to crank up the GD default quality, by putting this in your _config.php file:

GD::set_default_quality(95);

But sometimes a client might prefer to prepare his images by himself. Then you really don't want SilverStripe to mess with these images. A simple solution would be to just use $Image in your template. But what if somebody uploads a huge image by mistake?

In an ideal world, SilverStripe would leave images that already match the target size untouched and only resize the ones that actually have to be resized. Luckily, this can be achieved by subclassing the Image class. Here's the class I use in all my projects:

<?php
/**
 * Prevents creation of resized images if the uploaded file already
 * fits the requested dimensions
 */
class BetterImage extends Image
{	
	public function SetWidth($width) {
		if($width == $this->getWidth()){
			return $this;
		}
			
		return parent::SetWidth($width);
	}
	
	public function SetHeight($height) {
		if($height == $this->getHeight()){
			return $this;
		}
			
		return parent::SetHeight($height);
	}
	
	public function SetSize($width, $height) {
		if($width == $this->getWidth() && $height == $this->getHeight()){
			return $this;
		}
		
		return parent::SetSize($width, $height);
	}
	
	public function SetRatioSize($width, $height) {
		if($width == $this->getWidth() && $height == $this->getHeight()){
			return $this;
		}
		
		return parent::SetRatioSize($width, $height);
	}
	
	public function getFormattedImage($format, $arg1 = null, $arg2 = null) {
		if($this->ID && $this->Filename && Director::fileExists($this->Filename)) {
			$size = getimagesize(Director::baseFolder() . '/' . $this->getField('Filename'));
			$preserveOriginal = false;
			switch(strtolower($format)){
				case 'croppedimage':
					$preserveOriginal = ($arg1 == $size[0] && $arg2 == $size[1]);
					break;
			}
			
			if($preserveOriginal){
				return $this;
			} else {
				return parent::getFormattedImage($format, $arg1, $arg2);
			}
		}
	}
}

This class overrides the SetWidth, SetHeight, SetSize, SetRatioSize and CroppedImage methods and always uses the original image if it already fits the requested dimensions.

Making use of the class is simple. Instead of having:

public static $has_one = array(
	'MyImage' => 'Image'
);

in your Pages/DataObjects you would now write:

public static $has_one = array(
	'MyImage' => 'BetterImage'
);

and use it like a regular image. Migrating an existing project to use the BetterImage class is simple as well. Just put the class (BetterImage.php) somewhere in cour mysite/code folder and replace all relations from Image to BetterImage (as shown above). Then run dev/build and you're set.

Feel free to merge in methods for rotating and grayscale conversion from Aram's tutorial, to get the "Uber-Image-Class".