Optimizing images for improved website performance

Resize and crop images, before upload

Before uploading an image to the CMS, we recommend resizing and/or cropping the image to the maximum size it will be used at.

Especially when using the original image in the body or WYSIWYG component, if you intend to use the image at 500px, resize and/or crop the image to those dimension instead of using the image at a large dimension and resizing it on the page, this will save on data being transferred and page load times.

For components and certain content types, this isn't too much of an issue, as the original image uploaded will be resized, cropped and compressed to generate an image to be used for it's displayed variations. As an example, images used for the Article content type, are used in Carousels, New feeds: teasers, cards and banners and on the Article itself. Each image will be created, in some cases multiple at varying dimensions, from the original and set focal point.

Choose the most appropriate file type

JPEG (.jpg, jpeg)
JPEG is a good choice, if your image has many colours, gradients and/or smooth transitions between colours. These would include still photographs, artwork and complex digital renders.

PNG (.png)
PNG is a good choice for images with minimal flat(solid) colours, no gradients and hard edges. These can include logos, icons, type faces and illustrations without gradients. PNG also supports transparent, and can be used if the transparency is required.

GIF(.gif) 
GIF is similar to PNG, but PNG is preferred if image needs to be larger and more clear or precise. It also supports animation.

SVG (.svg)
Preference for a SVGs are similar to that of a PNG, images with flat (solid) colours, minimal to no gradients with hard edges, like logos, icons, type faces and illustrations, but are required to render sharp and accurately at all sizes.

WebP (.webp)
WebP is a newer format on the web, is preferred over, JPEG, PNG and GIF. It supports transparency and the same or better image quality at a vastly reduced file size compared to them. 

Examples

Photographs
If your image contains or is a photograph.
Choose format WebP or JPEG

Icons
Are often small, and will benefit from not losing too much detail.
Choose format SVG, WebP(lossless), or PNG. GIF is also an option if there are very few colours (less than 256).

Screenshots
Choose format WebP(lossless), PNG or JPEG

Diagrams, drawings, and charts
Choose format SVG or PNG