I am trying to understand how to have responsive images in the header section of my sites. I use images from Deposit Photos. They come in these sizes.
1000 × 662, JPG - 3.33" × 2.21" (300 dpi)
2000 × 1325, JPG - 6.67" × 4.42" (300 dpi)
3877 × 2568, JPG - 12.92" × 8.56" (300 dpi)
7754 × 5136, JPG - 25.85" × 17.12" (300 dpi)
3877 × 2568, JPG - 12.92" × 8.56" (300 dpi)
For my headers, I add a section element first and then add an image as a background section. Is this recommended for the header to make the images responsive? My header is usually 500 pixels in height. I have 2 questions. Is there a process in Webflow to make sure my header images are always responsive? Is there a specific size image that I should be using to make my headers responsive?