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