How to export Progressive JPEG images from Figma using TinyImage

Video Transcript

Today, I'm going to be showing you how to export progressive JPEGs directly from Figma.

To do this, we need to install a Figma plugin called TinyImage if you go to the toolbar in Figma and click on the Figma icon in the top left and then go to your search and search for the word TinyImage which is just one word you'll see a plugin called "TinyImage Compressor" popup on to the "Plugins" tab you'll see this little icon here that'll be quite recognizable instantly, and then if you haven't already installed it you'll see a button over here that says "install", I've already got it installed and that's why mine says "installed" with the little check box, but if yours just says "install", click on that button and then it will change to say "installed" like mine does.

Once you've installed it you can jump back into your project and to open the Figma plugin just right click anywhere go down to plugins then go down to "TinyImage compressor" and click on that and that will run the Figma plugin that we just installed. Because we want to export progressive JPEGs, we're not going to probably do that for these these icons, these are probably more suited to PNG because they've got transparency. You could export them as JPG, but in this case I'm much more interested in these photos that are that are going to be much better for our progressive JPEG output.

The first thing you need to do is make sure that you have export settings on your layers. I've already got them set up but if you don't, I'll just show you what that looks like. I've just removed the export settings on this image over here; if I click on "refresh" in the TinyImage Figma plugin, you can see I got this little warning just letting me know that none of the selected layers, in this case the one I'm selecting now, none of those layers have any export settings on them.

We need to add one at least one to let TinyImage know what image we want to export. In this case I'm just going to click on my image over here and go over to the right-hand column, click on "export", and then that will give me the default option of PNG; but in this case because I want to export progressive JPEGs from Figma, I need to click on this SVG drop-down and change that to JPG; now that's set to JPG I can also add another one; I can add another export setting at 2x and change that also to be JPG.

If I click on this little "refresh" button in TinyImage, that's detected these new export settings that I've added to my image. If your images aren't showing up, it just means that you need to to add those export settings in Figma and tell TinyImage what you intend to export from Figma.

Now that we've got our JPG export settings set up on all of our images here, we've got 1x and 2x JPG on all of them. we can start to export them and see what that looks like. Because we want to export progressive JPEGs. which is a specific format that allows you to load in the images a little bit differently than they usually get loaded in; normal JPGs when you put them on a website and look at them in a browser, they'll be loaded from top to bottom; you'll notice when you see images loading sometimes it starts loading at the top; the strips of the image the top come in from top to bottom, but progressive JPEGs are exported in a slightly different way. Instead of getting loaded in from top to bottom, it loads in progressively sharper versions of the the entire image itself; the first pass will be you'll see all of the image but it'll be not quite super clear what what it is and then it progressively loads in the image detail, but loads it all in one go. Rather than top to bottom line by line it'll load in the full image, but just a lower quality version of it first and then progressively load in a sharper version. It's it's just a different way of using JPGs on a website that might be more suited for your particular use case.

Describing progressive JPEGs aside, now we want to actually create them; in this case I'm going to use the image that we've got over here as a test case. In TinyImage, to enable progressive JPEG exports from Figma, we need to click on this little "Settings" button here in this TinyImage toolbar. If I click on that icon you'll see a couple of options pop up; we're not interested in the bottom options at the moment, but we are interested in this little toggle switch that says "Use Progressive JPEG Compression"; by default that's turned off, but I'm going to click on that toggle and enable it.

Now that we've got "Use Progressive JPEG Compression" enabled; we can close that off and get out of the settings. Now, that's enabled progressive JPEGs; you can see here the format's still set to JPG, but because we've got our compression setting turned to progressive JPEG, that's going to use the progressive JPEG option when we export. Let's click on "Compress" and let TinyImage do its thing, by compressing just the two images to start with.

Once that's done, it's going to save them as a zip file for us. We can just go ahead and click on "Save", and before we open that up, you can see here I had the quality set very aggressively at 20; the quality savings are ludicrous, we've got 96 percent savings on both of those JPGs. The images aren't going to look amazing, but that's just an idea of how far you can actually push it; it's not the full extent, but "20" quality out of 100 is pretty low. You can see here we've dropped from a 5 megabytes to 220 kilobytes and 1.74 megabytes down to 78 kilobytes; we've just saved a total of 6.4 3 megabytes just on those two images alone.

If I double click on the zip file that it has exported for me, I'll open up that folder and you'll see here we've got our two images that we just expected to see. That's the 2x version that we can see here, and it's not horrible; it's certainly got some artifacts here if you look at the these banners in the photo, but if that was half size down to 1x, that actually looks really good you would not be able to tell at a glance that we've compressed it down so far. Comparing that to something that's the original size, where we haven't saved the 96%, I think that 96% saving is a really good trade-off for that.

How do we actually tell that this is a progressive JPEG? I'm going to show you how to do that now. If I close this off, I'm just going to open up my web browser and point you to a page that we can actually have a look at. You can see I'm just using this basic website that I found on Google by searching for "progressive JPEG test". What this lets us do is we can upload an image, if I click on "choose file", open "TinyImage Compression", the one we just did, I'm just going to upload one of those images, and you can see here it's flagged it as "progressive".

It's giving us an example of what a progressive JPEG might look like as well; I'll click into that and just show you; you can see here, I don't know if you could you could see that very clearly, if I refresh that that's probably cached, but it it loaded it in at a slightly lower quality and then and blurred it up. That's roughly what what the idea is behind it. That's cool, that means we've confirmed that the the export worked and we now have progressive JPEGs, which is which is awesome.

If we want to do that again, we can just rerun TinyImage from the Figma plugins sidebar; because we've already launched it, you can just click on this little icon in the sidebar under "plugin" and click on TinyImage, you'll see the little milk bottle icon, and that'll rerun it for you without having to open up your right-click menu. I'm going to re-run this experiment and do all of these images, now I'm going to set it to 50 instead of 20, just to get a slightly more a reasonable output. If I compress that again, this is going to go through eight different images, because we've got retina and non-retina export settings on on all of them, and I just want to give you an idea of roughly what quality you can expect to get across the board if we if we export them all at 50 percent quality.

That's all done now; we can save that, and if we look at the numbers again, it's just super good compression. We've got 92% saved from 8 images, we've just saved an absolute number of 29.5 megabytes. which is which is massive. If you're putting these up on a website and exporting these progressive JPEGs from Figma just to put on your website, then 29 megabytes is massive for your users. You can see the numbers speak for themselves.

We can go ahead and unzip that and jump in there. As you would expect, you've got all the images that we that we wanted, 1x and 2x for all of them, obviously the 2x ones turned out a bit better, but the idea would be just to play around the quality slider and keep doing that until you're satisfied with the output quality versus size, and just keep doing that.

That's the entire process of exporting progressive JPEG files directly from Figma; as always, thank you for tuning in and watching, I hope you've learned something and I hope that it helps you out with your own projects or websites that you've got going on at the moment. Until next time, thanks again!