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


About the Author

Jake Lett is a results-driven Detroit based B2B marketing consultant with 15+ years of hands-on experience managing SEO and PPC campaigns across manufacturing, SaaS, and professional services industries. He’s a Certified Google Ads Specialist and HubSpot CMS Developer who has personally managed budgets ranging from $500 to over $10,000/month.

Jake specializes in helping small businesses and solo marketers get more from lean ad budgets—using practical strategies that drive qualified leads, not just traffic. He shares real-world lessons on his blog, YouTube channel, and in his published books on digital marketing.



Related posts

Tags: ,

Want to Get Email Updates of New Articles?

Join My Email Newsletter