From the course: Photoshop for Teaching and Learning

Exporting images for the web

From the course: Photoshop for Teaching and Learning

Start my 1-month free trial

Exporting images for the web

“

- [Narrator] Let's explore Photoshop's exporting and compression tools that are most helpful for teaching and learning. Now the first is the Legacy Save for Web tool and it's located up here under the file menu, Export, Save for Web Legacy. On the left is a preview of your image and you can click and drag to pan around the image to get a better look. You can also use the keyboard shortcuts of command or control plus and minus to zoom in and out. You can choose between the original image as it currently appears in Photoshop, the Optimized or "one up" tab, which shows you how the current settings over here on the right are going to impact your image, and then there's the two up and four up view which lets you view multiple compression and export options all at the same time so you can evaluate which settings are going to be the right compromise for your image. Now for teaching and learning, the Optimized view is going to be the most helpful, as it gives us the best view of our image. Image compression is always a balancing act between the image quality and the file size. If you look in the lower left of our preview, Photoshop tells us the current projected size for this image using the settings that are over here on the right. At the top of the settings panel are some presets that you may find helpful as good starting points. I'll select the JPEG High settings. Now this next drop-down lets you select one of the primary image types and as a general rule of thumb, you'll want to choose JPEG for all of your photographic images, PNGs if you need parts of your image to be transparent, and GIFs if you're making one of those animated GIFs. I'll leave this image set to JPEG. This next drop-down just changes the quality setting located here. In the Save for Web window, the JPEG's maximum quality setting is 100, but, elsewhere in Photoshop, you may remember that JPEG compression was on a scale of one to 12. This is one of those little inconsistencies that's creeped in over time, and this is one of the few places that you're still seeing this quality scale. Now rather than go through all of the options that are available for all of the different image types, now these are the settings that you're going to find most helpful when using JPEG compression. Leave the Progressive option unchecked. This would make your image load just a little bit better on very slow dial-up modem-speed connections and they're pretty rare these days. Then, leave Optimized on. The Embed Color Profile option should be off but make sure that Convert to sRGB is checked. Now this will convert the colors in your image to the sRGB color space, which is the default color space used by the vast majority of smart phones and pretty much all web browsers on all platforms at this point. This is one setting that will make a really big difference in the look of your final image, and since we're going to be converting your image to the sRGB color space, there's really no need to embed that color profile as well. It will just take up more space. Now for quality, you'll probably want this setting to always be between 80 and 100, and in the Save for Web tool, at that quality level, you won't need to worry about the Blur setting so you can leave that set to zero. Now for teaching and learning, we generally want to have the highest quality that we can get that keeps a reasonable file size for our target audience and, in general, if your target compression settings are showing more than a megabyte as mine are here, then you'll know that something is still not quite right, and one of the biggest contributing factors to oversized images is the actual pixel dimensions of the image itself, which you can see down here. Always check this area and make sure that the image you're exporting is at an appropriate pixel dimension for your specific needs. I'll reduce the size of this image down to a maximum width of 600 pixels. Then when you find the compression settings that you're happy with, click the Save button, give your file a web-friendly name that has no spaces or special characters in it, and then save your image to your drive.

Contents