Image resolution

 

For pixel-based images, image resolution refers to the width and height of an image. How many pixels wide and how many pixels high, or tall, is the image?

Image Resolution
‍Image Resolution

Most images captured by a camera or created by a graphic designer are saved at high resolution, like the image above. So, for a lot of your projects, you might have photos and images with massive resolution.

Appropriate sizing

If we wanted to have an image cover the full width of a display, you’d want to make sure that image is sized properly.

Image is too small

A photo that has a resolution of 200x150 will fit inside a display that has a width of 800 pixels and a height of 600 pixels. But when it’s enlarged to cover the whole display, it will look terrible. That’s because the resolution is far too low, and when it’s scaled up, everything looks blurry or pixelated.

 

Image is too big

A photo that has a resolution of 57,600x38,400 will look fine when scaled down to cover an 800x600 display. But since you will not use all that extra data in this resolution, you do not need to upload a file with all this data.

 

The file size of such an image will be ridiculously large. It will be an inefficient image as it that takes too long to upload and download. It will slow your page down and most probably not load at all.

Image file size is too big
High resolution images have a very large file size.

Low resolution files look bad when scaled up. High resolution files can be too large and too slow. What are the best practices for image resolution in your projects?

Best practices

Before uploading your images to your project, make sure to:

  • choose the right image format
  • optimize your images

The best image file formats to upload are PNG, JPEG, and SVG. Learn more about the most common image file types used on the web

You can use images in your Webflow project in two ways: 

  • as inline images
  • as background images

Inline images

When you drop an inline image into your project, Webflow will automatically optimize and create variants of this image at different resolutions.

Responsive image variants created by Webflow
Responsive image variants

When a user loads up a page that contains an inline image, the browser will serve the best image based on that user’s screen resolution. Read more about Responsive images.

 

Background images

If you’re setting a background image on a particular element like a section, the original image will be used and not responsive variants. So, you’ll want to figure out the right resolution and optimize your image before uploading it to Webflow.

The best route is to design for the most common, practical displays. Always consider the audience and the displays they use. The 15-inch MacBook Pro, for instance, has a resolution of 2,880 x 1,800. You could look at devices like that and choose a width of around 3,000 pixels for your image. On a larger display, it’ll scale up and still look great.

 

You can use image editors like Photoshop to adjust the quality of formats like JPEG to add some compression and reduce your file size. You can drop the quality down while making sure you image still looks good visually.

 

Users on mobile devices will download the same large background image that’s used on larger breakpoints, which is not ideal. You can upload your own variants for a background image and replace it for each breakpoint to optimize for mobile.