How to Resize Image Without Losing Quality
Images are very important when it comes to marketing yourself, your brand, or your service on the web. We live in a time where visualization is everything, whether it is on your website, pinning a post on Pinterest, or sharing a post on Facebook. Studies showed that 40% of people will respond better to visual information than text. So it can be very important to have a good system in place when it comes to how to resize an image without losing quality. The last thing people want to see is a blurry photo, as this can give a bad first impression.
Understanding image resizing
Resizing an image involves changing its dimensions. The most common reasons for resizing images are to fit them into a specific space, reduce their file size for faster loading, or optimize them for different devices or platforms. However, resizing images can also result in a loss of quality, which can affect their appearance and usability.
When an image is resized, its pixels are either added or removed to adjust its dimensions. Adding pixels results in a larger image while removing pixels results in a smaller image. However, adding or removing pixels can also affect the image's quality, as it can result in pixelation, blurriness, or distortion.
Resizing an image without losing quality requires a careful approach to ensure that the image's original details and clarity are preserved.
Five ways to resize images without losing quality
In a previous post we discussed how to optimize images for performance, for SEO, and for social media. In this post we want to dive deeper into how to resize an image without losing quality. There are various ways to resize images without losing quality, and we will explore them in the following sections.
1. Use high-quality original images
The first step to resizing an image without losing quality is to start with a high-quality original image. If the original image is of low quality, resizing it will only make the quality worse. A high-quality image will have more pixels, which means that it will be easier to resize without losing quality.
When choosing an image to resize, ensure that it is a high-resolution image that has not been compressed or resized previously. This will ensure that the image retains its details and clarity when resized.
2. Use image editing software
Image editing software such as Adobe Photoshop, GIMP, or Pixlr can be used to resize images without losing quality. These programs allow you to adjust the image's size while maintaining its original quality.
Once you have adjusted the dimensions, save the resized image in a high-quality format such as JPEG, PNG, or TIFF. These formats are known for their high image quality and are suitable for most purposes.
3. Use online image resizing tools
If you do not have access to image editing software, you can use online image resizing tools. With these tools, you can upload an image and adjust its dimensions directly online.
Online image resizing tools such as Picresize, Canva, or Adobe Express offer various features such as cropping, rotating, and adding filters to images. They also allow you to adjust the image's dimensions while maintaining its original quality.
To use an online image resizing tool, upload the image and select the resize option. Adjust the image's dimensions and select the preserve quality or maintain aspect ratio option to ensure that the image's original quality is retained. Once you have adjusted the dimensions, save the resized image in a high-quality format.
4. Use plugins
If you are using a content management system (CMS) such as WordPress, you can use plugins to resize images without losing quality. These plugins offer various features such as automatic image resizing, image compression, and optimization.
If you are running on WordPress, Optimus image optimizer won't resize your image, but rather it will reduce it using lossless compression. The great thing about lossless compression is that you don't have to worry about the quality being lost. However, it might not result in as big of a decrease in file size either. So what is recommended is to downsize/downsample your images accordingly, and then you can compress them even further upon uploading to WordPress.
First of all, you should not always rely on CSS to resize your images, but rather upload them at scale when possible. This does get trickier though if you introduce retina images into the mix. See our post on how to use retina and WebP images.
5. Use command-line tools
If you are comfortable using the command line, you can use command-line tools to resize images without losing quality. Command-line tools such as ImageMagick allow you to resize images in bulk while maintaining their original quality.
To resize images using command-line tools, install the tool on your computer and open the command line interface. Navigate to the directory containing the images you want to resize and use the tool's command line syntax to specify the desired dimensions.
For example, to resize all images in a directory to a width of 800 pixels while maintaining their aspect ratio, you can use the following command:
mogrify -resize 800 *.jpg
This command will resize all JPEG images in the directory to a width of 800 pixels while maintaining their aspect ratio. The resized images will be saved with the same filename and file type.
Upsampling vs downsampling
While resizing an image refers to changing its overall size, upsampling and downsampling refer to changing the resolution of an image by adding or removing pixels. When using either process, it is important to choose the appropriate interpolation or anti-aliasing algorithm, preview the image at different resolutions, and choose the appropriate file format and compression level.
Upsampling an image
PNGs and JPEGs, also known as bitmap images, are made up of tiny little pixels. If you zoom in on a photo, like we did on the one below, you can actually see the individual pixels.
Upsampling an image actually refers to the process of enlarging the image bigger than the original source. According to Adobe, when you increase the number of pixels in this part of the dialog box (upsampling), the application adds data to the image. Generally you don't want to do this because the program is guessing where to add additional pixels. However, it also depends on what you are upsampling. With most PNGs you will probably notice a big difference due to they are already smaller and optimized for web. JPEGs and or photographs you can usually get away with a little upsampling before you notice some degradation, simply because their resolution is much larger to begin with.
As you can see below, once you get into the 3x the size realm it starts to become quite blurry. Usually you can get away with 2x upsampling before noticing a big drop in quality.
When your upscaling there are a few ways to maintain some of the quality without seeing huge degradation.
- One way in Adobe Photoshop is to use the "bicubic smoother" option when resampling your image. This can be found under "Image" and "Image Size" in Photoshop.
- Another is a popular premium plugin designed for Photoshop called ON1 Resize AI. The entire purpose of this plugin is to get you the highest quality photo enlargements, using its fractal technology.
- Irfanview and Gimp are also free alternatives which provide image size options which will maintain more of the quality than if you just resized it yourself. For the sampling/quality option you will want to ensure you choose the Lanczos option.
Downsampling an image
Downsampling an image works the opposite way. According to Adobe, when you decrease the number of pixels (downsampling), the application removes data. When data is removed the image also degrades to some extent, although not nearly as much as when you upsample. By removing this extra data ( downsampling) this results in a much smaller file size. For example, you can see below that our original image was 17.2 MB at 3000 by 2000 pixels. When we downsampled it to 1000 by 667 pixels this resulted in a file size of only 1.91 MB. It is also recommend to use the Bicubic sharper option if you are using Photoshop.
Save for web
So we can confirm that downsampling or sizing down your image definitely decreases the file size. You do however want to be careful. If you use the "Save for Web" feature in Photoshop changing the quality can have quite different outcomes. The original image below is 3.1 MB. On the left you can see bringing it down to 20% quality results in a file size of 486 KB, but also pretty bad pixelation. On the right is 50% quality which results in a 799 KB file. Generally aiming for a 50% reduction should result in decent quality depending upon the original image.
Summary
Resizing images without losing quality is essential for maintaining the original details and clarity of an image. When resizing images, ensure that you maintain the aspect ratio to avoid distorting the image. Also, choose a high-quality format such as JPEG, PNG, or TIFF to save the resized image. Finally, test the resized image on different devices and platforms to ensure that it appears correctly and retains its original quality.
As you can see both upsampling and downsampling images always results in some degradation to a certain extent. But by using different tools, such as Photoshop or Gimp, as well as a lossless compression plugin you can do a pretty good job at resizing an image without losing quality. At some point it is definitely up to the user and how much quality they require vs file size.