Picture quality

Picture quality denotes the dimensions of pixel-based images. A high picture quality implies that an image will appear sharp or clear. On the contrary, low picture quality implies that an image will appear poor or grainy.

Most images taken by a camera or crafted by a visual artist are conserved at high quality, like the image presented below.

Proper dimension

If you wish for an image to fill the entire width of a screen, first ensure that the image is sized accurately.

Image size is inadequate

A picture with a quality of 200 x 150 will fit within a space that has a width of 100 pixels and a height of 75 pixels. However, if stretched to cover a screen with a width of 800 pixels and a height of 600 pixels, it will appear fuzzy and pixelated. The quality would be insufficient in this case.

Image size is excessive

A picture with a quality of 57600 x 38400 will appear acceptable when reduced to cover an 800 x 600 screen. Conversely, an image with a much lower quality (e.g., 1000 x 800) would be appropriate and devoid of excessive data. A picture with an overly large quality would be ineffective and would require a longer period for uploading and/or downloading. This would also decelerate your webpage.

Picture quality guidelines

Before adding your pictures to your website, ensure to:

• Select the proper picture format
• Enhance your pictures

The most suitable picture file types for upload are PNG, JPEG, SVG, and WebP. Discover more about the most common picture file types utilized on the web.

Utilizing pictures in Webflow

You can incorporate pictures into your Webflow site using 2 methods: 

• as embedded images
• as backdrop pictures

Embedded images

When an embedded image is included on your site, Webflow will automatically enhance and create various versions of this image at different qualities.

When a user opens a page containing an embedded image, the browser will provide the finest image based on that user’s screen quality. Explore more on responsive images. 

Backdrop pictures

When setting a backdrop image on an element like a part or container, the original image will be applied. Webflow does not create responsive versions for backdrop images. This implies that you should upload an enhanced image with the appropriate quality.

The optimal technique to enhance pictures is to plan for usual, practical displays, and to think about your website’s audience.

For instance, the 15-inch MacBook Pro has a quality of 2880 x 1800. An image with a width of 3000 pixels would be ideal for this display. On a bigger display, the image can enlarge and still look impressive.

Nevertheless, site users on mobile devices will download the same large backdrop image utilized on bigger breakpoints, which is not ideal. You can upload variations for the backdrop image and introduce a new backdrop image version to each breakpoint. This optimizes your backdrop images for broader or narrower breakpoints.

Modifying picture compression

You can employ picture editors like Photoshop to modify the quality of picture formats. Picture editors can compress pictures and decrease your file size.