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

Preparing images for the web

From: Photoshop Elements 7 for Windows Essential Training

Video: Preparing images for the web

If you want to put your photographs on a website, it's important that you save them in the correct format and make them as small as possible so that they're fast to download it at the viewer's end. Elements Editor provides a special interface where you can do just that. It's called the Save For Web workspace. I'm working with greendoor.jpg, from the 13_05_web subfolder in the chapter13 exercise files. When I'm ready to save this file, I'll go to the File menu at the top of the screen and I'll choose, not Save or Save As, but rather Save For Web. That's opens the Save For Web workspace. Here on the left I can see the original version of my image, and on the right I can see how the image will look with the compression settings on the right side of the screen applied to it. I can compare these two as I prepare the image for the web. To do that I'm going to move to the controls on the right side of the workspace and the first and most important one is right here.

Preparing images for the web

If you want to put your photographs on a website, it's important that you save them in the correct format and make them as small as possible so that they're fast to download it at the viewer's end. Elements Editor provides a special interface where you can do just that. It's called the Save For Web workspace. I'm working with greendoor.jpg, from the 13_05_web subfolder in the chapter13 exercise files. When I'm ready to save this file, I'll go to the File menu at the top of the screen and I'll choose, not Save or Save As, but rather Save For Web. That's opens the Save For Web workspace. Here on the left I can see the original version of my image, and on the right I can see how the image will look with the compression settings on the right side of the screen applied to it. I can compare these two as I prepare the image for the web. To do that I'm going to move to the controls on the right side of the workspace and the first and most important one is right here.

I need to choose the format for this file, because it's a photograph, the best format is JPEG, which stands for Joint Photographic Experts Group. It's a special format for compressing photographs. When you're working with a JPEG, the most important setting is right here, the Quality setting. This setting governs how compressed the image will be and how good it will look. This setting controls how much compression will be applied to the photo. The more compression, the smaller the photo will be, the less compression the bigger it will be, but the better it will look.

I'm going to get the Zoom tool from the left side of the Save For Web workspace and I'm going to use that to zoom in to this green door as I change the Compression settings. So you'll see the results as I change the Quality settings here. First I'm going to try Low quality. That gives me a really small file size of only a little over 9 kilobytes. But if you look at the image, it has lots of artifacts in it that make it not look very good. So I'm going to go back to the controls and see how the image looks with a Medium quality setting. Some of those artifacts are gone. But I think I have to get rid of a few more. So I'll try a High setting. Now the image looks fine, but if you look at the file size it's gone up to 26 kilobytes.

If I want to try to get that down a little bit, I'll go to the Quality slider here, click and move the slider down just a bit to set the quality somewhere between medium and high. I'll try around 50, and that looks good to me and it has brought the file size down a bit to 23 kilobytes. Now there is no magic number about how big your files can be. That depends on how many photos you have on a page and what kind of Internet connection you expect your viewers will have and other factors. But I'm happy with this number for this particular file and so I'm going to click to close that slider.

I'm going to leave all the other settings at their defaults. I'll mention the ICC profile setting, which I usually leave unchecked. ICC profiles are part of a color management system that I described in another movie on color management. When I'm preparing files for the web, I usually don't include an ICC profile, because many web browsers can't read them anyway in which case they wouldn't have the intended effect of helping the colors in the file that my viewers see match the colors that I'm seeing here as I work in Elements.

Also, ICC profiles increase the file size a bit and as we just saw our goal when creating an image for the web is to keep it as small as possible. If I did need to make this file smaller, the only other control here is Image Size. If I change the dimensions of the file to make them physically smaller, then the file will also get smaller in file size. But I'm going to leave this as is for now and go up to the OK button at the top of the screen. I'll save the file to the desktop by clicking Save.

The next time that you're preparing your files for the web, don't just go to File > Save As and save another copy as a JPEG. Instead, use the Save For Web workspace to make your file look as good as it can, and be as small as it can be on your website.

Show transcript

This video is part of

Image for Photoshop Elements 7 for Windows Essential Training
Photoshop Elements 7 for Windows Essential Training

94 video lessons · 9064 viewers

