Web Design Resources

Tools

Dynamic Image Resizer

The image resizer takes a JP(E)G, GIF, or PNG uploaded to https://assets.csuchico.edu and resizes it through the use of a query string. For example:

https://assets.csuchico.edu/images/example.jpg?w=100

Will deliver a version of example.jpg that has been reduced to 100 pixels wide (assuming the original is wider than 100 pixels), preserving the original aspect ratio.

A Note on Using the Resizer

Before using the image resizer, consider whether an image can be properly sized prior to uploading. While handy, the image resizer does require some extra processing time to deliver an image and is not as proficient at compressing images as something like Photoshop.

Images generated by the resizer are saved to the server so they can be delivered without regeneration - this speeds up delivery time and reduces server load, but does still require the resizer to perform some processing.

TLDR: It's better to resize and compress images before upload. Use the resizer when necessary.

Instructions

The resizer accepts 4 paramaters attached to the source image URL via query string:

  • w - width (in pixels)
  • h - height (in pixels)
  • quality - compression level (JPGs only), default: 65

We'll use the CSU, Chico signature as the source for our examples:

California State University, Chico

Resize by width, maintain aspect ratio

example.jpg?w=100

The CSU, Chico signature, resized to 100 pixels wide

This will resize the image to 100 pixels wide, maintaining the source image's aspect ratio. For example, if the source image was originally 200 x 400 (1:2), the above query string would generate a 100 x 200 (1:2) image.

Resize by height, maintain aspect ratio

example.jpg?h=100

The CSU, Chico signature, resized to 100 pixels high

This will resize the image to 100 pixels high, maintaining the source image's aspect ratio.

Compression level

example.jpg?quality=50

The CSU, Chico signature, set to quality: 50

The quality parameter only applies to JP(E)Gs and will be ignored for PNGs and GIFs if set. The default value is 65. Higher values means smaller file sizes, but more lower quality. Lower values mean larger file sizes, but higher quality. Compress as highly as possible while maintaining an acceptable level of image quality. When in doubt, don't set this parameter.

Multiple parameters

example.jpg?w=300&quality=50

The CSU, Chico signature, blurred