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

Saving for the web

From: Photoshop Elements 8 for Mac Essential Training

Video: Saving for the web

If you're planning on putting a photograph on a website, a blog or elsewhere online, it's important that you save the photo in the correct format, usually, the JPEG format, and make it as small as possible but with the kind of photo quality that you wanted to have, so that it's fast to download at the viewers end but on the other hand, so that it still looks good. And those two qualities, small file size on the one hand, and acceptable photo quality on the other, are always a trade-off when you're preparing an image for the web. Elements' Full Edit workspace provides a special interface where you can prepare an image for the web.

Saving for the web

If you're planning on putting a photograph on a website, a blog or elsewhere online, it's important that you save the photo in the correct format, usually, the JPEG format, and make it as small as possible but with the kind of photo quality that you wanted to have, so that it's fast to download at the viewers end but on the other hand, so that it still looks good. And those two qualities, small file size on the one hand, and acceptable photo quality on the other, are always a trade-off when you're preparing an image for the web. Elements' Full Edit workspace provides a special interface where you can prepare an image for the web.

It's called the Save for Web workspace. To access that workspace, I'm going to go up to the File menu, after I finished editing my photo and go down to Save for Web. And that opens the photo here in the Save for Web window. On the left is the original photo and on the right is a copy of the photo optimized for the web with whatever settings happen to be over here at the moment. I can use these two views to compare the optimized version with the original, to make sure I'm not degrading the photo quality too much as I try to get the file size down.

Over on the right, the first setting that I'll look at is the format. When I'm working with a photograph, I'll usually want to save it in the JPEG format, which stands for Joint Photographic Experts Group. The most important setting for optimizing in the JPEG format is the Quality setting and there are two ways to change the quality here. One is to come to the Quality slider and just drag it to increase the quality amount but usually, I'll use the Presets over here. If I choose the Low preset, that sets a quality of only 10.

If I choose a Medium preset, I get a quality of 30. High is a quality of 60 and so on. Now the higher I make the quality, the less compressed the image will be when I save it in the JPEG format. And the less compressed that the image is the larger its file size will be and the file size is reported down here at the bottom left of the optimized view of the image. So notice the file size now with the quality of High, if I reduce that quality to Medium, the file size goes down but the trade-off is that the photo quality also goes down.

So that you can see that, I'll put the quality down at Low and you can start to see that the image is breaking up a little in the green area here of the door. It's showing what are called JPEG artifacts, which basically look like square groups of pixels. Now when I'm judging for JPEG artifacts, I want to be at 100% view of the image so that I see it the same way my viewers will when they look at it on a website. And viewing this image at 100%, I can see those artifacts here and over here around the black number.

They are most often visible in areas of high-contrast like this. But just so that you can see them better, I'm going to get the Zoom tool from the abbreviated toolbox on the top- left of the Save for Web window and I'm going to zoom in, in the optimized image so that you can see those squares more clearly. That's what I'm trying to avoid. To go back to 100% view, I'm going to double-click the Zoom tool and to eliminate some of those JPEG artifacts, I am going to increase the photo quality to Medium. If I still see some artifacts as I do here, I might go to the Quality slider and drag it over just a bit, putting it somewhere between medium and high quality.

Now I find the appearance of the photo is acceptable to me and the file size is okay too. But there is no magic number for file size that I can recommend. That depends on a lot of factors, many of which you can't control, like the speed of the Internet on a given day, or the number of other graphics that might be in the pipeline and it also depends on how important photo quality is to you. But just remember that file size is always a trade-off with photo quality when you're compressing a photo as a JPEG for the web. There are just a couple of other settings to look at over here.

One is the ICC Profile setting. ICC profiles are part of a color management system that I explained in an earlier movie on color settings. If you're interested in that subject, you can go back and listen to that movie. But in a nutshell, if you think your viewers will be using a web browser like Apple's Safari, which can read ICC profiles, then I suggest that you check ICC Profile here and that will attach a little bit of textual information to your photograph that will describe to the web browser at your viewers end, how you intended the colors in the image to look.

So, there will be more consistency between the colors that your viewer sees and the colors that you saw while preparing the image for the web, here in Photoshop Elements. However, if you do add an ICC Profile, it will increase the file size. In this case, it increased the file size by about 3 kilobytes. Sometimes that's not worth it if you think your viewers will be using a web browser that can't read ICC profiles. However, I think that in the future, we're going to see more web browsers that can read these profiles. So in general, I recommend that you include an ICC profile with your images for the web.

One more thing to show you in the controls over here is in the Image Size field. Let's say that I decide that 18 kilobytes is just too big and I need to get this file size down lower but I'm not willing to compromise anymore in photo quality. Then what I can do is to reduce the actual dimensions of the file in pixels. So I could come over to the Height field here, select the current height in pixels and type a lower number, say, 250 pixels. Because Constrain Proportions is checked, the width will be reduced proportionately.

Then to apply that change, I am going to click the Apply button. As I do, keep your eye on the file size down here and you see it would be reduced significantly. But at the same time the dimensions of the image are smaller too. So that's all I would do to set up this image for JPEG compression. If I didn't like the result and I wanted to go back to ground zero, I could move my mouse over the Cancel button, holding down the Option key and that would reset all of the settings in this window. But I actually like this result so I am going to click OK and that opens the Save Optimized As dialog box, saving the optimized version of the file in the JPEG format.

