In this video, we're going to add our hero image to our page. 1
We'll learn how to export images from Figma, how to import them inside Webflow and how to work with 2
images in Webflow. 3
First, let's export our hero shot from Figma. In Figma 4
we made this hero graphic with several different elements. 5
We could export them as independent images, but that would be unnecessary work and quite tedious to recreate 6
in Webflow. 7
Instead, we're going to export it as a single image. 8
This way, it will save time and make sure it looks exactly as we designed it. To export anything from 9
Figma, select the element and in the properties panel click Plus icon under Export section. And to 10
export several different elements as one image, 11
you have to group them first. Select everything, right-click and press Group Selection, or use the 12
shortcut. Then select that newly created group and hit that plus icon under export settings. 13
Let's go through these different export settings. 14
Screen resolutions have improved significantly over the years. 15
Tablets, smartphones, latest premium laptops like MacBook, 16
they use HIDPI screens, also known as Retina Display. HIDPI means High Dots Per Inch and they usually 17
have double the pixel density than common laptop and desktop screens. 18
This makes things look much sharper and crisper. So you don't have those pixilated edges on smaller 19
text or on the edges of the image. To make our images optimized for such screens. 20
This is commonly called Routine Optimization. 21
We need to double our actual image size. 22
So from this drop dropdown option, we would select 2x. Next is suffix. 23
This is just adding a suffix at the end of the file name. 24
No need. And we have several file formats. 25
Ideal image format for the web is SVG because they are vector-based, 26
have smallest file sizes and can be enlarged infinitely without losing quality. But unfortunately they 27
don't work on images that have photography inside. 28
Basically anything that is pixel based. 29
I won't go into an explanation of what's the difference between pixel base and vector-based images. 30
In short, PNG and JPG file formats are pixel-based and SVGs are vector-based. Since we are using 31
photography, 32
we have to export either PNG or JPG. PNG and JPG or JPEG have two main differences between them. 33
First, is the size. JPEG images are usually smaller than PNG images, because of the higher compression. 34
But JPEG images can't have transparent backgrounds. PNGs can. 35
So, in our case either we have to export a PNG. Or a JPEG and include the blue background in it. 36
If we don't include the blue background, it will automatically fill the space with white. And that's 37
not gonna work for our image. 38
Ideally, we would go with JPEG, because the file size is smaller and that really matters. 39
Why? 40
Because no one likes a slow website. And images with large file sizes is one way to slow down a website's 41
loading time. 42
But if we go with JPEG, then we have to include a blue background. And that can have some issues. Sometimes 43
colors on exported images don't match with web colors 100%. And we need that blue background 44
to match 100% with the blue on the section in Webflow. 45
If they, don't we're not going to have a smooth transition and the edges of the image will be visible. 46
I've tested this already on this image. And sadly, it didn't match. White and black colors are easy. 47
They always match, but other colors not as much. So we are left with only one option, which is PNG. 48
Let's export. 49
If we check the file size, we'll see that it's way too large. 50
More than 1 MB. 51
We should always aim for images to be less than 300 KB 52
if we can. Especially those that are right on the hero section. Users might end up staring at the empty 53
screen until the image finishes loading. 54
Luckily we can make the file size smaller using image compression tools. 55
There are a whole bunch of desktop and online compression tools. 56
The one that I like to use is imagecompressor.com. Upload your file here and it will compress instantly. 57
You can see how much of the file size has been reduced. 58
It's still above 300 KB, but not too much. 59
There is one additional thing we can do to make it even smaller. Instead of exporting 2x, 60
we could export 1,5x. The image dimensions are what contributes the most to the large file 61
size. 62
So sometimes I compromise on pixel density in favor of a better file a size. It's much better to have 63
a little blurry image on a minority of devices, than a crispy image that loads very slow on every single 64
device. 65
This time we can keep it 2x. All right, let's import our PNG into Webflow. 66
As with anything in Webflow, we add new elements from the elements panel. Drop the image anywhere 67
for now. We're going to structure the layout later. In order to upload an image, 68
double click the image or click the settings gear here. 69
It will open up the Assets Panel. Assets Panel is where Webflow saves all the images and documents 70
that you upload to your website. 71
Remember how we exported this images as 2x the size? 72
We can tell Webflow that this image is double the size and made for a high HIDPI. 73
This will shrink it down half the size. 74
Just like we have it on our designs. 75
Webflow does give us a warning for our large file size. Sorry Webflow, we will listen next time. 76
This time we would like a crispy look. 77
That's it for now. We're going to arrange the image later. We'll need to learn important CSS properties 78
for that. 79
So let's recap. To add images to Webflow we have to first export them from Figma using export settings. 80
Images that are made from several different objects, need to be grouped first. To keep our website fast, 81
we need to be mindful of our image file sizes. 82
We can shrink images using online compression tools. Adding images in Webflow happens by first adding 83
the image element to the canvas, and then uploading an image through the Assets panel.