Why you should optimize every image you display

Consider how image size affects user experience

Image optimization is a process of delivering images in the right format and dimensions while keeping the file size to a minimum. As fast-loading websites and apps become an important part of a positive user experience, image optimization becomes a necessity. Loading website content with a smaller payload is important for several reasons:

• Improves loading times, ensuring that users can access your channel content quickly and efficiently.
• Enhances user experience by providing a faster and more seamless user experience and by accommodating those with limited bandwidth or slower internet connections.
• Reduces data costs for users, particularly those on limited data plans.
• Ensures compatibility across different devices, making the website accessible to a wider audience.
• Contributes to better search engine rankings and user engagement, as faster-loading websites are more likely to retain visitors and rank higher in search results.

Being able to deliver a single image in many sizes and ratios from a single image source has many benefits such as:

• Optimizing the image storage and maintenance requirements
• Reducing the need to store multiple image versions

Which image optimization techniques can you use?

Adjust image dimensions

Sizing your images according to the display requirements of the channel (such as your website, smartphone device, or other) is a valuable technique for optimizing a website. By resizing images to the appropriate dimensions, you can reduce file sizes, maintain aspect ratios, ensure responsive design, generate thumbnails, optimize images, and leverage content delivery networks. This leads to faster loading times, improved performance, better user experience, and efficient content delivery. Striking a balance between image quality and file size reduction is essential for achieving optimal results.

Set optimal image quality

Controlling image file quality on a website is crucial for optimizing loading speed, conserving bandwidth, ensuring responsive design, improving SEO performance, and enhancing user experience. For example, you can display images in a lower quality to improve performance while still making the optimized images indistinguishable from the original to the human eye. By finding the right balance between image quality and file size, websites can provide faster loading times, accommodate users with limited bandwidth, reduce storage requirements, maintain responsiveness across devices, and deliver a satisfying browsing experience.

Use appropriate image formats

The choice of image format depends on factors such as image content, desired file size, transparency needs, and compatibility with different web browsers and devices. Some commonly used image output formats on websites include JPEG, PJPG, PNG, GIF, SVG, and WebP. JPEG is suitable for photographs, PNG is ideal for images with transparency, GIF supports animation, SVG is resolution-independent and scalable, and WebP offers efficient compression with good image quality.

Set up the limitations in the CMS

Before working with images via the API, we recommend establishing proper limitations for the elements in your content types. This ensures that content creators can only publish content items with images in the correct format and dimensions. In your content types, you can restrict the asset and rich text elements so that they only accept Adjustable images. This means that only image formats compatible with image transformation, such as jpeg, png, gif, and webp, can be added to these elements. To further control image quality, consider setting file size limits and dimension restrictions. This helps ensure that uploaded images are appropriate in size when used within content items.

Begin your image optimization journey