Exporting Tips

[00:00:00]
>> Sarah Drasner: Some image export tips. Something that has been found recently is that if you double the image size, and reduce the quality to almost nothing, and then shrink it down. It actually retains the same amount of crispness as you probably want to get, but it doesn't look like it's reduced quality.

[00:00:23]
So you should try that and see if you're actually getting a much better image and transmitting a much better image for that size. And I think there's a smashing write-up about this. TinyPNG, TinyJPG is really super awesome. There's a number of ways to use it. They have a web app so you can use it online.

[00:00:46]
I use a Photoshop extension that allows me to export really fast with it. They also have a desktop application that you can use. It's really well done. And a lot of times, I pull the image out and the quality doesn't appear reduced, and it's really effectively smaller. There are a lot of webpack plugins that you can use.

[00:01:07]
I highly suggest you make them part of your build process, cuz then you don't have to think about that too much anymore. So even if you're working with designers who aren't really paying attention to the image export. And there's a lot of them out there, so you can actually check out a lot of them.

[00:01:24]
Some of the CLI tools that create applications for you already have them included. So you might already be using one without realizing it. SVGOMG is super awesome for optimizing SVG, I use that all the time. It's a web-based tool, but it's by Jake Archibald, so of course it has service workers.

[00:01:46]
Which I like, because sometimes I'm on planes without Wi-Fi and I can still use it. Because you just have to visit it once and then it's cached in your browser.