How to compresss images in Figma using TinyImage

Video Transcript

Today we’re going to see how to export compressed images directly in Figma using a Figma plugin called TinyImage. To get started, if you haven’t already downloaded it, you want to go to the Figma plugin directory; just click on the Figma icon in the header, then click on “Plugins” in the left, then click on “Browse all plugins”. Then in the search bar, if you just type in “TinyImage” (one word) you’ll see it pop right up. I’ve already got it installed, so that’s why mine has an “installed” status, but if you haven’t installed it, just click on the “Install” button there and you’ll be able to use it straight away.

Once you’ve installed it, you can jump back to your project and you should see it in the Figma plugins panel. To access the Figma plugin panel, you can right-click anywhere on your page and go to “Plugins” and then “TinyImage JPG/PNG Compressor”. I’ll click on that and that’s loaded the Figma plugin for us, and it’s automatically retrieved all of the layers that have any export settings on the images; what I mean by that, is if we click into any of the images here you’ll see on the right-hand side (outside of the plugin area) that we’ve got some export settings attributed to all of these images.

All of these have different export settings and you will notice that the PNGs just have one and the JPG photos all have two, so that’s being reflected in the list of images in the plugin. We can see the description of the settings on the right hand side, so we’ve got 1x JPG, 2x JPG, 1x JPG 2x JPG for all of the photos and then for all of the PNGs we can see they’re all 1x PNG, so what that means is we get a complete overview of all of the exportable images in the file, so only images that have export settings will be included in the options a list of images for exporting from TinyImage.

We can see that by jumping into all of these images here, so if you don’t necessarily want all of them you can go through and uncheck any that you don’t actually want to compress or export. You can either do that one-by-one just by flicking through them or you can unselect all of them; so you can click on this top checkbox right at the top of the list, if you click on that it’ll unselect all of them. The same thing happens if you’ve already selected some of them; to select them all you can click on the top checkbox again and it will reselect all of them. You might also want to unselect by image, so if you click on any of the images, you’ll see that it’ll only select the exports for that particular image.

So that’s a really quick way of either unselecting images. If you just wanted to quickly unselect these three images you could click on each of them, or click on the top checkbox and unselect them, and then when we unselect our images you’ll see they’ve been unselected from the whole list; that can be a nice way of doing it. The other thing you might want to do is just include one image or one frame, or two frames. For example, I might just want the Mt. Fuji photo and the matcha photo, so I can multiple select those and in the Figma plugin it will just pick up on those four, and only those will be selected (provided that I’ve kept these checkboxes checked). So that’s how you can go about selecting the images.

Let’s just do a test so we can actually see it in action, so I’m going to convert compress a few images here. I’ve got two icons, so I’m just going to do the 1x, and we’ve also got this photo up here which I’ll do as 2x. The default compression level is 85, but you can move this up and down to your liking; it goes all the way down to “ludicrous mode”, which I don’t recommend for most images, but it can be handy if you really need to get crazy image savings. However, the default is is 85, so we might just try that for now and see how that goes. So just click “Compress”, and then now it’s compressing the four images that we selected for exporting. You can see it has already finished the PNG and the JPG and now it’s doing the 2x photo of the shop that we also exported.

You’ll see up here it’s actually popped down a little window for me to save it. The default file name is just “tinyimage” with the date and time, so it doesn’t conflict with anything else you’ve saved, but I’m going to just rename it to “saved-compressed-1” so we can find it easily. If we go back to my desktop, you can see it has saved our image as a zip, and this zip contains all of the image files we’ve just compressed. If I open up that file, you can see we’ve got our four images in here, so there’s all the four we just exported they’re looking pretty good.

If we go back to Figma it’s nice to see this breakdown of all of the compression that was done, so we can go through each line and actually check how much was saved per image. In the case of the 2x JPG of that shop photo, it’s gone down from 6 megabytes to 1 megabyte so it’s an 83 percent saving. The icons or the PNGs have gone down; this one has gone down from 16 kilobytes to 4 kilobytes, so it’s a 75% saving. The next one is 75% and the matcha image has gone down from 3.2 megabytes to roughly 500 KB, which is 84%. Then the notification bar will also tell you a total of how much was saved overall; so overall, between these four we’ve saved 83%, which is roughly 7.5 megabytes, which is quite good. Those savings obviously compound the more images that you you actually compress, so that’s pretty neat.

Once it’s done you can just go ahead and click the close button in the plugin, that’ll just get rid of the plugin. If you do want to export other sizes, you can do that as well. As I showed you before, if you need to change these around, so let’s just say with these icons we actually want multiple resolutions. I might want a 2x and a 3x PNG, so if I add a couple more layers to those, I can do that with these ones. I might just want to get rid of some of the export settings or I might want to include extra settings, but I’ll show you what that actually does. If I add another one back onto here; so I’ve just added another export setting; a 2x JPEG setting, just on the Mt. Fuji photo. I’ve removed them all from the other ones, and all of these also have 2x now, so what I’m going to do is rerun the Figma plugin, which you can do by the right-clicking and going back to “Plugins” and then clicking “TinyImage JPG/PNG Compressor” or you can just click Run last plugin” (and there’s a keyboard shortcut there as well), so I’m just going to click “Run last plugin”, so you can see this time our list is looking slightly different, and that’s because I just changed those export settings before I ran TinyImage again. If I click on the sushi icon, you can see over here in the official Figma interface (outside of the Figma plugin) all of the export settings that we just updated have been reflected in the plugin. So, we’ve got 1x, 2x and 3x for this particular PNG, and again, I can choose which ones I actually want to compress. From there I can do none, or I can do just one or two; and if I click out of that again, you’ll see down here that some of the 2x ones have been removed and a couple that we just wanted back in there have been added. So it’s just the Mt. Fuji one now that’s got 2x and the other ones don’t have 2x anymore.

