Overview

Peakhour provides an image optimization API that allows you to deliver high-quality images on your website. It provides a set of operations that give you more control over your output images, especially when designing a responsive website.

Responsive design is a technique in web development that enables a website to adapt to the screen size and resolution of different devices. It's crucial for delivering optimal user experience on different devices, especially for images.

This article covers some best practices for integrating Peakhour with responsive design, ensuring that the right image is delivered to the right device.

Use fit=max

Using the fit=max parameter in the image URL will ensure that an image is never delivered larger than its original size. This can prevent the image from becoming stretched or pixelated when viewed on a larger screen, ensuring that the image quality is maintained.

Use auto=format

The auto=format parameter tells Peakhour to automatically deliver lightweight WebP images for Chrome browsers or convert to a more suitable format for other browsers. This can significantly reduce the image size and improve page loading speed, delivering a better user experience.

Use Variable Quality

When using the dpr (device pixel ratio) parameter, you may want to consider adjusting the quality of images for higher DPRs to reduce the file size and maintain the pixel density. This can be accomplished by using the q (quality) parameter, which works with JPEG, WEBP, AVIF and JXL formats. By reducing the image quality for higher DPRs, you can strike a balance between image quality and file size, ensuring a seamless user experience on different devices.

Peakhour provides an easy-to-use API to help you deliver high-quality images on your website, especially when designing a responsive website. By using the fit=max, auto=format, and variable quality parameters, you can ensure that the right image is delivered to the right device, delivering an optimal user experience.