A Witcher themed presentation I gave in 2016 on image asset prep across the agency.

1. PREP
YOUR
ASSETS

3. Though they are not warrior mages
who employ powerful magic, witchers
can cast simple magic spells that can
prove effective when used properly.”
“

4. Though they are not graphic designers
who employ powerful exports, developers
can use simple export skills that can
prove effective when used properly.”
“

5. THE SIGNS
(Read: File Formats)
Coming
Soon

7. JOINT PHOTOGRAPHIC EXPERTS GROUP
• Excellent for photograph compression
• Allows compression control on a per-image basis
• Good for:
• Photographs (Including things like masthead backgrounds)
• Small logos on uniform backgrounds (sometimes)

9. PORTABLE NETWORK GRAPHICS
• One Lossless Compression Level
• Supports alpha channel (transparency)
• Choice of 8, or 24 bit (affects both colors
and transparency)
• Good for:
• Photos that require transparency
• Logos and small graphics that require transparency

11. SCALABLE VECTOR GRAPHICS
• A simplified vector (lines/curves instead of pixels) format
• Results in excellent file sizes on vectors
• Supports animation
• Good for:
• Icons/Shapes that either:
1. Contain gradients, or more complex fill/stroke styles
2. Don’t work on icomoon (e.g. some complex compound paths)
• Vector graphics that require animation

13. GRAPHICS INTERCHANGE FORMAT
• Compressed frames that support alpha channel (transparency)
• Allows high range of file sizes due to customizable number of colors
• Can be animated (multiple frames playing in a loop)
• Good for:
• Small raster files with only a couple colors that need transparency
• Dank Memes

15. IT’S LIKE WEBM BUT NOT A MOVIE
• A new image format from Google (actually a company that
Google acquired)
• Not commonly supported in browsers or desktop software yet
• Basically the best things of PNG, JPEG, and GIF combined with
better file sizes.
• Good for (once it is mainstream):
• Pretty much everything that is raster

16. BY THE
NUMBERS

17. OPTIMIZATION
10% 30% 60% 80% 100%
Low Medium High Very High Maximum

18. OPTIMIZATION
50% - 70%
Recommended
Compression Level

19. PROGRESSIVE?
Standard
(Smaller File)
Interlaced
(Larger File)

20. OPTIMIZATION

22. HOW-TO

23. OTHER
TRICKS

24. PSD TO HTML
TECHNOLOGY PREVIEW

25. Q&A