All of the settings and images in TinyImage come from the Figma settings, and and that’s the same way that the the native image exporting works as well. If I open up that so you can see on the right here I’ve just opened up the official native Figma export feature so this works the same way, so if I don’t select anything and then open it, you can see it’s doing a very similar listing of the images, and again, you can you can re-select them, change the selection, click on the selection (actually it does close it whenever I change the selection so I have to keep reopening it), but fundamentally it’s very similar and and that’s to remove the learning curve being totally different from the native export. It’s kind of just the Figma exports with “ludicrous mode” built-in (quite literally).

So what we might do is run it again with these new exports. In this case I’m just going to do it for the sushi; and I’m going to select all of them; and I’m going to put this quality down quite a bit. I’m going to put it into “aggressive mode”… actually, I’m going to put it in “ludicrous mode” just for fun. I’m going to set it to “ludicrous mode” and I’m going to click “Compress”. So I’ve just got these three selected, now I’m going to click “Compress” and it’s going to compress those icons for me using different settings. So now we’re in the “ludicrous mode” setting and if I save that; I go back to my desktop; you can see I didn’t rename it this time, so it’s just saved as “tinyimage” and I’ll open up that. You can see it has saved out my three three images, so that’s in 1x, 2x and 3x. If we jump back here, you’ll see the savings on those images have gone to 79%, 81%, and 79%, so a total of 80 percent saved. All those are PNGs, and because the PNG icon is quite smooth and the lines are quite quite simple, the compression isn’t as noticeable (even at that extreme), so it’s a good way to save file size without actually losing much quality. you probably wouldn’t want to do ludicrous mode for high quality image or images like, this I can show you what that looks like, but you’re probably not going to want to do that. What I’m going to do is I’ll I’ll export this one and a re-run TinyImage, and and you’ll notice that if I open TinyImage with a layer selected it’ll automatically just load up that layer, where as if I load it up without any layers selected, it’ll just default to showing all of the layers with export settings on them in Figma. If you do really want to do a quick export of an image, the way I usually do it is just right-click it and click on “Run last plugin” or “TinyImage JPG/PNG Compressor” (or use that shortcut for running the last plugin) and just open it up with the layer selected and you’ll see it pre-selects that particular image with those export settings. So that’s a really quick way of doing it if you just want to export one or two layers, you can do that really easily and pre-select them. So I’ll export these ones at a lower quality, so I’m just gonna move this down, so I might do like “55” or something and see what that looks like. I’m going to compress this at “55” and see what happens; I’ll actually get rid of the matcha and I’ll just do the Mt. Fuji. So at “55” and click “Compress”; it’s compressing those two now, it has finished the 2x, and finished the 1x.

I’m just going to save that and rename it. I’m going to save that to my desktop I’m gonna check that out. I’ll just unzip that .zip file, and I can see it’s got my two images; Mt. Fuji at 1x and 2x. That was set at “55” quality, and it’s actually pretty good; you can notice a little bit of artifacts around the mountain in the 1x, but the 2x one is actually quite good, I’m not noticing many artifacts at, all which is cool. Then if we go back to the the output, so at quality “55” you can see we’ve saved 93% exactly on both sizes. This was just for 2 images, so we’ve gone down from 2 megabytes to 138 kilobytes, and we’ve gone from 5.5 megabytes or 5.6 megabytes down to 383 kilobytes; so in total just off those two sizes of that image we’ve saved 7 megabytes. So, that’s 7 megabytes that won’t have to go down the wire to any anyone using our website or on our on our blog, or loading it on an email or banner, or whatever it’s being used for, on an e-commerce page.

So that’s just an example of how you can save quite a bit of data for users using TinyImage, and and you can experiment with this, as I’m just showing you with the slider. You can experiment with this so if you if you find that “55” is too aggressive in that case, you know you could try “65” or you could just kind of bump it up in increments of 10 and and compare the outputs to see which one suits the kinds of images that you’re using. It all depends on how detailed the images are how big they are in terms of resolution or dimensions, and same for PNG’s; PNGs work really well for transparency, so these icons for example are perfect for PNG, however, if you were going to set these kinds of photos as PNG, it’ll still compress them, but you won’t get nearly as good as saving as you would if you are setting them to JPG; and the PNG compression is just going to take a bit longer as well with the the photos. So, typically I would use JPG for the photo style ones, and use PNGs for anything that you need transparency for.

So, I hope this has been a helpful intro to compressing images in Figma, and if you have any questions please reach out, but until then I hope you’ve enjoyed it and I look forward to giving more Figma tutorials like this in the future!