How to dynamically resize images on the server side?

Page loading speed can be greatly improved by scaling the images on the server side.

Overview

The download of large images to the client browser which will be later resized to be a smaller image is very wasteful and slow.

Let the server dynamically resize and cache your images with NO overhead to subsequent calls. To use in your HTML just add the desired behaviour to the URL e.g "?max-width=100"

Available image transformations

The sample large image is a landscape image of 1,000px × 667px which is 1.1m in size.

Eaxmple image to resize

You can resize the image while maintaining the same aspect ratio. The width by height of the resized image can not exceed 2 million pixels.

width=nn

The width of the image, in pixels.

/docs/web/st/help/resize/landscape.jpg?width=100

width=100

( 19k PNG image resized to 100x66 pixels)

height=nn

The height of the image, in pixels.

/docs/web/st/help/resize/landscape.jpg?height=100

height=100

( 41k PNG image resized to 149x100 pixels)

quality=1...100

The quality of the image, quality can be a number between 1..100, the default is 100.

/docs/web/st/help/resize/landscape.jpg?quality=5

height=100, width=400, quality=5

( 15k JPEG image 1000x667 pixels of quality 5%)

DPI=72,96,300,600

The dots per inch for the generated image, the default is the source image DPI

/docs/web/st/help/resize/landscape.jpg?DPI=96

height=100, width=400, DPI=96

( 157k JPEG image 1000x667 pixels at 96 DPI)

format=PNG,GIF,JPG

Each image format has its advantages and disadvantages:

FormatPlusMinus
GIF Supports animation, and transparent pixels

Supports only 256 colours and no translucency.

Supports only 72 DPI

PNG Better alternative than GIF or JPG for high colour lossless images, supports translucency Doesn't support animation
JPG Great for photographic images Loss of compression, not good for text, screen shots, or any application where the original image must be preserved exactly

 

max-width=nn

The maximum width of the image, in pixels.

/docs/web/st/help/resize/landscape.jpg?max-width=100

max-width=100

( 19k PNG image resized to 100x66 pixels)

max-height=nn

The maximum height of the image, in pixels.

/docs/web/st/help/resize/landscape.jpg?max-height=100

max-height=100

( 41k PNG image resized to 149x100 pixels)

Benefits

Server-side image resizing provides incredible ROI. It can save web masters several hours each day, and gives you the ability to change the resolution of an image without having to hunt up the original.