Whether you’re creating a website, publishing a blog post, or running a social media account for your business, users expect properly-sized, high-quality images. By knowing how to resize images without losing quality, you’ll help your brand look professional and establish trust with users.

However, there’s another crucial factor when adding images to your site: load time. High-quality images are larger in file size, which can result in slow performance and a poor user experience.

In this post, we’ll walk through how to resize an image without losing quality. Then we’ll take a brief look at other image resizing tools so you can find the right one for your website.

Speed Up Your Website with HubSpot's Built-In CDN

Why It's Important to Resize Images Without Losing Quality

Imagine two ecommerce sites selling the same pair of shoes — one has blurry and/or distorted product screenshots, and the other has crystal clear ones. Which are you more likely to buy from?

Well-formatted images don’t just make the browsing and purchasing experience easier — they also convey professionalism. On the flip side, messy images can imply a lack of competence. If you can’t get your images right, how can you get your products right?

In addition to impacting the user experience in these ways, images that aren’t properly resized affect website performance. Oversized, high-resolution images might look good on the front end, but their file sizes are large. That means browsers will take longer to load them, which will increase your website’s overall load time.

Often, this extra load time is unnecessary. Say you have an image that is 2000 x 2000 pixels but the container it’s going in is only 200 x 200 pixels. In that case, your browser still loads every pixel even though it’s constrained to a much smaller display area. That means the browser has to load ten times more than what’s necessary.

There’s no standard width or height you should aim for when resizing your images. It will depend on a variety of factors, including where you’re putting them on your website, whether the majority of your visitors are using desktop or mobile, and so on.

Still, a rule of thumb is that you want to strike a balance between the lowest file size and an acceptable quality. Generally, an image file size of 100KB or less is acceptable. Some quality loss will happen, but it won’t be noticeable if done properly.

For the sake of this demo, we’ll use the free Adobe Express image resize tool, but these basic steps apply to any tool.

1. Upload the image.

adobe online tool for resizing images without losing quality

With most image resizing tools, you can drag and drop an image or upload it from your computer. Some tools even allow you to copy and paste an image.

2. Choose a resizing option.

choosing image dimensions to resize images without losing quality

Some resizing tools allow you to choose from a list of preset resizing dimensions based on various social media platforms and common screen sizes. If you'd like, choose one of these presets from the menu.

If you'd rather set custom dimensions yourself, choose the Custom option and move on to the next step.

3. Type in the width and height dimensions.

choosing image dimensions to resize an image without losing quality

Let’s say the image you want to resize is 6000 x 4000 pixels, and you want to resize it to 600 x 400 px to make it the featured image of your blog post. You simply have to type in those dimensions.

4. Download the resized image.

resize-image-without-losing-quality-tutorial-4

Once the image has been resized, click Download. You can now download the image with its new dimensions and upload it to your website.

After completing the above steps, you may find that your image file size is still above 100KB. To get it even lower, we can turn to image compression.

There are many image compression tools available for free online. For these steps, we’ll be using the Squoosh tool from Google. But, again, these steps generally apply to any compression tool.

1. Upload the image.

the squoosh tool used to resize images without losing qualityFirst, open Squoosh in your web browser or as a desktop application, then drag your image into Squoosh. Alternatively, you can copy and paste the image into Squoosh.

2. Check the current file size of your image.

an image uploaded to the squoosh tool to resize without losing qualityAfter uploading your image, Squoosh will display the image in two panels. On the left is the original image you uploaded, and on the right is the compressed version. At any point, you can click and drag the center bar to compare the quality of your image before and after compression.

As shown above, the MozJPEG compression method and a quality of 75 are chosen by default, which reduced the image file size from 176KB to 72.8KB. Since we’re now under 100KB, we could download the new compressed image.

However, if your original image file size is larger, it may not be this easy to get below 100KB. You also may prefer a different compression method or a higher quality. We’ll look at these next.

3. Choose your output format.

choosing an output format in squoosh to resize without losing qualityDepending on the type of image you’re compressing, you may want to choose a different compression method than the one that’s selected by default.

