Responsive images are essential for optimizing websites for different devices and ensuring quality performance and user experience. Here are some key aspects of using responsive images effectively:
Image API Approach
When you upload images into ButterCMS, they are hosted on our CDN and you get a URL like this: https://cdn.buttercms.com/x5JJ6thQoidh9D6PE3Sb
Using our Image API, dynamically resize images. This is done by defining a srcset your application, see exapmple:
<img src="https://cdn.buttercms.com/x5JJ6thQoidh9D6PE3Sb" srcset=" https://cdn.buttercms.com/resize=width:180/x5JJ6thQoidh9D6PE3Sb 180w, https://cdn.buttercms.com/resize=width:360/x5JJ6thQoidh9D6PE3Sb 360w, https://cdn.buttercms.com/resize=width:540/x5JJ6thQoidh9D6PE3Sb 540w, https://cdn.buttercms.com/resize=width:900/x5JJ6thQoidh9D6PE3Sb 900w" >
CSS Approach
Check this article: https://www.w3schools.com/howto/howto_css_image_responsive.asp
All you need to do is upload the image once for desktop and then the CSS will auto-resize it down for mobile.
Conclusion
By implementing responsive image techniques, you can ensure that your website provides an optimal experience across different devices while also maintaining fast loading times and minimizing data usage.