Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

34. Save for Web (and Devices)

From: Photoshop Top 40

Video: 34. Save for Web (and Devices)

(Music playing) Deke's Photoshop? Deke's Photoshop? Top 40! Feature #34 is Save for Web and Devices, and this is a terrific command if you're preparing JPGs or GIFs or PNG graphics for a website, then you definitely want to be familiar with this command. I use it incessantly these days for my site. And it's much preferable by the way to go into the File menu and choosing the Save As command. Now you can use Save As to save out JPG images and PNG and GIFs and all those guys, but if you do that, then you'll end up with extra image data.

34. Save for Web (and Devices)

(Music playing) Deke's Photoshop? Deke's Photoshop? Top 40! Feature #34 is Save for Web and Devices, and this is a terrific command if you're preparing JPGs or GIFs or PNG graphics for a website, then you definitely want to be familiar with this command. I use it incessantly these days for my site. And it's much preferable by the way to go into the File menu and choosing the Save As command. Now you can use Save As to save out JPG images and PNG and GIFs and all those guys, but if you do that, then you'll end up with extra image data.

So you'll end up with metadata inside your file. You'll end up saving thumbnails, all kinds of stuff that is not useful to an Internet Browser. So you are just increasing the size of the file for no reason whatsoever whereas when you choose Save for Web & Devices, you jettison that extra information. You get the smallest file size possible and you get some additional options. You have Preview options available to you. You can compare different file formats if you want. You can even scale the graphic. So here I am working inside that special Martini Hour artwork. You may recall it from feature #39 layer comps, and this is that helpful image that I created.

How I'm going to get special guest George Lucas on this show. One day going to happen. This image is very large, has a ton layers going on. If you look down here in the lower left corner of the window, I can see that the size of the image is 55.6 megabytes when you take into account all of the layers but even if I were to flatten the image which I would. If I go to JPG, GIF, PNG, none of those file format support layers. I would still get an image that was 5.4 megabytes. So it still takes several minutes to upload to a website. It's also humongous.

We're viewing the image at the 50% view size, so it's actually this big, I'll go ahead and zoom in to 100%. It's huge and there is no way it's going to fit inside of a Web Browser. So what do we do? Well, don't worry about it. Set up your artwork the way you want to set it up. Go ahead and save out your layered composition as a native PSD file and then when you are done, go up to the File menu and choose Save for Web & Devices. You can also press that keyboard shortcut, which is basically mash your fist on the keyboard and press the S key, or if you like Ctrl+Shift+Alt+S, Command+Shift+Option+S on the Mac, and that will bring up this window right here.

Now it's less of a dialog box and more of an independent program running inside of Photoshop. By default, you're going to see the 2-Up display. So you're going to see the original image at top and then you're going to see some compressed version of the graphic at bottom here. Now the first thing that we need to do is scale this graphic down to a reasonable size. It's four times larger than it should be. So I'm going to go ahead and reduce the Height of the graphic to 200 pixels, like so, and that is going to automatically take the Width of the graphic down to 590 pixels, and this is a pretty typical size for the graphics on my website.

It's a blog style site so we have a lot of wide graphics that aren't very tall, just like this. And already, just by virtue of the fact we did that, notice this. I'll go ahead and take that Height value back up to 800 for a moment so that we can see even if we compress this image as a GIF graphic it's still going to be 844K. That is a whoppingly huge graphic. You want graphics that are somewhere in 30 to 100K range. So as soon as I make this graphic smaller, I take it back down to 200 pixels. You'll see now it drops down to 80K. So we're starting and get there now.

Now I'm not sure that GIF is the best format for this graphic, but let's go ahead and zoom in by pressing Ctrl+Plus or Command+Plus on the Mac and I'll go ahead and scroll over just little bit, so that we can see some text and some stars and so on. Now when you use a GIF file format, you are reducing the number of colors in the graphic from a potential 16.8 million or even higher down to 256 Colors at most. And actually that's not having much of a destructive effect on this graphic because we're not taking advantage of the full range of colors. It's a fairly monochrome graphic to start with.

