How to optimize images for the web in Adobe Photoshop

Everyone is talking about optimizing images because it is good for the environment, it improves your SEO ranking, and your users will have fewer data to download. But how do you optimize an image for the web the right way? Is it just resizing it or are there also other things you can do to improve further?

In this tutorial, we will teach you how to optimize your images for the web using the latest version of Adobe Photoshop. So without any further, let's begin.

Why do we optimize images for the web?

We like when images are big and contain many details and colors, but with better quality and bigger images, we get heavier photos. Heavy photos are good for the screen and fill up a hard drive, but it is not good for the web.

There are many reasons why heavy photos aren't good for the internet, and below you will see a few:

Download time: Heavier photos take longer to download and display on your screen.
Expensive phone bills: Many users that visit your website with their phones can expect their bills to become more expensive if they have a cap on the amount of data they can use per month.
Slow loading speeds: A website will take longer to load if you use heavy images, and this can hurt your organic SEO placement on search engines.
The environment: The more data we download the more we hurt the environment. Both the server hosting the website and the device visiting it will have to use more energy to display the page.

Tutorial: Step-by-step guide to image optimization

Step 1: Open the image you want to optimize

The first step to optimizing an image for the web is to open it in the latest version of Adobe Photoshop. If you don't have the latest version, an older version will be fine too, in fact, you can even follow along with other image editing software, but the steps might not be the same.

To open an image in Adobe Photoshop you start by clicking File -> Open or CMD + O on mac.

Step 2: Crop the image to the desired proportion

Images come in many shapes and sizes, and before we start changing too much on the image we need to crop it to the desired proportions. The most common proportions for the web are either 4:3 or 16:9.

To crop the image you locate the "Crop tool" in your toolbar to the left or click "O" on mac. When the tool is activated you will see a squared frame on top of your image and what is inside will be your image after cropping. To start we choose the correct proportions, and in this example that will be 16:9. At the top bar, you will see some settings where you can type in the width and height proportions of your image. Once you have adjusted to the right proportions move the frame to the desired position and click ENTER. Clicking ENTER will crop the image and display the cropped version.

Step 3: Blur the background

An often overseen step is to blur the background on an image. It is not on every image we can do this, but on those images that have a background that isn't directly related or important to the image as a whole, we can do it. When we blur the background we remove some of the details from the image, and that will make the image smaller when we at the end export.

There are many ways to blur the background on an image, but the one we will be starting with is the easiest. This method uses manual blurring and to get started you have to locate the "Blur Tool" in your toolbar. Once the tool is selected you will see a set of settings at the top of the screen. Make sure to choose an appropriate brush size and set the strength to 100%. Once this is done you can move the brush to the image and start to blur the background with your mouse. Blurring the background is done the same way as if you were painting onto the image.

The second method is a bit harder but once you master it you will find it easier and much faster. Start by ensuring that you have selected the image in your layer section to the right. After that, you click on Layer -> Mask all objects. This will take a little while but once the process is done you will see that all objects in your picture have been added as masks to your layer section. Next, you select the right mask that has the important object you don't want to blur. Right-click on the mask layer and click Add mask to selection. Now that you have selected the object you don't want to blur you select the background layer in your layer section and then click CMD + C or Ctrl + C on windows to copy the object. Immediately, click CMD + V or Ctrl + V to paste the object into a new layer.

Now you will see you have two layers in your layer section. Make sure to highlight the background layer and then go to Filter -> Blur -> Gaussian Blur. In the popup on your screen, you can decide how much blur you want to add to your image. Once you found the desired amount you click Ok. Now you will see that your background image has become blurred and the object you added into a new layer is sharp. This technique can be a little hard but once you master it you will prefer this over using the Blur tool.

Step 4: Choose the right pixel size

Now that we have cropped the image and blurred the background we need to size the image appropriately for the web. Choosing the correct size entirely depends on the size of the place you want to use the image. On our blog for example we use a width of 760px and therefore we export our blogpost images with a width of 950px. We are giving it a few more pixels to give the image a little more crisp and make it look like it is exported in a higher quality.

So start out by figuring out where you want to use your picture. Once you know the approximate size you head to the top navigation in Adobe Photoshop and click Image -> Image size. This will open up a popup where you can write the width and height of your image in pixels. To the left of the width and height input, you see a link icon. Click the icon to ensure that the width and height of the image are linked together, otherwise, your image will change proportions once you start to change the width. Type in your desired width and click Ok to resize your image.

Step 5: Export the image for the web

We have now come to the last and final step where we export the image onto our computer and after this, it will be optimized and ready to use on the web.

To export your image click on File -> Export -> Export as in the top navigation. This will open a popup where you will see the image to the left and at the right have a few settings you can tweak.

First, we need to decide whether our image should be saved as a JPG or a PNG file. Naturally, a PNG is heavier than a JPG file, and therefore if possible we want to choose the JPG file format, but before we do so we need to analyze the image. Are there any areas of the image you want to be transparent? If not then we can go ahead and choose JPG as the option. If you have areas where you want to be transparent, then you need to choose the PNG file format. If you choose the JPG format transparent areas will become white.

Right below the file format, you will see a slider where you can choose the quality of the image. This tool is very powerful and with it, you can choose how much your image should be compressed. When you choose the compression you should look at the example to the left and ensure that the quality isn't too bad. Once you find a good level go ahead and click Export.

Author

Michael Andersen

I am a self-taught and highly passionate web developer currently living in Sweden, where I use my skills to make the internet a better place through ethical and sustainable web design.