INTRO

INTRO

New

Intro to the Designer

Intro to the Designer

New

2:48

Intro to HTML & CSS

Intro to HTML & CSS

New

3:38

HTML Structure

HTML Structure

New

1:55

WEB STRUCTURE

WEB STRUCTURE

New

The Box Model

The Box Model

New

1:54

Element Hierarchy

Element Hierarchy

New

3:57

Navigator Panel

Navigator Panel

New

2:45

ELEMENTS

ELEMENTS

New

Element Panel

Element Panel

New

1:49

Section

Section

New

4:14

Container

Container

New

2:44

Columns

Columns

New

2:22

Div block

Div block

New

3:37

Buttons & Links

Buttons & Links

New

Button

Button

New

14:08

Link Block

Link Block

New

9:35

Text Link

Text Link

New

1:16

Typography

Typography

New

3:20

Heading

Heading

New

2:02

Paragraph

Paragraph

New

4:42

Rich Text

Rich Text

New

3:52

Text Block

Text Block

New

0:56

Block Quote

Block Quote

New

0:42

List

List

New

2:31

Media

Media

New

Image

Image

New

3:39

Image File Types

Image File Types

New

2:22

Image Resolution

Image Resolution

New

3:28

Assets Panel

Assets Panel

New

3:08

Video

Video

New

1:20

Background Video

Background Video

New

3:15

Components

Components

New

Intro to Forms

Intro to Forms

New

4:55

Styling Forms

Styling Forms

New

2:55

Navbar

Navbar

New

9:38

Styling a Navbar

Styling a Navbar

New

4:34

Navbar Menu Button

Navbar Menu Button

New

4:51

Slider

Slider

New

4:56

Tabs

Tabs

New

4:38

Lightbox

Lightbox

New

3:44

Map

Map

New

2:58

Dropdown

Dropdown

New

4:38

Social Media Buttons

Social Media Buttons

New

2:49

Custom Code Embed

Custom Code Embed

New

1:24

Symbols

Symbols

New

3:47

Styling Basics

Styling Basics

New

Intro to Style Panel

Intro to Style Panel

New

3:15

HTML Tags

HTML Tags

New

3:59

Classes

Classes

New

2:46

Combo Classes

Combo Classes

New

4:05

Text Style Inheritance

Text Style Inheritance

New

3:18

Style Manager

Style Manager

New

1:56

States

States

New

2:47

Transitions

Transitions

New

2:40

Color Picker & Swatches

Color Picker & Swatches

New

3:51

Color Values

Color Values

New

3:22

Layout Basics

Layout Basics

New

Intro to Web Layout

Intro to Web Layout

New

2:27

Display Settings

Display Settings

New

2:54

Padding & Margin

Padding & Margin

New

2:48

Width & Height Units

Width & Height Units

New

3:59

Floats & Clears

Floats & Clears

New

1:52

Flexbox & Grid

Flexbox & Grid

New

Intro to Flexbox

Intro to Flexbox

New

2:27

Centering elements with Flexbox

Centering elements with Flexbox

New

1:20

Equal height layouts with Flexbox

Equal height layouts with Flexbox

New

1:47

Grid layouts overview

Grid layouts overview

New

4:18

Flexbox vs. Grid

Flexbox vs. Grid

New

4:00

Advanced Layout

Advanced Layout

New

Positioning Overview

Positioning Overview

New

1:48

Relative Positioning

Relative Positioning

New

1:43

Absolute Positioning

Absolute Positioning

New

1:43

Fixed Positioning

Fixed Positioning

New

1:27

Z-Index

Z-Index

New

1:49

Overflow

Overflow

New

1:49

Styling Typography

Styling Typography

New

Intro to Web Typography

Intro to Web Typography

New

3:20

Typography Units

Typography Units

New

2:43

Line Height

Line Height

New

1:38

Advanced Typography Styles

Advanced Typography Styles

New

3:01

Google Fonts

Google Fonts

