Resize Images to Improve Loading Speed and Website Performance
Large image file sizes are a common reason for slow page speed. Resizing images to a smaller image file size can help improve page speed and page performance. Page speed impacts both technical SEO and page experience and resizing images can be an easy way to optimize images for speed.
In this guide, you’ll learn how to reduce image size without losing quality. We’ll show you how to do it manually or with a free image compression tool.
How to Shrink an Image File Size in Adobe Photoshop (Without Losing the Quality)
There are many different tools you can use to manually shrink an image. This guide will show you how to manually reduce image sizes with Photoshop but keep in mind you can use other tools like Indesign, Sketch, Procreate, and Microsoft Office.
1. Select Image
2. Go to “Image” tab in the top left corner of Adobe Photoshop
3. Click “Image Size” in the drop down menu
Once you’ve clicked “image size” you should see a popup menu like the one below.
4. At the bottom of the popup box, set it to “Bicubic Sharper”
This step maintains the image quality and sharpness. It does this by using bicubic interpolation with sharpening. If this creates too much sharpening in your image, use Bicubic instead.
5. Check the “Constrain Proportions” box
By clicking Constrain Proportions you can change the image size without altering the image data. Constrain Proportions enables you to maintain the aspect ratio — the ratio of image width to image height. Checking this box makes it so the image does not stretch or shrink.
6. Change the “Pixel Dimensions” width and height to the desired size
By clicking Constrain Proportions you can change the image size without altering the image data. Constrain Proportions enables you to maintain the aspect ratio — the ratio of image width to image height. Checking this box makes it so the image does not stretch or shrink.
7. Check how the image size appears and adjust accordingly (repeat steps 2-6).
What file type should I use to export my images?
The best file type(s) to use for your site are PNG or JPEG. PNG image files work better for graphs, vector art, and pictures with text, while JPEGs are better for photographs. When resizing a screenshot — or images with a combination of text, graphics, and photographs — it’s generally best to use PNG to retain the sharpness of the text.
TIP: When saving PNGs in Photoshop, use Export > Save for Web (legacy). Then, you can select “fewer colors” or “black-and-white,” which can reduce PNG files by as much as 50 percent to 90 percent.
What’s the optimal image file size for load speed?
For optimal speed, a webpage should never be larger than 1 MB. That means all the elements on the page, including images, should add up to less than 1 MB. For the most optimal result, the Huckabuy Product Engineering Team — experts in page speed — recommend keeping image file sizes smaller than 250 KB.
Use an Image Compression Tool to Reduce Image File Size
There are a lot of options when it comes to choosing a compression tool. Here is a list of some of the best online compression tools to choose from via Themeisle:
The best compression tool for you will depend on what type of images you have. For example, some of these tools work better for photographers than others because they want to maintain a high level of resolution. You’ll also notice that some tools — like Kraken — allow you to choose from different compression options depending on the type of image and your intended result.
Reduce an image file size with a compression tool following these simple steps:
- Choose the picture or photo file from your computer
- Drag and drop the file into the tool
- Wait for the tool to compress the picture or photo file size
- Download the new file
As mentioned above, some compression tools are more customizable and allow you to choose different compression methods. Kraken allows you to choose between lossless and lossy images. Lossless images result in a zero loss in pixel quality — this is important if you need high-resolution photos. Lossy images will result in a smaller file size (which helps page speed) and will work fine for most users.
Manual vs. Compression Tool
Not everyone has the bandwidth to spend the time it takes to manually compress image and photo file sizes — which is one reason why image compression tools might be a better option. Image compressor tools maintain image dimensions and compress images with less effort than trying to reduce file size manually. With a compression tool, you can easily reduce the file size of multiple images in less time.
Of course, compression tools are not as customizable as resizing images manually. When you resize an image manually with photoshop or similar software, you can make the image look exactly how you want it with the optimal file size.