Resizing and Optimizing Images for Use Online

Original: November 2022 | Updated March 2023

Using Photoshop

This tutorial is helpful for resizing images or graphics for website use in Photoshop

Here are a few reasons for resizing and optimizing images:

  • Loading the correct image size to your application
  • Lowering the weight of your image
  • Increasing your site speed

Why do I have to resize and optimize images?

Loading an image that isn’t the right size for your website can lead to disastrous results. Your image could be cropped strangely, appear pixelated, or off somehow. This can lead to unsightly designs which are frustrating and annoying. If your images aren’t optimized for the web it could cause further unintended circumstances. Such as slow loading times, higher bounce rates, lower engagement, and poor-quality designs.

Thankfully it isn’t too difficult to correctly size and optimize your website images and graphics. You have a few options to resize your images, Adobe PhotoshopAdobe Illustrator, Canva, or Adobe Express to name a few. Canva and Adobe Express have free options whereas Adobe Creative Cloud is a paid subscription. For the sake of this tutorial, I will share how to resize in Photoshop, you can check out my other post, on how to resize in Canva: both of these options are the most used and offer the bonus step of optimization. (super important)

Resizing Images with Photoshop

STEP-BY-STEP INSTRUCTIONS

Open Photoshop

Click “New File” to open the new document settings.

Here are the settings I used for this tutorial:

  1. Choose “Web” in the top menu option.
  2. Fill in your needs under “Preset Details” on the right-hand side of the box.
    • Give your Project a Name
    • Enter the size of your artboard. This should be the largest size your website will use to show the image. For the sake of this tutorial we are using 1000×1500 px.
    • Set the Resolution to 72
    • Color Mode should be RGB (for all web applications) 8bit
    • If you require a transparent background, choose that under the Background Contents.
    • Click “Create”
Screenshot of Photoshop New Document Settings

This will open Photoshop with an artboard the exact size you need for your image.

Image of blank artboard in Photoshop

Click on “File > Place Embedded” choose the image you are resizing in your browser and click “Place”. Your image will now appear on your artboard.

Image of selecting the Place Embeded option in Photoshop

Image of placed image in Photoshop

Image Placed

Next, click on the squares on the corners of the image to click and drag your image to fit the artboard. You’ll likely be cropping the image to fit, so be careful the image is aligned to your liking. Once it is stretched to fit properly, click the “√” in your top toolbar to set it.

Stretching the image to fit the artboard in Photoshop

Stretch to Fit

Accepting the resized image prior to export in Photoshop

Click the √ to set it.

The image is now resized! Well done.

BUT WAIT!!

You have more work to do before you load this newly resized image onto your website. We need to optimize it. Optimizing an image is making it as lightweight as possible so it loads quickly and beautifully. This keeps your website fast and happy.

The #1 thing people forget is Optimization.

Optimizing Your Image with Photoshop

Optimizing an image for website usage is simply saving it at a lower image quality so that it is lightweight and therefore will load quickly. Optimizing images by hand with Photoshop gives you the most control over the final quality of the image.

Best Practices:

  • Load the image to the exact size that is needed on your website.
    Because sites are designed to be mobile-optimized they should look good across all devices. To ensure this I load images to look great on large screens so they can be scaled down nicely. If the website I am designing for needs a Full Width Header at 1920×650 px. I will set the artboard to exactly those dimensions. If the image is a lot bigger it will take extra time to load as the browser crops the image and if the image is too small, it will either appear too small for the frame or be stretched to fill the container. Both options are ugly and have the potential to slow down your site.
  • Aim for the smallest possible KB weight. The rule of thumb is 100KB or smaller.
    Using Photoshop, you can adjust the settings of your image to be lightweight and ready for the web. When an image is larger the site speed suffers. This is especially true when visiting sites on mobile devices. If you live in the Wood River Valley, like I do, you know how limited our cell services are, which makes this step incredibly important!
  • If it is a graphic – save it as an SVG, instead of a JPG or PNG.
    SVG, stands for Scalable Vector Graphic. These graphics are created to maintain their quality no matter the size of your website screen. This means your graphics end up looking super crisp and clean. The best part is that they are SUPER LIGHTWEIGHT. I can typically save 100s of KBs per
    graphic when I save a graphic as an SVG vs a PNG.
  • Use the RGB color setting.
    RGB colors are made for web viewing. If you save your image with CMYK settings, you and your audience’s browsers will render your image with their best guess of the RGB settings. It usually ends up looking terrible. If you’ve loaded an image and the colors look too bright, neon, or just off this is usually what the problem is.

How to Optimize in Photoshop – a Quick Tutorial

STEP-BY-STEP INSTRUCTIONS

Open the Image in Photoshop

  1. Click “File > Export >Save For Web”
Photoshop with the Export As Selected in the drop down file menu.

  1. Choose “Original” in the top tab menu
    The lower left corner of the pop-up box contains the image info (image version, title, and weight).
  2. On the right make the following settings:
    • File type: JPEG (or PNG-8 if you need a transparent background)
    • Quality: I start with High and work down to Low depending on the original size and quality of the image
    • Quality Percentage: This will change depending on your previous choice. You can toggle it either up or down to find the perfect setting.
    • Checkbox: Start with Progressive, but if it looks too blurry try Optimized.
    • Check – Convert to sRGB
    • Make sure the Image Size is the correct height and width.
    • Quality: Bicubic
  3. Choose “4-Up” in the top tab menu. This will give you four options to choose from. The upper left option is the original image and the other three are quality variations.
    • To get an accurate view of what your image will look like click on one of the options. It will be highlighted with a blue outline. The image weight information and approximate load time are displayed directly below each image.
    • Once highlighted, click on preview in the lower left side of the box. This opens a browser window with the image and its information. If you are happy with the result you can jump to saving. Otherwise, make some adjustments on the right-hand side of the box until you find a combo that both looks good on the web and fulfills your image weight requirements.
  4. Click Save.
Choosing an image from the save as web photoshop box.
ONE QUICK SIDE NOTE

How do I know how heavy my image is? Great question… Let me show you on a Mac. I am sure you can get image info on a PC as well. I don’t have a way to show you that. (Apple for Life!)

  1. Open Finder
  2. Click on the image you’ll be using.
  3. Look at the image information:
    Refer to the image below. Notice how large the image is! It is at 1.3 MB. WAY TO BIG for my website.

It is also the wrong dimensions. I usually load images at 950px wide… this one is at 2192px. And the resolution is 144x144px. However, the web would prefer 72x72px! At least it is in the right color family as RGB. Perfect for viewing online.

Using Finder to see your image info.