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

Saving for the web

From: Photoshop Elements 6 for Mac Essential Training

Video: Saving for the web

Images that you would like to post on the web must be smaller in file size in order to load quickly into a browser. Depending on how large you shot the images and in what file format, you may need to save web versions of them by lowering their resolution value and saving them in a compressed format, such as JPEG. You can do this using the Save for Web feature in Element 6. Here is how it works. I currently have an image open from our catalog images folder in our exercise files. It's the Enzo's_new_car_02 image. You will notice here down at the bottom of the document window the document dimensions are being displayed. And this is a very large image, its 10.8 inches x 14.4 inches, at a 180 ppi. So we have a lot of room to work with here.

Saving for the web

Images that you would like to post on the web must be smaller in file size in order to load quickly into a browser. Depending on how large you shot the images and in what file format, you may need to save web versions of them by lowering their resolution value and saving them in a compressed format, such as JPEG. You can do this using the Save for Web feature in Element 6. Here is how it works. I currently have an image open from our catalog images folder in our exercise files. It's the Enzo's_new_car_02 image. You will notice here down at the bottom of the document window the document dimensions are being displayed. And this is a very large image, its 10.8 inches x 14.4 inches, at a 180 ppi. So we have a lot of room to work with here.

We want to save a web version of this particular image. So we know that we need to make it smaller and we need to lower its resolution and save it in a compressed format so that it will download quickly into a browser when we post it on the web. So we can do all this using the Save for Web feature. Let's take a look. We will go under the File menu and choose Save for Web. That brings up the Save for Web dialog box. Now, because the image is so big in both of our Preview areas here, the before or the original and the after, which is the compressed version, it's really, really large. So we have to actually scroll over to actually see the image. There is my son Enzo and that great expression on his face.

Unfortunately this is too large, so the first thing I want to do is change the size of the image. Now, over here on the right we have the New Size settings. It is showing us the current pixel dimensions. We want to reduce it. I'm going to go ahead and reduce the Percentage down to about 20% of its original size. Now we have 389 pixels x 518, in width and height, and that's way more manageable than what we had in there before. So let's go ahead and click Apply. Of course, we want to Constrain Proportions, because we don't want to scale the image disproportionally when we're doing this.

Click Apply, and we're now getting a proper preview of the new size. Now, you will notice the image on the left still looks great. On the right, it's looking very pixelated and over compressed and that's because of the settings that we have chosen up here. Now, of course you can choose from JPEG or GIF, and notice what it says at the top of this dialog box, this is helpful information. It says, "Save an image to include in a Web page. Save photographs as JPEG and images with limited colors as GIF." So generally web graphics are saved as GIF; things like buttons and small pieces of artwork are saved as GIF. Photographs are generally saved as JPEG in order to maintain a better quality.

So the image preview shows how your image will look using the current settings, and that's what we're referring to here. So this JPEG setting is what we should use, but its a little too low because there is also Medium, High, Very High, and Maximum. Rather than going straight to these lists over here and entering Quality settings, we can just go straight to the Preset list right here. This is usually where I start, and I go straight to JPEG High, and I take a look. Now that's looking a lot better than JPEG Low, as you can see. It has a quality of 60.

The next thing we need to look for is this information down here, because this is telling us how large the new image is going to be when we click OK to save this, and its now 40K at these settings, it was 590K, so that's a huge jump. Nice, small file size. It's also telling us the approximate download time on a really slow dial-up connection, 28.8K bits per second. Now, very few people are using this type of dial-up connection anymore, most people are using a broadband connection, usually cable modem or DSL, in which case this would have no problem downloading.

So we have got a little bit of room to play with here. I think we can increase the Quality setting by either dragging this slider to the right or by choosing Very High or Maximum from this list over here, and that's going to up the download time a little bit, listed down here. 26 seconds now. I still don't think that's a problem. It's almost 70K. That's still very, very small. Using these settings I think we're good to go. We're going to save it as a Very High JPEG, using 80 Quality, based on the preview that I'm getting here in the dialog box, zoomed in at 100%, I would say that we save this properly for the web.

If you're really not sure you can preview in your default browser; mine is Firefox 3, we will go ahead and click this button down here in order to display the image. Here it is. We're getting a quick preview of what this is going to look like on the browser, and it's giving us information about it as well. JPEG, the size and dimensions, the file size, and then the settings that wejust chose. I think that's looking great, and all we need to do now is just click OK. When we do that it's going to say, hey, where do you want to save this? I think for now I'm just going to save this to my Desktop. We can use the exact same name if we want or we can maybe add something like web so that we know that this is the web version of that file, and then click Save.

Here is our original image here. If I want to open up the other image, I can choose it here, Enzo's_new_car_02_web. Open it up, and we can see our document dimensions. 5.4 inches x 7.194 inches at 72 ppi. So it saved it at the proper resolution for display on the web, which is 72 pixels per inch, and it used those sizing dimensions that we applied in the Save for Web dialog box.

Show transcript

This video is part of

Image for Photoshop Elements 6 for Mac Essential Training
Photoshop Elements 6 for Mac Essential Training

84 video lessons · 5402 viewers

