New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

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

Preparing images for the web

From: Photoshop Elements 8 for Windows Essential Training

Video: Preparing images for the web

If you're planning to put a photograph on a website, a blog or elsewhere online, it's important that you save it in the correct format and make it as small as possible so that it's fast to download at the viewers end. Elements' Editor provides a special interface where you can do just that. It's the Save for Web workspace. So say that I have edited this file and I'm ready to save it so that I can put it on the web. I'll go up to the File menu and instead of choosing Save or Save As, I'll choose Save for Web.

Preparing images for the web

If you're planning to put a photograph on a website, a blog or elsewhere online, it's important that you save it in the correct format and make it as small as possible so that it's fast to download at the viewers end. Elements' Editor provides a special interface where you can do just that. It's the Save for Web workspace. So say that I have edited this file and I'm ready to save it so that I can put it on the web. I'll go up to the File menu and instead of choosing Save or Save As, I'll choose Save for Web.

That opens the Save for Web workspace. Here on the left side of this workspace, I can see the original photo and over on the right, I can see how the photo will look with the compression settings way over here in the right-hand column. As I vary those compression settings, the preview here on the right will change, and down at the bottom left of the preview is a report of the file size, which will also change as I change the Compression Settings. There is also an estimate of how long the file would take to download at a particular size but I'd suggest do not pay attention to those numbers because they depend on so many factors that you just can't control about what's going on, on the Internet on a particular day and what kind of web browser your viewers are using, so that's really not an accurate report.

The first thing I'll do in the Save for Web workspace is go to the Format field right here and click the arrow and choose the Format in which I want to save this file. Because this is a photograph, the best choice is JPEG, which stands for Joint Photographic Experts Group. JPEG is a format that's made especially for compressing photographs. When I'm working with JPEG format, the most important setting is the Quality setting, which I can control from this slider or from the Presets here in this menu.

I am going to start with the Presets. I'll see how the image looks with a low quality setting by choosing Low from this menu. A low quality setting means that there is lots of compression. The more I compress the photo, the smaller the file size will be but the photo probably won't look its best. The less I compress the photo, the bigger the file size will be but the better the photo will look. I am going to zoom in a little so you can get a better view of the photo quality, by selecting the Zoom tool from the left side of the Save for Web window, and then clicking inside of the Optimize Preview on the right.

Now you can see that there are some artifacts here, which are consequence of compressing in the JPEG format. In order to try to reduce those artifacts, I'll go back to the Quality Preset menu and I'll choose Medium. I think the file may be acceptable looking here. Notice that down in the file size area I'm told that I have a 13.35K file and before I accept these settings, I'm going to just see how the file looks and what the size is with a High preset. Now the image looks good but the file size is really increased to 26.09K.

If I want to get the file size down and still have the image look good, I'll go to the Quality menu and click the arrow there and then I'm going to drag the slider slightly to the left. Maybe I'll put it at about 50, which is in between the medium and high quality presets, and then I'll click in a blank area here to close that slider. Now it managed to reduce the file size to 19.47K and I think that the image looks good even zoomed in like this. I'll zoom back out by holding the Alt key on my keyboard and clicking a couple of times, until the image is back to 100% as reported right down here in the zoom field.

I'm happy with the appearance and with the file size. So I'll stick with that quality decision. I'm going to leave all the other settings at their defaults but I do want to mention this one, ICC Profile. ICC Profiles are part of Elements Color Management System. I've touched on Color Management in earlier movies. This is just another piece of managing color in your files. If you think that your viewers will be using a web browser like Safari, for example, that can read an ICC Profile, then you might want to check this box, but notice that when I check this box, the file size does go up.

It was around 19 kilobytes and now it's over 22 kilobytes. So if you think your viewers are likely to be using a color managed web browser and you can accommodate the increased file size, then you may want to leave this ICC Profile box checked, and more and more web browsers are able to read color profiles as time goes on. So I'm going to leave that box checked for now, and there is one more area here that I want to bring to your attention and that is the Image Size area here. If you really need to get your file size down, the only other way to do it here in the Save for Web window is to reduce the physical dimensions of the file.

So let's say that I came to the Width field and typed in 300 pixels instead of 306, which is just a slight change in file size and by the way, the Height changes proportionally because Constrain Proportions is checked, and then I click the Apply button. I have reduced the file size slightly, along with the physical dimensions of the file. There is a Preview area down here which I can use to preview the file in whatever web browser is on my computer but I'm just going to go ahead and save it with these settings for now by clicking OK.

In a Save Optimized As dialog box, I'll choose a location. I'll just leave it at the default. I'll make sure the file has the name that I wanted to have and then I'll make sure that Save as type is set to Images Only and I'll click Save. That takes me back to the Editor, where I have my original photo. Since I haven't made any additional changes to the original, I can just close that by clicking the X and I don't want to save that, but if I had made more changes to the original, I would be sure to save it with those changes at that point.

So the next time that you are preparing a photograph for the web, don't just go to File > Save As and save it as a JPEG from there. Instead I suggest you use the Save for Web workspace to make your photo look as good as it can be and be as small as it can be for online viewing.

Show transcript

This video is part of

Image for Photoshop Elements 8 for Windows Essential Training
Photoshop Elements 8 for Windows Essential Training

106 video lessons · 8458 viewers

