In this Creating Optimized Web Graphics tutorial you’ll explore compressing images as PNG or GIF using lossless compression. In this tutorial, we’ll focus on PNG optimization and explore the most widely used settings like color tables and transparency. We’ll also discuss the differences between PNG-8 and PNG-24.
- View Offline
- [Voiceover] In this video, we're gonna look at PNG.…Now this is gonna cover just a teeny bit of GIF as well,…because we're gonna talk about lossless compression,…but I also want to dive into PNG-8 versus PNG-24,…and kinda where you draw the line with that,…and a decent example for a PNG-8…and a decent example for a PNG-24.…So if you wanna open up an image…in your image editing application,…I happen to have Photoshop here,…you can use any program,…I have a file open in here that is a good example of…a GIF or a PNG or something like that.…
The reason why, it doesn't have millions of colors in it.…Right now it doesn't have that much…in the way of gradients in it,…it actually has some sharper edges on it,…it also has a drop shadow,…and if you look at the checkerboard,…or however you look at it in your program,…if it needs to be transparent or see-through…around maybe even inside somewhere,…you're not gonna use JPG.…JPG cannot have transparencies,…so we've gotta pick another method,…another file format to work with.…
These tutorials use programs like Photoshop, Illustrator, and Sketch, but the tips apply equally well to any other graphics software.