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

Creating the perfect JPEG image

From: Photoshop CC One-on-One: Intermediate

Video: Creating the perfect JPEG image

In this movie, I'll show you how to use the Save for Web feature to create the perfect JPEG image. Notice that the top image is open, the one with the continuous tone photograph in the background. And any time you have photographs inside your Web images, you're going to want to save a JPEG file. So I'll go up to the File menu, and choose the Save for Web command. And I already have the two-up display selected, so I'm seeing the uncompressed image at top, and the compressed image down below. I'll make sure that my file format is set to JPEG, and then, just to give you a sense of what's going on.

Creating the perfect JPEG image

In this movie, I'll show you how to use the Save for Web feature to create the perfect JPEG image. Notice that the top image is open, the one with the continuous tone photograph in the background. And any time you have photographs inside your Web images, you're going to want to save a JPEG file. So I'll go up to the File menu, and choose the Save for Web command. And I already have the two-up display selected, so I'm seeing the uncompressed image at top, and the compressed image down below. I'll make sure that my file format is set to JPEG, and then, just to give you a sense of what's going on.

I'm going to switch the Quality setting to low, which is going to to result in just about the lowest quality image possible. And now I'll zoom in on my images by pressing control-plus, or command-plus on a Mac. And notice when I drag inside the image, I pan both images at the same time. So you're always comparing apples to apples, inside this window. Now notice up above we have very crisp detail associated with this admittedly low resolution shot. You can also see how crisp and clear the text is.

Whereas down below in the compressed version of the image we have some very rough detail indeed. And we have all sorts of rough pixelation occurring around the text. And that's what's known as jpeg artifacts, by the way. The little weirdnesses that jpeg creates in the course of compressing the image. Now the good news is we're taking a 461 k file And we're compressing it down to sixteen K, but it's not really worth going that far. So you're better off going either with medium, if you can get away with it, which sometimes you can.

In the case of this image I wouldn't do it however, because I have text, or high, which is the default setting. In our case, it ends up doing a pretty darn good job. Now for special graphics, you may occasionally want to set the quality to very high. That's about the highest I ever go, when creating web graphics, however, because you want to make sure that they're easily downloadable, and that they don't keep people waiting. And at 79K this graphic isn't going to necessarily display instantaneously, especially on slower connections.

If you want to get a sense of just how long a consumer of your website is going to have to wait for the image to download then click on this little flyout menu icon and choose one of the download speeds. And you can safely bet that the slowest download speed is going to be around 256K. Probably much faster than that, but let's go ahead and check it out here. If somebody has a very slow connection indeed, why then the image is going to take 4 seconds to download. That's not necessarily good news, but that is a very slow connection.

More likelys are going to have 1 meg or better, in which case we can see that the image is going to take 2 seconds. Which in my opinion is still too long and that's why I'm going to set the quality back to high which gets us down to one second. Now the other options you don't have to worry about too much. Progressive leave that turned off, otherwise the image will appear in three passes. Rough at first, better and then better still, you don't need that these days and it tends to look amateurish. Optimize goes ahead and applies some Lassos compression to the file.

That makes things smaller so you do want it turned on. You don't necessarily need a color profile and if you turn Embed Color Profile off, you're going to shave this guy down by about a K, which does make for a more expedient file. The thing is that most browsers don't support color profiles and most people screens aren't calibrated so it's not really doing you any good. The quality number is linked to the quality setting over here on the left hand side, so they change together, but you can modify that value if you like. You can take it down as low as zero in order to create a very bad quality image as you're seeing here, and you can take it as high as 100, which gives you a lovely file.

But, again, a very large file as well, which is why I'm going to reset things to high, which results in a quality setting of 60. The blur value, if you blur your image, you'll make it smaller. Notice if I take the Blur value up to 2, let's say, then I end up taking that file size down to 19k, and that's because whatever the the quality setting, JPEG is capable of compressing blurry detail better than sharp detail. But you don't want your images looking like this under any circumstances, so leave that value alone.

