Optimizing Page Speeds with Export Settings
In order to get your page load times to a good speed, the most common thing you’ll want to do is make sure your image sizes are optimized. Quest takes care of serving the page for you and does so on some of the fastest servers available with Google Cloud Hosting. We will serve your web pages at the fastest speed possible with networks available all over the world so you don’t have to sweat dealing with tweaking server settings.
Image optimization is an important part of keeping page loads fast. One thing to note before we explain how to do this is that not everything we extract is an image. For instance, if you are using a rounded rectangle for a button, we will extract that as a Div. A “Div” is an HTML container and CSS is a way to use code to style that container and also possibly its contents. A background element that is a box with a gradient will also come into Quest as a Div with CSS values to copy that style. We don’t want to completely bore you with how web development works but the take away is when we extract vector style elements like boxes, they come in as code and are generally around 1-2Kb each so there’s no need to apply export settings to these. In fact, exporting them as images will usually increase their size so it’s best to only apply export settings to things like pictures or groups of images.
Two things to keep in mind while optimizing images:
- 1.What resolution do you want your images to be?
- 2.Should you combine smaller parts into one big image to save on file size as well as the amount of CPU needed to render individual things.
By default, Quest exports all images at 2X resolution. This will ensure that your design looks great on most screens, from large desktop monitors to high resolution phones. In some cases, you might not want to have all your images on the page at 2X because the page load will increase. For instance, you might want to reduce the resolution of background images because they’re big in size but you don’t need them super crisp.
By selecting the layer you want to optimize inside of Figma, you can then go to the right-hand panel and at the bottom, press the + to set your Export settings. Here you can choose 2 things: Your resolution and image type. We will ignore the Suffix, so you can leave that blank. Also, we only support JPG and PNG export settings. If you choose PDF or SVG, we will ignore it.
JPGs are typically smaller than PNGs in file size but they don’t include an alpha channel so if there’s something peeking behind it or it is semi-transparent, you should use PNG. We support any Export resolutions you want to use. For instance you can use 0.5X to reduce the image size by a quarter or use 4X to actually increase the size but make it look super high-res (only if the original image you added to Figma is high-res enough of course).
Some things to keep in mind:
You will need to apply these export settings to all images you want optimized regardless of what frame / device view you’re using. You might want a background image in Desktop to be 1X but it might not look quite right on mobile that way so your mileage may vary. So be sure to do this in all layers of frames you’re importing into Quest.
Also, if an image has multiple export settings, we will only take the top one in the stack.
Sometimes you might have a design with tons of small images or you just have a collage type image grouping that you want to combine into 1 image. You can do this by adding Export settings to the group or frame in Figma that contains those images. This is a good way to reduce image size because for instance if things are overlapping, you won’t be saving image data for the parts of the image you can’t see. But also, the less things the page has to load, the faster the page will load in the browser so it's a good idea to combine things where necessary.
Just remember that when you create an image out of a group, you will lose that individual control of those elements in the group when it is brought into Quest.