Discover how image resolution can affect the speed of your website and how you can optimize your images for better user experience.
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?
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.
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.
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.
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 (a sextillion bytes large, to exaggerate). 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.
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?
You can use images in your Webflow project in two ways:
When you drop an inline image into your project, Webflow will automatically optimize and create variants of this image at different resolutions.
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.
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.
Something went wrong while submitting the form. Please contact firstname.lastname@example.org