Exporting Assets: 1x & 2x JPEG

Topics covered in this Sketch tutorial:

Exporting as JPEG, Properly setting JPEG quality

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to export low-res and hi-res JPEGs (1x and 2x).

Making Photos Exportable

1. In Sketch, go to File > Open Local Document.
2. Navigate into Desktop > Class Files > Sketch Class > iTastify and double–click on iTastify Ready for Export JPEG.sketch to open it.
3. Scroll down to the Rate What You Ate section.
4. There are three photos we want to export. On the artboard, click on the background photo in the Rate What You Ate section to select it.
5. Below that, Shift–click the angled iPhone mockup to add it to the selection.
6. Scroll down to the Start Remembering Now section.
7. Shift–click the background photo for the Start Remembering Now section.

8. Three photos should now be selected, and you should see their corresponding folders highlighted in the Sidebar:

   • ratings-bg
   • iphone-isometric-view
   • call-to-action-bg
9. In the Inspector, click Make Exportable.
10. Set the Format to JPG.
11. in the Inspector’s Export section, check on Trim transparent pixels.
12. We need both 1x and 2x (low-res and hi-res), so in the Inspector’s Export section, to the far right of Presets click the plus button to add a new export size.

13. Set the Format of the 2x to JPG.

    TIP: In place of the 1x or 2x size, you can enter a specific width or height (such as 250w or 300h). That can be useful for creating multiple versions of an asset, such as thumbnails.

Exporting & JPEG Quality

Even though a 2x image has more pixels than a 1x image, it will occupy the same amount of space within the webpage as the 1x image. This means the pixels of the 2x image end up being smaller (half the size). Therefore any compression artifacts in a 2x image will end up being smaller than they are at 1x.

This means you can (and should) compress a 2x image more than a 1x. You can even use settings that would be unacceptable for a 1x image. If you are compressing 2x images at the same quality as 1x, you are wasting file size and a user’s time! Unfortunately, Sketch exports all JPEGs at the same quality. That means we’ll have to do two exports:

• An export for 1x size at higher quality.
• An export for 2x size at lower quality.

We will then combine the results of both exports to get the ideal compression for both 1x and 2x files.

1. With the three photos still selected, at the bottom right of the Inspector, click the Export Selected button.

2. Set the following (you may need to click the Options button to see them):

   • JPG Quality: 60%
   • Progressive JPG and Save for web should be checked.
3. Navigate into Desktop > Class Files > Sketch Class > iTastify > assets-for-developer > JPEG - 1x Quality.

4. Click Export.

   NOTE: Sketch does not have a way to preview JPEG quality before exporting. The settings we use in this exercise are a good starting point, but be sure to preview the final JPEGs once they’ve been exported. Look at their visual quality and file size. If needed, come back to Sketch and re-export with a different quality.

Exporting at 2x Quality

1. With the three photos still selected, at the bottom right of the Inspector, again click the Export Selected button.

2. Set the following (you may need to click the Options button to see them):

   • JPG Quality: 35%
   • Progressive JPG and Save for web should be checked.
3. We need to switch to the 2x folder now. Navigate into Desktop > Class Files > Sketch Class > iTastify > assets-for-developer > JPEG - 2x Quality.

4. Click Export.

Merging the Exported Assets

1. Keep Sketch open and switch to the Finder (the Desktop).
2. Navigate to Class Files > Sketch Class > iTastify > assets-for-developer.
3. So that we can compare file sizes, switch to List view by hitting Cmd–2 (or choosing View > As List).
4. Expand both folders (JPEG - 1x Quality and JPEG - 2x Quality) so we can compare the files in them.
5. In the 2x Quality folder, notice that call-to-action-bg@2x.jpg is around 58 KB.
6. In the 1x Quality folder, notice that call-to-action-bg@2x.jpg is around 136 KB. See how much smaller the 2x file can be when properly compressed!

