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

  • read
  • Add to Flipboard Magazine.

common questions answered

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)

 

Codepen demo

Written by: Jacob Lett - Jacob is a marketing and web design consultant who helps manufacturers grow their revenue. Unlike his competitors, he focuses on small and consistent website design changes to increase results. He recently created the Industrial HubSpot Theme to help manufacturers quickly build their website on the HubSpot platform.
Category: Common Questions
Tags: , ,

Want to Get Email Updates?

Receive a monthly digest of new tutorials and resources.

Advertise Here