Serving Photos| Hitchhikers Platform

Serving your Photos Using Thumbnails

Depending on their origin, photos have a wide variety of formats, dimensions, and metadata attributes such as orientation & color profiles. To optimize for page speed and ensure that all devices can render images correctly, we create a set of thumbnails at several sizes and normalize the image format to something that all devices can consume.

Using Thumbnails on Your Site

Thumbnails are created using your photo’s original dimensions, in addition to thumbnails which are scaled to fit within each of these fixed bounding boxes:

  • 1900x1900
  • 619x1000
  • 600x450
  • 196x400

Your photo is never enlarged nor is the aspect ratio changed. As a result, the thumbnails and dimensions created for your image will not be exactly those shown above.

You access thumbnails using URLs of the form:

FIT specifies one of two modes that allow dynamic selection among a set of thumbnails:

  • — “at least” as large, on one dimension
  • — “at most” as large, on either dimension

This dynamic URL will return the thumbnail which is the best fit for the given FIT and dimensions. Note that it may not be an image that has exactly the given dimensions.

For example, this image is originally 1220x804:

We can request the smallest thumbnail which is “at least” as large as 600x450:

That thumbnail is 600x395, which maintains the aspect ratio and has a width which is equal to the requested one. This is the common use case when you want to display the picture in a web page, which typically has one dimension fixed.

If we instead request 601x450, we get the next size up, which is the original size of 1220x804:

Depending on the input format, the thumbnail’s format will be JPEG or PNG. The system also creates and serves WEBP variants on demand, which is a more efficient image format that is used by some applications (Chrome, Firefox).

Here is a summary of when these formats are best suited:

  • JPEG is best for photos and any image with a big range of colors.
  • PNG is best for images like clip art or vector art which have a limited color palette.
  • WEBP can handle both use cases well and encodes images into a smaller file at the same level of quality. However, not every application can read this format.