New

1:18

Custom Fonts

Custom Fonts

New

1:27

Text Shadow

Text Shadow

New

2:36

Background & Border Styles

Background & Border Styles

New

Background Styles Overview

Background Styles Overview

New

2:20

Background Image

Background Image

New

2:04

Background Gradient

Background Gradient

New

3:02

Border

Border

New

3:07

Border Radius

Border Radius

New

3:22

Box Shadow

Box Shadow

New

3:34

3D Styles

3D Styles

New

Intro to 3D

Intro to 3D

New

2:25

3D Perspective

3D Perspective

New

4:01

2D & 3D Transforms

2D & 3D Transforms

New

4:53

EFFECTS

EFFECTS

New

Opacity

Opacity

New

1:44

Filters

Filters

New

2:59

Cursors

Cursors

New

1:45

Responsive Design

Responsive Design

New

new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

Image resolution simply refers to the level of detail captured in an image. Sounds fairly simple, but in practice, managing image resolution can get pretty confusing. That's why, in this video, we'll define image resolution, sizing images for your websites, and some best practices for working with both inline and background images — including how to properly balance image resolution with filesize.

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets

Transcript

For pixel-based images, we look at the resolution in terms of width and height. How many pixels wide, and how many pixels high—or tall.

For a lot of projects, we’ll have a photo or another type of image, and it might have a massive starting resolution because it came that way out of the camera, or from a graphic designer whose assets won’t even fit on Dropbox.

Let’s start with a vintage display: the 1999 iBook. This laptop display has a width of 800 pixels, and a height of 600 pixels. And if we wanted to have an image cover the full width of this display, we’d want to make sure that that image is sized properly.

Well...here’s a photo that has a resolution of 200x150. That’ll fit. But when it’s blown up to cover our display — even a vintage display like this — it looks horrible. That’s because the resolution is far too low, and when it’s scaled up like this, everything looks blurry.

Now from the other side, here’s a different photo—this time the resolution is 57,600x38,400. If we try to scale that down to an 800x600 display — when we scale that down to fit on our vintage iBook — it looks fine. No distortion.

But we now have another less visible (or even invisible) problem:

If we assume for a second that the iBook display here is the largest display we’re going to use for this image, then we’re wasting all this resolution. And the reason that could be a challenge is that because there’s all this extra resolution—all this extra data, we’re left with a file size that’s inefficient. And ridiculous. The file is 7.8 gigabytes in size. Besides the fact that the iBook doesn’t even have a hard drive big enough to hold the file, its built-in 56k modem would take over two weeks to download the image over AOL.

If low resolution files look bad when scaled up, and high resolution files can be too large and too slow, what are the best practices for image resolution in our projects?

Whether we’re designing for a device from 1999 or a more modern device, there are two major types of images we work with in our projects: inline images, and background images.

If it’s an inline image that you drop into your project as an actual Image Element, Webflow is automatically going to take care of this for you. It’ll create variants of this image at different sizes—different resolutions. And when a user loads up that page, the browser serves the best image based on that user’s screen size and their resolution. So on the iBook, a lower-resolution, smaller image will get pushed to that display. And it’ll look great. And if it’s a Surface Studio, a higher-resolution, larger image will load on that device.

That’s inline images.

But if it’s a background image, if we’re setting the background on a particular element of our project— like a section— we’ll want to optimize our image—we’ll want to figure out the right resolution.

Sometimes the best route is to design for the most common, practical displays. Always considering your audience. 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.

Also, in image editors like Photoshop, we can adjust the quality of formats like JPEG to add some compression and reduce our file size. In this case, we can drop the quality down while making sure we’re not getting a visually crusty image. And if we do, we can crank it back up until it looks right.

So, inline images automatically get scaled for us. Just upload a larger resolution and Webflow takes care of the rest. And Background images? We’re always considering the displays we’re designing for. And those are some of the considerations we want to make when we’re optimizing images for our projects.