Creating Optimized Web Graphics (2016)
42mIntermediate2016-05-06
Authors
Brian Wood
Web Developer, Author, and Trainer
Course details
Creating graphics is easy. But creating optimized web graphics that download quickly and look great on a variety of devices can be a chore. Learn the best file formats and production techniques to get great looking graphics every time, in this course with Brian Wood. Discover how compression affects image quality; learn the pros and cons of vectors vs. raster images, and JPGs over PNGs and GIFs; and find out how to optimize images for Retina displays.
These tutorials use programs like Photoshop, Illustrator, and Sketch, but the tips apply equally well to any other graphics software.
These tutorials use programs like Photoshop, Illustrator, and Sketch, but the tips apply equally well to any other graphics software.
Skills covered
SketchBohemianWeb GraphicsWeb DesignPhotoshopProjectAdobe
Concepts
0. Introduction
- 01 - Welcome
- 02 - About the lesson files
1. Web Graphics Optimization
- 03 - Understanding web graphic types
- 04 - Understanding image compression
- 05 - Picking the right web image format
- 06 - Vector versus raster images
- 07 - Optimizing raster images
- 08 - Using the right image size (aka dimensions)
- 09 - Options for JPEG optimization
- 10 - Options for PNG and GIF optimization
- 11 - Understanding SVG export options
- 12 - Optimizing Retina images further
- 13 - Optimizing images further
Conclusion
- 14 - Goodbye