Interactive
Exporting Assets from Sketch: Proper Naming Conventions and Optimizing your Assets
BizLibrary
Updated Sep 04, 2018Once you export your files and have named them accurately, what is the best method to optimize them for fast load render on the web? One thing that is important to understand is Sketch does not optimize your assets. Saving out a masthead image with heavy photography will result in a file size larger than 1MB. Typically, for assets on the web, you want to be well under 1MB to ensure fast speed load. You can optimize your assets using a varying of techniques. You can use an alternative program to drag your newly created asset in and reduce the file size that way, or you can visit tinypng.com that will dramatically down sample your bitmap to ensure fast page load. An alternative that can also be done is exporting vectors as SVG. A Scalable Vector Graphic is actually an image that is created using an exact formula and exists in code. Exporting an icon, for example, as an SVG will allow you to scale up that tiny icon and still maintain the same proportions and "hard line" that vectors grant. Lastly, the best method to get in the habit is the following naming convention when exporting assets: type-item(-variant).format. For example, a Facebook icon would be icon-facebook-blue.png.
