What are the Best Image Size Dimensions for Responsive Web Design?


What are the Best Image Size Dimensions for Responsive Web Design?

When building image carousels, jumbotrons, or full background sections you will often need to properly size an image. Below are some recommendations based on the most common device screen sizes and if you are using parallax or fixed background images.

Desktop (1920×1080)

  • 2000px x 360px, 4000px x 720px (retina)
  • Parallax (images need to be as tall as the device height)
    2000px x 1000px, 4000px x 2000px (retina)

Mobile (428×926 iPhone 12 Pro Max)

  • 500px x 500px, 1000px x 1000px (retina)
  • Parallax (images need to be as tall as the device height)
    500px x 1000px, 1000px x 2000px (retina)
<picture>
<source srcset="https://dummyimage.com/1000x360/000/fff" media="(min-width: 769px)">
<img srcset="https://dummyimage.com/500x500/000/fff" alt="">
</picture>

<h2>Retina</h2>

<picture>
<source srcset="https://dummyimage.com/2000x720/000/fff" media="(min-width: 769px)">
<img srcset="https://dummyimage.com/1000x1000/000/fff" alt="">
</picture>

 

Codepen demo



Written by: Jake Lett
Jake Lett is a B2B marketing consultant with over 15 years of experience in the digital marketing industry. He specializes in SEO, HubSpot, and PPC campaign management. Jake has a proven track record of helping businesses increase their online visibility and drive more traffic, leads and sales. He is a Certified Google Ads Specialist and a Certified HubSpot Developer.

Related posts

Tags: ,

Want to Get Email Updates of New Articles?

Join My Email Newsletter