7. The @2x files in the 2x Quality folder are properly compressed. We need to move them into the 1x Quality folder, replacing the large versions there.

   In the JPEG - 2x Quality folder, select the three @2x files (which are listed below). Use Cmd–click to add files to your selection.

   • call-to-action-bg@2x.jpg
   • iphone-isometric-view@2x.jpg
   • ratings-bg@2x.jpg
8. Drag the selected files into the JPEG - 1x Quality folder.

9. When asked if you want to replace call-to-action-bg@2x.jpg, check Apply to All, and click Replace.

   Now all the files in the 1x Quality folder are properly compressed.

10. Select the remaining three files in the JPEG - 2x Quality folder.

11. These files are over compressed, so let’s delete them. Hit Cmd–Delete to throw the files in the Trash.

    The JPEG - 2x Quality folder should now be empty.

12. Select all the JPEGs in the JPEG - 1x Quality folder.
13. Drag the selected files out of that folder and drop them into the parent assets-for-developer folder.

14. Keep the two empty JPEG folders, in case we need to export more JPEGs later.

    While the 2x JPEGs are still larger than the 1x JPEGs (which is to be expected), the difference is not as extreme.

Optional Bonus: Being Smart About Transparency

1. Return to Sketch.

2. Near the bottom of the artboard find the three photos of people.

   Circular photos on this kind of a background pose an interesting challenge. Photos are best exported as JPEG, however JPEG does not support transparency. PNG-24 does support transparency, but the file size would be a lot larger than JPEG. The best way to balance quality and file size is to export rectangular JPEGs. The web developer can then use CSS (border-radius) to create the circle mask when coding the webpage.

   Knowing this, when we created these masks in Sketch, we made them with rounded rectangles instead of circles. This will let us temporarily remove the rounded corners (to get a rectangle again) and then export as JPEG.

3. On the artboard, select the photo of Layla Ryan.
4. In the Sidebar, go into the highlighted layla folder and select the Mask layer.

5. We want to select the other masks. In the Sidebar, Cmd–click the Mask in the brad and matthew folders:

   

6. You should now have all three Masks selected. In the Inspector on the right, reduce the Corners setting to 0.

7. Further down in the Inspector, uncheck the Border:

   

8. You should now have three square photos ready to export:

   

9. In the Sidebar, select the layla folder.
10. Cmd–click the brad and matthew folders so that all three are selected.
11. In the Inspector, click Make Exportable.
12. Set the Format to JPG.
13. Set Size to 2x.

14. For Prefix/Suffix type @2x and hit Return to apply it.

    As fewer people use low-res (1x) screens, sometimes developers are including only 2x graphics (especially if they’re well compressed). Of course it would be more optimal to make (and code support for) 1x and 2x, but as fewer people have 1x screens it’s a diminishing audience. For this export we’re only going to use 2x to keep things simpler, but you could always include 1x as well.

15. We want to export only these three selected photos, so at the bottom of the Inspector click the Export Selected button.

16. In the dialog that appears, set the following (you may need to click the Options button to see them):

    • JPG Quality: 35%
    • Progressive JPG and Save for web should be checked.
17. Navigate into Class Files > Sketch Class > iTastify > assets-for-developer.
18. Click Export.
19. Keep Sketch open and switch to the Finder (the Desktop).
20. Navigate to Class Files > Sketch Class > iTastify > assets-for-developer.
21. Click once on layla@2x.jpg to select it.
22. Hit the Spacebar to see a preview of the photo.

23. Hit the Spacebar again to close the preview.

    NOTE: At about 13 KB, this JPEG is much smaller than a PNG would have been.

24. Switch back to Sketch.
25. We should restore the original appearance of the user photos. Click the Mask within the layla folder.
26. Hold Cmd and click on the Mask in both the brad and matthew folders (so you have all three masks selected).
27. In the Inspector, drag the Corners slider all the way to the right.

28. Check the Border back on.

    We like to leave the file looking like our final design would appear. If we need to re-export those JPEGs we can always repeat this process.

29. Save the file and close it.