Jan Kabili
Author

 
Expand all | Collapse all
  1. 10m 20s
    1. Welcome
      1m 13s
    2. Using the exercise files
      1m 35s
    3. Launching the Welcome screen
      3m 12s
    4. Touring Elements
      4m 20s
  2. 29m 45s
    1. Working with catalogs
      3m 16s
    2. Getting photos from your hard drive
      2m 49s
    3. Changing thumbnail display options
      4m 35s
    4. Getting photos from a camera or card
      9m 43s
    5. Getting photos from a CD/DVD or an external drive
      4m 46s
    6. Getting photos from a scanner
      4m 36s
  3. 43m 15s
    1. Touring the Organizer interface
      5m 44s
    2. Viewing photos
      5m 11s
    3. Selecting photos
      2m 58s
    4. Rotating photos
      2m 39s
    5. Renaming photos
      2m 7s
    6. Fixing photo dates
      2m 0s
    7. Hiding and deleting photos
      5m 24s
    8. Stacking photos
      8m 9s
    9. Moving files
      4m 43s
    10. Backing up catalogs
      4m 20s
  4. 52m 4s
    1. Applying keyword tags
      8m 33s
    2. Finding photos by keyword tags
      3m 41s
    3. Finding photos with the Keyword Tag Cloud
      1m 56s
    4. Applying Smart Tags
      4m 29s
    5. Automatically tagging people in photos
      7m 54s
    6. Applying star ratings
      2m 48s
    7. Organizing photos in albums
      4m 10s
    8. Organizing photos in Smart Albums
      6m 44s
    9. Finding photos with Text Search
      4m 31s
    10. Finding photos from the Find menu
      5m 10s
    11. Finding photos in the Timeline
      2m 8s
  5. 29m 18s
    1. Working with photos in Full Screen view
      11m 12s
    2. Viewing slideshows in Full Screen view
      4m 10s
    3. Comparing photos
      5m 22s
    4. Using Date View
      3m 41s
    5. Mapping photos
      4m 53s
  6. 56m 46s
    1. Applying Photo Fix options in the Organizer
      8m 22s
    2. Touring the Quick Fix workspace in the Editor
      6m 12s
    3. Applying Quick Fix controls
      11m 10s
    4. Using Quick Fix tools
      11m 2s
    5. Working in Guided Edit in the Editor
      4m 45s
    6. Fixing group shots in Guided Edit
      5m 57s
    7. Applying the Scene Cleaner in Guided Edit
      9m 18s
  7. 1h 12m
    1. Touring the Full Edit interface
      5m 5s
    2. Opening files in Full Edit
      2m 13s
    3. Working with tabbed documents
      6m 57s
    4. Using tools
      6m 11s
    5. Setting editing preferences
      4m 22s
    6. Adjusting color settings
      4m 18s
    7. Using Undo History
      5m 56s
    8. Zooming and navigating
      6m 30s
    9. Creating a blank file
      5m 58s
    10. Photo resizing and resolution
      9m 59s
    11. Using the Recompose tool
      3m 8s
    12. Enlarging the canvas
      3m 49s
    13. Saving files
      7m 47s
  8. 17m 36s
    1. Understanding layers
      3m 28s
    2. Working in the Layers panel
      4m 51s
    3. Combining images with layer masks
      9m 17s
  9. 19m 54s
    1. Understanding selections
      2m 27s
    2. Manual selection tools
      7m 6s
    3. Automatic selection tools
      6m 27s
    4. Modifying and saving selections
      3m 54s
  10. 1h 0m
    1. Cropping and straightening
      3m 49s
    2. Applying a Shadows/Highlights adjustment
      2m 54s
    3. Applying adjustment layers
      7m 53s
    4. Adding a Levels adjustment layer
      4m 12s
    5. Merging multiple exposures
      6m 33s
    6. Adding a Hue/Saturation adjustment layer
      3m 54s
    7. Adjusting with Color Curves
      3m 39s
    8. Removing a color cast
      3m 21s
    9. Correcting skin tone
      2m 34s
    10. Reducing digital noise
      4m 4s
    11. Sharpening photos
      7m 42s
    12. Working with raw photos
      9m 52s
  11. 24m 50s
    1. Using the Smart Brush tool
      7m 52s
    2. Using the Detail Smart Brush tool
      4m 26s
    3. Dodging and burning
      2m 18s
    4. Healing wrinkles and blemishes
      5m 17s
    5. Removing content with the Clone Stamp tool
      3m 41s
    6. Removing red-eye
      1m 16s
  12. 31m 3s
    1. Applying filters
      5m 8s
    2. Adding effects
      3m 16s
    3. Running automated actions
      1m 51s
    4. Using layer styles
      6m 6s
    5. Using shapes
      8m 12s
    6. Using the Cookie Cutter tool
      3m 13s
    7. Converting color to black and white
      3m 17s
  13. 9m 29s
    1. Creating text
      5m 8s
    2. Editing text
      2m 59s
    3. Warping text
      1m 22s
  14. 38m 50s
    1. Making a photo book
      8m 26s
    2. Making a photo collage
      9m 0s
    3. Creating a slideshow
      11m 25s
    4. Stitching a photo panorama
      4m 3s
    5. Preparing images for the web
      5m 56s
  15. 33m 54s
    1. Printing photos
      2m 58s
    2. Printing contact sheets and picture packages
      4m 58s
    3. Sending photos by email and Photo Mail
      5m 57s
    4. Burning photos to CD/DVD
      1m 17s
    5. Ordering prints and books
      1m 59s
    6. Signing up for Photoshop.com
      3m 15s
    7. Sharing photos online at Photoshop.com
      7m 40s
    8. Backing up and synchronizing online
      3m 40s
    9. Getting inspiration from Adobe.com
      2m 10s
  16. 26s
    1. Goodbye
      26s

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

Are you sure you want to delete this note?

No

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.