Drag the preview image around to check the other parts of the image to make sure it’s all good. The file size is still great (294 KB) and the image quality is fantastic. Let’s change the quality to 60% and see how that looks. The file size is phenomenal (only 54 KB!) but the image quality is junk. Under the File Settings section, change the quality to 0% and check out the preview image. First, in the middle preview window, zoom in to 100% so we can see how our changes affect the quality. Remember that “Quality” setting? Let’s go back to that setting and see if we can optimize further. But remember, the smaller we can make the file size without losing too much quality, the better. The image now weighs in under 1 MB, which is a good improvement. Check out the file size in the left side of the window. Change the Width to 1600 px and you’ll see the Height and Scale % automatically adjust to the same aspect ratio.Ĭhanging the dimensions of an image is a great first step towards optimization. For the purpose of this tutorial, this image needs to be no larger than 1600 pixels wide. The next section is Image Size and here’s where you need to know how big your final image is. We’ll come back later and see how this affects quality and file size. Under the File Settings section, choose JPG from the “Format” drop-down menu. The right side is where the magic happens. You can zoom in and out to check the quality of the image. (That’s a topic for another article.) For now, notice the file size of the original image: 11 MB! The middle section is the preview area for the image. The left side is used for exporting images with the same aspect ratio for different display resolutions. There are three main parts to this window. One is called “Export As” and the other is called “Save for Web (Legacy).” In older versions of Photoshop, it’s called “Save for Web & Devices.” We’ll go through both options. Newer versions of Photoshop have two different ways to do this. Photoshop has export options specifically designed for web images. Instead of resizing the image first (by going to Image > Image Size), we can do all of the resizing and optimizing in a single dialog box. And no amount of optimization will make it look good. But if you start with a small image and try to make it bigger, you’ll quickly lose image quality. You can always make it smaller while maintaining its quality. This usually means a larger dimensional image. Pro-tip: When optimizing images for the web, it’s important to start with the largest file size possible. The smaller you can make it (without sacrificing too much quality), the better. It all depends on your design layout but I try to keep file sizes for the largest images smaller than 1 MB, aiming for under 500 KB if possible. 10.6 MB is way too big for nearly every online use case.

Let’s take a closer look to find out why. But uploading this photo without optimizing it would be not-so-great. It’s a great photo straight from the camera. Let’s start with this image for a digital agency’s website. So how do we find the right balance between image quality and file size? That’s where image optimization comes in. And on mobile where bandwidth is limited and speed matters, this becomes an even bigger issue. A higher-quality image means its file size is larger. The fix? Use an image that has a higher quality.īut that presents another problem. A poor quality image results in something that looks pixelated, blurry, or has visible noise artifacts. There are two main factors that dictate how images look on the web: quality and file size.

Photoshop best image format for web