Preparing Your Images for Web

After spending hours planning and styling a shot, getting the lighting just right and adding the final touches in post-production, chances are you’ll want to upload your images online to your portfolio or share them on social media.

In this Photoshop class, Karl looks at how to resize images for web and online use using two different methods in Photoshop. He explains important considerations when resizing images and demonstrates each step of different methods. You’ll not only learn how to find a balance between image size and quality, but also how to get the best out of your images, see what colour space is best for web use and how to speed up your workflow.

In this class:

  • Resizing images for web use
  • How to resize images without losing quality
  • ‘Export as’ vs ‘Save for web’
  • How to sharpen images for web
  • Colour profiles for web images

Questions? Please post them in the comments section below.


Key concepts

Resizing images.

Resizing images for online example

Resizing images for online use requires reducing the dimensions of the image as well as the quality.

‘Export as’.

Photoshop Export As

‘Export As’ allows you to change the dimensions and quality of the image before saving.

‘Save for web’.

Photoshop Save for Web

‘Save for Web’ also allows you to change the dimensions and quality of an image, but it does not offer as much control as ‘Export As’.

Sharpening images.

Sharpening images in Photoshop

Often adding additional sharpening to images before resizing them can help enhance their apparent quality.

To learn more about other useful Photoshop tools, please visit our Post-Production classes. You’ll also find a range of more in-depth demonstrations on how to use a number of different tools and techniques in our Photoshop for Photographers course.

Comments

  1. desavoiecorp@gmail.com

    How did u get a jpeg from a hasslelblad raw of 50-100MB of only 1.5MB it should be 5-10MB jpeg, did you resized it to get 1.5MB??

    1. Hi, a jpeg size often depends on the pixels/content of an image. For example if the shot has a large plain background with no variation then it can compress more. My usual course of action though as is covered in this video is that when I have my finished image I downsize the pixel size to an intermediary stage if necessary, for example from 11,000 down to say 6000 pixels and then down to my final 2500 pixels. Sometimes I will apply sharpening and sometimes not. Today’s photoshop image size commands automatically compensate the method for reduction or enlargement but I general choose ‘smooth gradients’ for downsizing rather than bicubic sharper. At my final 2500 pixels the images will usually be less than 1mb.

  2. Hi Karl,

    What is the relationship between preparing images for the web and sharpening? Why do they go hand in hand? If the image is better when you apply sharpening, why not apply it in the previous stage? I.e. why not apply sharpening in the post-production stage?

    1. Hi Denis, often I do apply sharpening to my largest images that are destined for print or clients posters etc. However the amount of sharpening and double method is different based on the resolution i’m supplying the client. When an image is very small (websize) different sharpening levels may be required compared to the largest size. My other sharpening methods are covered in other classes.

  3. Hi, Karl.
    Very interesting and important lesson. I have a question, btw. You said that 2500 on the longest edge is the size you use for the socials too. But Facebook and Instagram have rules about the maximum size accepted which is 2080 for FB and 1200 for IG. My question is if it wouldn’t be better to resize the images at that values to avoid the compression they apply for bigger images? Thanks in advance. Roberto.

    1. Hi Roberto, I still upload the 2500 pixel size to social media because even if you upload at their preferred size they compress the image regardless in terms of data size so I’ve found it makes no difference.

  4. Excellent video, as always Kark, thank you!
    I, too, have always struggled with the ppi and always thought 300 dpi is for print only yet 72 ppi never looks good enough even for the web. I am fascinated and relieved to know that I can just leave the ppi at 300 now and not be concerned about tweaking the ppi!

  5. Karl, does it makes a difference changing the resolution from 300dpi down to 72dpi? Does it make file size smaller going with a smaller resolution dpi?

    1. Hi Nigel, no changing DPI doesn’t change anything as the total dimensions of the file and the total number of pixels remain the same.

  6. Hi Karl, Great vid as usual. A question – when you change the image size for the web you just leave it at 300 dpi? Why not change it to 72dpi @ 2500 px

    Thanks!

    1. Hi Glenn because it doesn’t make any difference, web browsers only read the pixel dimensions and display the image based on that.

Leave a Comment