Jan Kabili
Author

 
Expand all | Collapse all
  1. 9m 23s
    1. Welcome
      54s
    2. What is Photoshop Elements?
      6m 59s
    3. Using the example files
      1m 30s
  2. 22m 34s
    1. Understanding the Organizer's catalog system
      3m 17s
    2. Getting photos from files and folders
      5m 41s
    3. Getting photos from a digital camera
      7m 27s
    4. Getting photos from offline media
      3m 7s
    5. Getting photos from a scanner
      3m 2s
  3. 35m 0s
    1. Touring the Organizer interface
      5m 30s
    2. Viewing photos
      2m 19s
    3. Selecting photos
      1m 52s
    4. Rotating photos
      2m 7s
    5. Renaming photos
      1m 57s
    6. Fixing photo dates
      1m 56s
    7. Hiding and deleting photos
      4m 50s
    8. Stacking photos
      7m 33s
    9. Moving files
      4m 1s
    10. Backing up
      2m 55s
  4. 31m 50s
    1. Tagging photos
      8m 38s
    2. Finding photos by tags
      3m 57s
    3. Tagging face photos
      3m 1s
    4. Using albums and Smart Albums
      7m 43s
    5. Finding photos with Text Search
      3m 34s
    6. Finding photos from the Find menu
      2m 57s
    7. Finding photos in the Timeline
      2m 0s
  5. 16m 27s
    1. Reviewing photos in Full Screen view
      5m 28s
    2. Comparing photos
      4m 9s
    3. Using Date view
      2m 54s
    4. Using Map view
      3m 56s
  6. 33m 3s
    1. Automatically fixing photos in the Organizer
      7m 58s
    2. Semi-automatically fixing photos with Quick Fix
      10m 39s
    3. Using the Guided Edit mode
      4m 33s
    4. Fixing group shots automatically
      3m 44s
    5. Removing stray content with the Scene Cleaner
      6m 9s
  7. 57m 41s
    1. Touring the Full Edit interface
      4m 46s
    2. Opening a file
      2m 6s
    3. Creating a blank file
      4m 36s
    4. Using tools
      8m 5s
    5. Setting Edit preferences
      4m 31s
    6. Adjusting Color settings
      5m 18s
    7. Using the Undo History command
      3m 48s
    8. Zooming and navigating
      6m 7s
    9. Resizing photos and adjusting resolution
      8m 23s
    10. Enlarging the canvas
      3m 24s
    11. Saving files
      6m 37s
  8. 13m 36s
    1. Understanding layers
      4m 38s
    2. Working in the Layers palette
      4m 4s
    3. Using layer masks
      4m 54s
  9. 17m 50s
    1. Understanding selections
      1m 15s
    2. Manual selection tools
      6m 20s
    3. Automatic selection tools
      6m 25s
    4. Modifying and saving selections
      3m 50s
  10. 40m 53s
    1. Straightening and cropping
      2m 46s
    2. Using the Shadow/Highlight adjustment
      2m 41s
    3. Adjusting with Levels
      5m 0s
    4. Adjusting with Hue/Saturation
      3m 14s
    5. Using Color Curves
      4m 44s
    6. Removing a color cast
      4m 9s
    7. Correcting skin tone
      2m 20s
    8. Reducing digital noise
      2m 47s
    9. Sharpening photos
      6m 27s
    10. Editing raw photos
      6m 45s
  11. 25m 21s
    1. Using the new Smart Brush tool
      5m 50s
    2. Using the Smart Brush Detail tool
      3m 13s
    3. Dodging and burning
      1m 58s
    4. Healing wrinkles and blemishes
      3m 51s
    5. Removing content
      2m 9s
    6. Using the Red Eye tool
      1m 11s
    7. Using the Whiten Teeth tool
      1m 48s
    8. Using the Blue Skies Tool
      1m 28s
    9. Using the Black/White tool
      1m 13s
    10. Converting color to black and white
      2m 40s
  12. 22m 10s
    1. Applying filters
      6m 21s
    2. Applying effects
      3m 53s
    3. Using layer styles
      5m 13s
    4. Using shapes
      4m 49s
    5. Using the Cookie Cutter tool
      1m 54s
  13. 7m 34s
    1. Creating text
      4m 6s
    2. Editing text
      1m 58s
    3. Warping text
      1m 30s
  14. 38m 38s
    1. Making a photo book
      10m 0s
    2. Making a photo collage
      8m 10s
    3. Creating a slideshow
      10m 11s
    4. Making a panorama
      3m 50s
    5. Preparing images for the web
      4m 6s
    6. Using automated actions
      2m 21s
  15. 9m 50s
    1. Using email and Photo Mail
      4m 42s
    2. Printing your photos
      2m 55s
    3. Using Quick Share
      2m 13s
  16. 19m 17s
    1. Signing up for Photoshop.com
      3m 33s
    2. Viewing and sharing your photos online
      6m 0s
    3. Backing up and synchronizing albums online
      6m 28s
    4. Accessing ongoing inspiration from Adobe.com
      3m 16s
  17. 36s
    1. Goodbye
      36s

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 7 for Windows 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.