Ted LoCascio
Author

 
Expand all | Collapse all
  1. 2m 22s
    1. Welcome
      1m 2s
    2. Using the example files
      1m 20s
  2. 12m 1s
    1. Understanding Photoshop Elements
      2m 10s
    2. Using the Welcome screen
      2m 33s
    3. Importing photos from a digital camera
      7m 18s
  3. 1h 1m
    1. Viewing and selecting images
      2m 1s
    2. Creating and saving a custom workspace
      5m 29s
    3. Rotating images in Bridge
      3m 20s
    4. Renaming images in Bridge
      5m 34s
    5. Adding keywords to images
      7m 38s
    6. Applying ratings to images
      5m 17s
    7. Labeling images
      5m 17s
    8. Searching for images
      6m 38s
    9. Creating Collections
      2m 50s
    10. Sorting images with the Filter panel
      6m 36s
    11. Using image stacks
      7m 2s
    12. Hiding images
      4m 6s
  4. 31m 55s
    1. Opening images from Bridge
      2m 24s
    2. Working with palettes and the Palette Bin
      4m 53s
    3. Using the Project Bin
      6m 44s
    4. Zooming and scrolling
      8m 1s
    5. Fixing mistakes with Undo and Redo
      5m 3s
    6. Saving versions
      4m 50s
  5. 49m 38s
    1. Opening and viewing images in the Quick Fix mode
      6m 8s
    2. Understanding Auto Color and making tonal adjustments
      8m 50s
    3. Using the Lighting sliders
      5m 19s
    4. Using the Color sliders
      7m 1s
    5. Applying Auto Red Eye Fix
      3m 31s
    6. Applying Auto Sharpen
      4m 25s
    7. Using the Guided Edit mode
      6m 19s
    8. Processing multiple files
      8m 5s
  6. 10m 22s
    1. Understanding image resolution
      3m 23s
    2. Resizing images
      6m 59s
  7. 17m 8s
    1. Applying Auto Crop and Auto Straighten
      6m 22s
    2. Using the Straighten and Crop tools
      4m 10s
    3. Changing the canvas size
      6m 36s
  8. 30m 32s
    1. Why make selections?
      6m 3s
    2. Using the Quick Selection tool
      8m 37s
    3. Using Refine Edge
      7m 15s
    4. Saving and loading selections
      8m 37s
  9. 25m 58s
    1. Working with the Layers palette
      9m 45s
    2. Using adjustment layers and masks
      8m 37s
    3. Applying transparency and blend mode adjustments
      7m 36s
  10. 40m 56s
    1. Removing a color cast
      5m 53s
    2. Correcting skin tone
      3m 38s
    3. Enhancing color with Hue/Saturation adjustments
      6m 37s
    4. Balancing contrast and color with Levels adjustments
      7m 10s
    5. Correcting dark or light areas with Shadow/Highlight Adjustments
      5m 17s
    6. Improving images with Color Curves adjustments
      5m 55s
    7. Converting color images to black and white
      6m 26s
  11. 54m 14s
    1. Using the Red-Eye Removal tool
      8m 1s
    2. Using the healing tools
      7m 42s
    3. Whitening teeth and eyes
      6m 20s
    4. Cloning to remove contents
      8m 14s
    5. Adjusting perspective and correcting camera distortion
      6m 10s
    6. Using Photomerge Group Shot
      6m 17s
    7. Using Photomerge Faces
      6m 4s
    8. Using Photomerge Panorama
      5m 26s
  12. 16m 1s
    1. Creating a clipping mask
      7m 25s
    2. Creating collages with gradient blending
      8m 36s
  13. 22m 15s
    1. Reducing noise
      8m 7s
    2. Sharpening with Unsharp Mask
      7m 16s
    3. Sharpening with Adjust Sharpness
      6m 52s
  14. 17m 54s
    1. Understanding Camera Raw
      1m 46s
    2. Opening Camera Raw images from Bridge
      6m 37s
    3. Applying tonal and color adjustments in Camera Raw
      6m 23s
    4. Saving raw images
      3m 8s
  15. 40m 41s
    1. Painting with the Filter Gallery
      8m 7s
    2. Creating a pencil sketch
      7m 40s
    3. Customizing images
      7m 59s
    4. Adding artwork with the Content palette
      9m 39s
    5. Building and saving a multi-page photo creation
      7m 16s
  16. 37m 5s
    1. Creating a slideshow
      6m 58s
    2. Creating a photo book
      9m 1s
    3. Creating a photo collage
      6m 58s
    4. Creating a greeting card
      6m 31s
    5. Creating a web photo gallery
      7m 37s
  17. 31m 6s
    1. Choosing color settings
      7m 1s
    2. Printing to an inkjet printer
      8m 13s
    3. Using Picture Package
      4m 33s
    4. Saving for the web
      5m 55s
    5. Attaching images to emails
      3m 6s
    6. Burning to CDs and DVDs
      2m 18s
  18. 56s
    1. Goodbye
      56s

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.

Join now "Already a member? Log in

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 Elements 6 for Mac Essential Training.

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 preferencesfrom 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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.