To view compression options in Squoosh, open the dropdown menu under Compress. You’ll see several options listed, but there are three that will probably be your go-tos. These are:

    • MozJPEG: This method compresses images in the JPEG/JPG format. The JPG format is best for highly detailed images like photographs. It is a lossy format, meaning that the compression process removes some data permanently from the image.
  • OxiPNG: This method compresses images in the PNG format. The PNG format is better for image files with lower levels of detail, like graphics and illustrations. PNG is a lossless format, meaning that no data is removed during compression.
  • WebP: WebP is a relatively new file format developed by Google that aims to produce smaller file sizes than JPG and PNG while retaining quality. You can learn more about WebP here.

4. Adjust the image quality.

adjusting the image quality in squoosh to resize without losing qualityOnce you’ve chosen your compression method (we’re going to stick with MozJPEG because we’re compressing a detailed photograph), you can further refine your compression by adjusting image quality.

By default, image quality is set to 75. If you want to further reduce the file size, you can drag the slider down and compare the output — depending on where and how you place the final image on your website, reducing quality might not be noticeable or affect the user experience. This may take some trial and error before you strike the right balance of quality and file size.

Alternatively, if your image size is below 100KB after compression, you can raise the image quality to be closer to 100KB. Above, I’ve raised the quality from 75 to 80, enough to improve quality while keeping the file size below 100KB.

5. Download the compressed image.

downloading a resized image from squooshWhen you’re ready to download your compressed image, click the blue download button. Then, upload the file to your website and preview how it looks on your page.

You can choose a PNG resizing tool that fits your preferences, but most of these tools work the same while retaining transparency and image quality. Here are some options we recommend:

  • Adobe Express: The free online image resizer from Adobe works with PNGs. You can resize your image while retaining quality, as well as apply dimensions optimal for social media posts.
  • Biteable: When resizing PNGs, it doesn’t get much simpler than Biteable. Upload your image, set your dimensions, and download.
  • Squoosh: In addition to applying compression, you can also resize images (including PNGs) inside of the Squoosh tool. This is useful if you want to apply resizing and compression with the same tool.

Image Resizing Tools

Manually resizing each and every image you upload to your website would require a huge investment of time and energy — and likely some experience in graphic design. The good news is you can simplify the process with an image resizing tool.

Below is a collection of the best image resizing tools. They range in functionality and price so you can choose the right one for your needs and budget. Let’s get started.

Adobe Photoshop Express

Resizing an image in Adobe Photoshop Express tool

Adobe Photoshop Express is a free photo editing tool for mobile that enables you to resize, compress, and crop any image in a few clicks. You can resize a photo for Facebook, a LinkedIn profile image, Twitter banner, YouTube thumbnail, or screenshot. You can resize as many images as you want for free, but you’ll have to create an account to download them.

Resizing.app

Resizing an image with the Resizing.app tool

Resizing.app is a free photo editing tool with an incredibly simple interface. You can resize the image by width, height, percentage, the largest side, or another custom value. Once you resize the image, you can optimize it with the sliding scale and convert it. One drawback of this tool is that it doesn’t show the file size when you’re optimizing it. That can make it difficult to know when to stop sliding the scale to the right.

BeFunky

Resizing an image with the BeFunky tool

BeFunky is designed to be Photoshop for beginners. It’s rich with features but presented in a user-friendly interface. You can resize, crop, and rotate images, add customizable graphics, frames, overlays, and textures, and more. With BeFunky’s Batch Image Resizer, you can even resize images in bulk instead of one by one. There’s a free version with 125 digital effects available, and a premium version with hundreds more.

PicResize

Resizing an image with the PicResize tool

With PicResize, you can easily resize, crop, and edit your images for free. You can decrease the image by pre-set percentages, or by setting the width and height in pixels. It’s important to note two things. The free version of PicResize is only for shrinking photos; you’ll have to purchase PicResize Pro to enlarge them. You can only compress JPG file formats and instead of a slider, there’s a dropdown menu with the options: good, better, best. While you can’t see the image file size, you can set a maximum file size.

Ready to resize?

Resizing images without losing quality is an important skill, whether you’re a site owner, social media marketer, blogger, or something else. Thankfully, the process is easy thanks to the variety of free and premium tools available online. You can resize your images in less time and improve your website speed and delight your visitors as a result.

Editor's note: This post was originally published in December 2020 and has been updated for comprehensiveness.

cms New Call-to-action

 cdn

Originally published Feb 15, 2022 7:00:00 AM, updated June 13 2022

Topics:

Website Performance