So I could take the number of Colors down in order to reduce the size of the graphics, so notice it's 84K. If I take the number of colors down to, let's try 4 Colors just for a moment, we end up getting this incredibly pixilated artwork. It almost looks like old McPaint art, which I actually think is really cool. But notice we've taken the file size down to 16.82K, so we've really reduced the file size at this point, and here are the four colors that we'll be using. I would say let's take this up to more like let's say 64 Colors and see what happens and this looks pretty darn good.

However, we are ending up with a 55K graphic. It's probably larger than what we need. Now I do want to mention this guy right here, Convert to sRGB. Definitely make sure that's turned on because you do want to convert the colors to sRGB just because that is the most representative color space for the widest range of monitors out there. If you want to get a sense of what the graphic is going to look like on a different platform. For example, you're working on a Macintosh but you know that 99% of people out there are looking at your website and it's more like 85% are working on a Windows machine, you can go ahead and choose Windows to get a sense of what that image will look like on a Windows machine.

I happened to be working on Windows so if I wanted to test things out on a Mac, I would choose a Macintosh Preview and you can see that went ahead and brightened up the graphic, and that's what's going to happen. The graphic is going to typically look brighter on the Mac than it is on a PC. Anyway, I'm just going to go ahead and Preview for now on my Monitor right here. You can also notice this. You can include Copyright and Contact Info in the metadata here inside Photoshop CS4. Now I would suggest at this point we experiment with a few other file formats. We now know that 64 Colors inside of a GIF file is going to get us a 55.63K graphic, fair enough, and that's an estimate by the way.

It may vary a little bit from that. Let's go ahead and switch over to PNG. Now I would recommend PNG over GIF any day of the week. These days, PNG is much more flexible file format than GIF is. It's a more modern file format so some very, very ancient browsers might have problems with it, but anything remotely modern is going to be fine. So if you're thinking of reducing the number of colors, go with PNG-8 over GIF is my recommendation. You can still stick with 64 Colors and all the other settings that we had set before, but notice now we get 50K graphic, and that is because PNG has better compression built into it.

It's lossless compression so you're not modifying the colors of the pixels except for the fact of course you are reducing the colors in the first place. If you don't want to reduce the number of colors at all, you still want to keep your 16.8 million Colors for whatever reason, try PNG-24. Now that is going to give you a bigger file. Notice I'm getting 178.1K file, but this is an uncompressed file, totally uncompressed. I could have Transparency associated with the file, so it's very, very flexible modern format. However, where this file is concerned we're going to get the best result out of good old JPEG.

Now JPG is lossy compression, meaning it rewrites the colors of the pixels. However, all of these guys with the exception of PNG-24 are somehow or other rewriting the colors of the pixels. So might as well try out JPG, see how it fairs, where you're going to see problems with JPG is notice our stars are starting to sort of dither apart right there. They are not as nice and crisp as they were before. Your text might also start breaking up or you're going to see these weird little patterns around the text but what I urge you do in that case is just zoom out.

Ctrl+Minus or Commnad+Minus on the Mac and take a look at it at the 100% view size and decide whether or not the amount of compression that you are applying is going to bug anyone. Now I do think we are applying too much compression. I've got this set to Medium right now or a Quality of 30 and that is pretty darn low. Bear in mind, the Quality goes as high as 100. So 30 is very low quality. We aren't getting a really super little graphic of 23K but I'm going to tell you work High or Very High for your web graphics, if you care about the Quality of the graphics.

I'm going to go ahead and choose High for mine and I will get better stars in the background. I'll also get a larger graphic but it's not too large. It's 39.35K, so we're coming under 40K. I think that's fantastic. Then the next thing you would do is click the Save button, save off your compressed image and then go ahead and upload it to your website. This is the power of feature #34 Save for Web and Devices here inside Photoshop.

Show transcript

This video is part of

Image for Photoshop Top 40
Photoshop Top 40

41 video lessons · 37929 viewers

Deke McClelland
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Photoshop Top 40.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.