At this point, I would navigate to a destination where I wanted to save this file and click Save. So the next time that you're preparing files for the web, don't just go up to the File menu and choose Save As and save another copy as a JPEG. Instead, use the special controls and the previews that you'll find here in the Save for Web window to prepare your images for display on the web.

Show transcript

This video is part of

Image for Photoshop Elements 8 for Mac Essential Training
Photoshop Elements 8 for Mac Essential Training

81 video lessons · 7177 viewers

Jan Kabili
Author

 
Expand all | Collapse all
  1. 2m 35s
    1. Welcome
      1m 18s
    2. Using the exercise files
      1m 17s
  2. 13m 0s
    1. Touring Elements
      7m 24s
    2. Starting from the Welcome screen
      5m 36s
  3. 16m 11s
    1. Importing photos from a camera
      8m 48s
    2. Dividing scanned photos
      3m 52s
    3. Capturing frames from video
      3m 31s
  4. 23m 13s
    1. Touring Bridge CS4
      7m 44s
    2. Opening files from Bridge into Elements
      5m 1s
    3. Rotating photos
      1m 17s
    4. Moving, deleting, and hiding photos
      4m 11s
    5. Renaming photos
      5m 0s
  5. 29m 16s
    1. Tagging photos with keywords
      6m 28s
    2. Rating and labeling photos
      5m 55s
    3. Sorting photos by filter
      6m 23s
    4. Finding photos
      4m 33s
    5. Organizing photos in Collections
      5m 57s
  6. 52m 52s
    1. Touring the Quick Fix workspace in the Editor
      8m 34s
    2. Applying Quick Fix lighting controls
      3m 33s
    3. Applying Quick Fix color controls
      6m 30s
    4. Applying Quick Fix sharpening
      3m 44s
    5. Using Quick Fix touchup tools
      7m 43s
    6. Fixing group shots in Guided Edit
      6m 25s
    7. Merging multiple exposures in Guided Edit
      7m 24s
    8. Applying the Scene Cleaner in Guided Edit
      6m 31s
    9. Running Automated Actions in Guided Edit
      2m 28s
  7. 30m 57s
    1. Touring the Full Edit workspace
      6m 5s
    2. Working with tabbed documents
      4m 28s
    3. Arranging panels
      4m 14s
    4. Using tools
      8m 15s
    5. Setting editing preferences
      3m 8s
    6. Adjusting color settings
      4m 47s
  8. 46m 0s
    1. Using Undo History
      6m 6s
    2. Zooming and navigating
      5m 38s
    3. Creating a blank file
      5m 43s
    4. Photo resizing and resolution
      8m 21s
    5. Enlarging the canvas
      3m 10s
    6. Cropping and straightening an image
      3m 12s
    7. Using the Recompose tool
      3m 23s
    8. Processing multiple files
      6m 16s
    9. Saving and formats
      4m 11s
  9. 23m 25s
    1. Understanding layers
      3m 30s
    2. Working in the Layers panel
      8m 53s
    3. Combining images with layer masks
      11m 2s
  10. 22m 24s
    1. Understanding selections
      3m 39s
    2. Manual selection tools
      7m 36s
    3. Automatic selection tools
      3m 9s
    4. Refining a selection
      3m 59s
    5. Modifying and saving selections
      4m 1s
  11. 55m 51s
    1. Using adjustment layers
      9m 21s
    2. Adding a Levels adjustment layer
      4m 49s
    3. Applying a Shadows/Highlights adjustment
      3m 24s
    4. Adding a Hue/Saturation adjustment layer
      5m 30s
    5. Adjusting with Color Curves
      4m 3s
    6. Removing a color cast
      3m 55s
    7. Correcting skin tone
      2m 10s
    8. Reducing digital noise
      3m 44s
    9. Sharpening photos
      9m 42s
    10. Working with raw photos
      9m 13s
  12. 18m 58s
    1. Using the Smart Brush tool
      5m 20s
    2. Using the Detail Smart Brush tool
      3m 30s
    3. Dodging and burning
      1m 49s
    4. Healing blemishes
      3m 51s
    5. Removing content with the Clone Stamp tool
      3m 15s
    6. Removing red-eye
      1m 13s
  13. 26m 26s
    1. Applying filters
      5m 6s
    2. Adding effects
      3m 0s
    3. Using layer styles
      3m 36s
    4. Using shapes
      8m 25s
    5. Using the Cookie Cutter tool
      2m 54s
    6. Converting color to black and white
      3m 25s
  14. 7m 35s
    1. Creating text
      4m 7s
    2. Editing text
      3m 28s
  15. 27m 26s
    1. Making a photo collage
      7m 15s
    2. Stitching a photo panorama
      3m 43s
    3. Saving for the web
      6m 40s
    4. Creating web galleries in Bridge
      6m 47s
    5. Creating a PDF slideshow
      3m 1s
  16. 4m 34s
    1. Printing photos and contact sheets
      2m 49s
    2. Sending photos by mail
      1m 45s
  17. 23s
    1. Goodbye
      23s

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