And then Matte is going to fill in transparent portions of the image with the matte color. Again, not an issue where this file is concerned. As I was mentioning in the previous movie, you want to make sure that convert to srgb is turned on. And then, once you come up with a file that you like, that's a good size. Go ahead and click on the Save button. And notice that Photoshop goes ahead and automatically names your image. Based on the original file name. But it replaces the spaces with hyphens and it generally gets rid of any characters that might be illegal on other platforms.

Now, in our case we're saving the image only, there's no HTML to save or anything like that, so all you need to do is click the Save button in order to save your layer PSD file as a flat and efficient JPEG. And that's how you save an ideal, efficient JPEG image using the Save for Web command here inside Photoshop.

Show transcript

This video is part of

Image for Photoshop CC One-on-One: Intermediate
Photoshop CC One-on-One: Intermediate

123 video lessons · 11695 viewers

Deke McClelland
Author

 
Expand all | Collapse all
  1. 2m 4s
    1. Welcome to One-on-One
      2m 4s
  2. 1h 1m
    1. The best of Photoshop automation
      35s
    2. Content-Aware Fill and Color Adaptation (CC 2014) NEW
      7m 44s
    3. Combining two layers with a layer mask (CC 2014) NEW
      5m 37s
    4. Content-aware healing (CC 2014) NEW
      10m 17s
    5. Introducing the Patch tool
      3m 43s
    6. Using Content-Aware Patch UPDATED
      7m 17s
    7. Retouching with Content-Aware Patch UPDATED
      3m 45s
    8. Using the Content-Aware Move tool UPDATED
      7m 41s
    9. Using Content-Aware Extend
      2m 4s
    10. The Content-Aware Scale command
      6m 35s
    11. Scaling in multiple passes
      2m 22s
    12. Protecting skin tones
      3m 31s
  3. 32m 55s
    1. Editing the histogram
      1m 50s
    2. The new automatic Levels adjustment
      4m 33s
    3. Customizing a Levels adjustment
      4m 53s
    4. Understanding the Gamma value
      2m 7s
    5. Opening up the shadows
      2m 48s
    6. Previewing clipped pixels
      3m 40s
    7. Retouching with Output Levels
      4m 25s
    8. Making channel-by-channel adjustments
      2m 19s
    9. Faking a gray card in post
      2m 51s
    10. Assigning shortcuts to adjustment layers
      3m 29s
  4. 57m 43s
    1. How sharpening works
      1m 38s
    2. Introducing the Smart Sharpen filter
      6m 56s
    3. Understanding the Radius value
      5m 20s
    4. Gauging the best sharpening settings
      5m 45s
    5. Addressing color artifacts and clipping
      5m 49s
    6. The Remove and Reduce Noise options
      4m 22s
    7. The Shadows/Highlights options
      7m 36s
    8. Correcting for camera shake
      6m 47s
    9. Sharpening with the Emboss filter
      5m 45s
    10. Sharpening with the High Pass filter
      4m 44s
    11. Painting in sharpness
      3m 1s
  5. 1h 12m
    1. Vector-based type
      1m 35s
    2. Creating and editing point text UPDATED
      8m 8s
    3. Font and type style tricks UPDATED
      7m 58s
    4. Type size and color tricks UPDATED
      6m 42s
    5. Kerning and tracking characters UPDATED
      8m 9s
    6. Creating and editing area text UPDATED
      3m 50s
    7. Selecting and formatting paragraphs UPDATED
      6m 50s
    8. Setting text inside a custom path UPDATED
      5m 34s
    9. Creating text along a path
      6m 12s
    10. Adjusting baseline shift
      4m 45s
    11. Creating and stylizing a logo
      6m 49s
    12. Masking text into image elements UPDATED
      6m 14s
  6. 1h 9m
    1. The other vector-based layer
      1m 39s
    2. Dotted borders and corner roundness
      8m 14s
    3. Drawing and aligning custom shapes
      3m 55s
    4. Creating your own repeatable custom shape
      5m 43s
    5. Selecting and modifying path outlines (CC 2014) NEW
      6m 5s
    6. Isolating selected layers (CC 2014) NEW
      6m 39s
    7. Combining simple shapes to make complex ones UPDATED
      6m 31s
    8. Cropping, adjusting, and merging shapes UPDATED
      8m 49s
    9. Creating a soft, synthetic sparkle
      6m 22s
    10. Saving a resolution-independent PDF file
      6m 42s
    11. Turning a small image into a huge one
      8m 38s
  7. 1h 14m
    1. Depth, contour, and texture
      1m 28s
    2. Imparting depth with a layer effect
      9m 9s
    3. The power of the drop shadow
      7m 37s
    4. Modifying a layer and its effects
      6m 21s
    5. Saving custom default settings
      4m 12s
    6. Creating a custom contour
      8m 5s
    7. Introducing Bevel and Emboss
      8m 8s
    8. Multiple effects and multiple layers
      7m 45s
    9. Global Light and rasterizing effects
      8m 5s
    10. Gloss and surface contour
      6m 4s
    11. Adding texture to Bevel and Emboss
      7m 21s
  8. 34m 48s
    1. Styles store settings
      1m 38s
    2. Creating and applying a paragraph style
      3m 41s
    3. Redefining a style and styling a word
      5m 38s
    4. Creating and styling a placeholder style
      5m 43s
    5. Applying and creating layer styles
      5m 45s
    6. Loading and customizing layer styles
      5m 42s
    7. Merging and saving layer styles
      6m 41s
  9. 56m 48s
    1. Meet the transformations
      1m 55s
    2. Transformations and Smart Objects
      5m 46s
    3. Adjusting the interpolation setting
      5m 10s
    4. Rotating a layer with Free Transform
      5m 22s
    5. Scale, duplicate, and repeat
      4m 30s
    6. Creating a synthetic star field
      5m 20s
    7. Warping a logo with Arc and Flag
      5m 34s
    8. Distort, perspective, and skew
      4m 15s
    9. Using transformations to draw and correct
      7m 0s
    10. Bolstering text with layer effects
      5m 43s
    11. Adding highlights with Lens Flare
      6m 13s
  10. 43m 36s
    1. Removing the weight that the camera adds
      1m 7s
    2. The Warp and Reconstruct tools
      6m 44s
    3. Brush size, hardness, and opacity
      4m 29s
    4. The Pucker, Bloat, Push, and Twirl tools
      7m 12s
    5. Saving and reapplying Liquify settings
      4m 9s
    6. Lifting and slimming details
      9m 42s
    7. Warping legs, arms, and fabric
      5m 33s
    8. Improving a model's posture
      4m 40s
  11. 58m 46s
    1. Shoot in color, convert to black and white
      1m 55s
    2. Three ways to grayscale
      5m 36s
    3. Mixing a custom black-and-white image
      7m 31s
    4. Simulating an infrared photograph
      6m 39s
    5. Creating a sienna-infused sepia tone
      5m 38s
    6. Creating a hyper-saturated image
      5m 26s
    7. Introducing the Black & White command
      3m 16s
    8. Customizing the Black & White settings
      4m 50s
    9. Black & White meets the Channel Mixer UPDATED
      7m 29s
    10. Infusing an image with tint and color
      5m 9s
    11. Grayscale and Split Tone in Camera Raw
      5m 17s
  12. 41m 34s
    1. The many ways to print
      1m 41s
    2. Using the test document UPDATED
      3m 18s
    3. Print, position, and size
      5m 57s
    4. Description and printing marks
      3m 3s
    5. Establishing a bleed
      3m 44s
    6. Getting reliable color
      5m 54s
    7. Special printing options
      5m 1s
    8. Previewing an image at print size
      4m 16s
    9. Creating contact sheets
      4m 49s
    10. Creating a multipage PDF
      3m 51s
  13. 31m 9s
    1. Making Internet imagery
      1m 6s
    2. Introducing Save for Web UPDATED
      4m 39s
    3. Creating the perfect JPEG image
      5m 14s
    4. Creating a high-contrast GIF image
      6m 23s
    5. The two varieties of PNG
      3m 57s
    6. Downsampling for the web
      5m 59s
    7. Adding copyright and contact info
      3m 51s
  14. 1m 3s
    1. Until next time
      1m 3s

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 CC One-on-One: Intermediate.

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.

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.