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

  • read
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)

 

Codepen demo


Written by: Jacob Lett, a website designer & developer who creates HubSpot CMS themes and writes web design & marketing books to help marketers, designers, and web developers grow their businesses. This blog is my own personal journal and source to help others through some challenges I have faced.
Connect on LinkedIn


Category: Common Questions
Tags: ,

Related resources

  • HubSpot CMS vs WordPress: Feature Comparison and Review
  • 25+ Questions to Ask Before Redesigning Your Business Website
  • 5 Things A Business Should Consider Before a Website Redesign
  • How to Get a Responsive Website for Your Manufacturing Company
  • What Is a Good WordPress Alternative for Businesses?