By knowing how to resize images without losing quality, you鈥檒l help your look professional and establish trust with users.
It鈥檚 a task that comes up regularly for me as I build websites, design content, or publish social media posts. I might start with an infographic, for example, that needs to be broken up or re-sized for multiple different platforms and viewports. But what sounds like a simple task can turn into important parts of the design getting cropped, fuzzy text, or blurry faces.
It鈥檚 a small but important skill to master because images are fundamental to digital content creation. Whether you鈥檙e , publishing a blog post, or posting on social media, using high-quality images is an absolute must. But what do you do when an image isn鈥檛 sized correctly for a specific use case?
In this post, I鈥檒l walk you through five easy and quick ways to resize any image without losing quality. Then I鈥檒l take a brief look at other image resizing tools so you can find the right one for your website.
Table of Contents
When you resize an image, there are two common methods used: resizing by resampling and resizing by scaling.
Resizing by resampling involves adding or removing pixels from the image, resulting in a change in the total pixel count. This process can cause loss of quality because the software has to guess and create new pixels based on the surrounding ones. This can lead to blurriness or pixelation, especially if the image is downsized significantly.
Resizing by scaling, on the other hand, maintains the total pixel count but adjusts the size of the image by changing how many pixels are displayed per inch (PPI). While this method generally preserves the image quality better than resampling, it can still result in some loss of sharpness or detail, especially if the image is scaled up.
Regardless of the method I鈥檓 using, I always make sure to consider the original resolution and image quality before resizing. It鈥檚 the key to minimizing a noticeable loss in quality.
Resizing images correctly to maintain quality reduces the file size of the image and, therefore, how long it takes for your website content to load. So, it鈥檚 not just a question of quality visuals, poorly sized images can impact your site鈥檚 performance and user experience.
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鈥檚 overall load time. For more on how to make a website, check out .
A found that load speed considerably impacts conversions. For example, the study found that sites that load in one second have three times higher conversion rates than sites that load in five seconds. This means you can鈥檛 afford to sacrifice a single second of load time.
That鈥檚 not to say that high-quality visuals aren鈥檛 important.
Imagine two online stores selling the same pair of shoes, but one has blurry product photos while the other has crystal clear ones. Which store are you more likely to buy from?
Probably the second store. Here鈥檚 why.
Aside from showcasing the product properly, having well-formatted images on a page conveys professionalism. On the flip side, messy images imply a lack of competence. The buyer thinks, 鈥淚f they can鈥檛 get the images right, can I trust that they鈥檒l get the products right?鈥
This is what happens when you resize an image and sacrifice quality. Sure, the image will fit into your banner or post, but at what cost?
Some of these points might sound like common sense, but you鈥檇 be surprised how often I have to work with web developers, clients, and partners to make sure we鈥檙e using the most optimal image size and quality possible. I often don鈥檛 get to choose the source files for a project, and I could be sent poor quality logo files or massive 10MB images to work with for a site. Being able to explain why it鈥檚 important that images are properly sized up or down makes it easier to get those files to the size they need to be.
Here are a few of my best practice tips for resizing an image while minimizing the loss of quality:
Where possible, I always start with a high-resolution image that provides more detail and allows for more flexibility in resizing without significant quality loss. Higher-resolution images have more pixels, meaning there is more information for me to work with during the resizing process.
To avoid drastic changes, I usually resize the image in smaller increments rather than making significant size adjustments all at once. This approach helps me to preserve the image quality and minimizes the chance of introducing noticeable artifacts.
When resizing, I鈥檒l generally maintain the original aspect ratio of the image. This tactic helps me to make sure the proportions are maintained, preventing distortion. Stretching or squeezing an image disproportionately can lead to visible quality loss.
When using WordPress, I often simplify the image resizing process by using a plugin. These plugins preserve image quality by employing advanced algorithms and provide options for automatic optimization, reducing file sizes without compromising quality. They also support responsive design by generating appropriately sized images for different screen sizes.
This is particularly useful in some of my Search Engine Optimization (SEO) projects when I need to optimize the performance of a large website quickly. Some of my favorite plugins include , , and .
If you have experience with command-line tools, like , consider using them to resize images. What I like about these tools is that they allow for bulk processing, and even let you create scripts to automate image resizing which can be a huge time saver.
To resize an image using ImageMagick, I鈥檒l use the 鈥渃onvert鈥 command with the 鈥-resize鈥 option.
For example, the command 鈥渃onvert input.jpg -resize 800x600 output.jpg鈥 resizes the input image to a width of 800 pixels and a height of 600 pixels, saving it as output.jpg.
Upsampling and downsampling are two different processes used to alter the resolution or size of an image.
Upsampling involves increasing the size or resolution of an image. It typically requires adding new pixels to the original image, often through interpolation algorithms. This results in a larger image with potentially more detail, although the added detail is only an estimation based on existing pixels. Upsampling does not actually create new information or improve the quality beyond the original resolution.
One example of when I might use a tactic like this is converting a presentation for use on a super high-quality display, like a large monitor at a trade show. In that instance, medium-quality graphics can be made as sharp and crisp as possible for higher resolution screens.
Downsampling, on the other hand, is the process of reducing the size or resolution of an image. It involves removing pixels from the original image, typically by averaging or sub-sampling adjacent pixels. Downsampling aims to reduce the file size and potentially simplify the image by removing unnecessary details. However, downsampling can also lead to a loss of fine details and smoothness, as some information is discarded.
This tactic is much more common in my day-to-day work. I might use downsampling to create a thumbnail image for a carousel of posts on a main blog page, for example. Or taking a print-ready infographic and downsampling it into a size that鈥檚 suitable for social posts.
Both upsampling and downsampling have their applications depending on the specific use case. Upsampling may be used to increase the print size of an image or prepare it for high-resolution displays. Downsampling may be employed to optimize image file sizes for web or email use, reducing loading times.
Here are a few more of my recommendations for image resizing:
There鈥檚 no standard width or height you should aim for when resizing your image's pixels. It will depend on a variety of factors, including where I鈥檓 putting them on a , whether the majority of site visitors are using desktop or mobile, and so on. I鈥檝e found that between 600 to 1200 pixels should work well for most web images, while still maintaining quality.
A rule of thumb is that you want to strike a balance between the lowest file size and an acceptable quality. I鈥檓 always trying to find this balance so that browsers can process the image as fast as possible, and it still looks great to human users. Generally, an image file size of 100KB or less is acceptable for images that go on your website. Some quality loss will happen, but it won鈥檛 be noticeable if done properly.
You might think that it doesn't matter what type of file (PNG vs. JPEG) that your image is stored in. However, your file type will impact the quality of your image as you resize it.
I usually ask for logos or graphics in PNG, whereas images and larger graphics are better in JPEG form. Here鈥檚 why:
JPEGs typically store high-quality and high-detail images. When compressed, they're easy to share online, however, because of the lossy compression process, some data from the image is deleted as it gets smaller. As you continue to use it, you risk compromising the quality of your image as it loses data over time.
On the other hand, PNGs are designed for this type of resizing. PNGs do not lose any data as you resize them so the image won't become distorted or blurry. This makes them ideal for logos and images that have a lot of writing or small figures and characters. As you resize them, those graphics will remain readable to your audience.
Let鈥檚 look at how I resize images with some of the most popular tools out there. I鈥檒l cover:
First, I click the 鈥減lus鈥 icon on the Adobe Express homepage and select the 鈥淨uick Actions鈥 menu. From here, I select 鈥淩esize image.鈥
This pop-up then appears. I can upload the image I want to resize by either dragging and dropping it into the square or browsing on my device.
I resize the image by either using one of the available templates or inserting custom dimensions. The templates are preset dimensions based on the requirements for various social media platforms.
If I鈥檓 not happy with how the crop looks, I can also adjust the image further by panning the image (dragging it from left to right) or changing the scale of the image with the slider.
Finally, I click 鈥淒ownload鈥 to save the resized image to my device. I can then upload to a website, blog, or social media page.
I start by importing the image by clicking 鈥淔ile鈥 and navigating to 鈥淥pen.鈥 I then have to browse your device and select the image I want to resize.
Next, I navigate to the right-hand panel and unlock the background layer. This is a necessary step to be able to edit the image.
Then I navigate to the menu bar in the header and click on 鈥淚mage.鈥 I select 鈥淐anvas Size鈥 from the dropdown menu. I can then change the canvas dimensions in the 鈥淣ew Size鈥 section of the pop-up box to my desired dimensions. Then I click 鈥淥K鈥 to proceed.
Now, I drag the image around and adjust the edges until it fits into my newly sized canvas. I press the 鈥渆nter鈥 key on my keyboard once I鈥檓 satisfied.
Note: Ensure the 鈥淪how Transformation Controls鈥 box is ticked, as this is what allows you to manipulate the edges of your image.
To save my resized image to my device, I select 鈥淔ile鈥 from the header menu bar. Then, I navigate to 鈥淓xport鈥 in the dropdown menu and click 鈥淓xport As.鈥 This allows me to choose the format for my image (PNG, JPG, etc.). Finally, I click 鈥淓xport鈥 and save to my desired location.
First, I choose the image I want to resize by clicking 鈥淔ile鈥 on the menu bar and selecting 鈥淥pen鈥 from the dropdown menu. I select the image I want to upload from my device.
Once the image is open, if necessary, I zoom out using the slider on the status bar at the bottom of the page to bring the image into focus.
If I want to crop out a portion of the image, I click the square 鈥渟elect鈥 icon and trace the area I would like to keep in the image. Once satisfied, I click the 鈥渃rop鈥 icon to crop the image.
Next, I click the 鈥渞esize鈥 icon to resize the image. This will open up a window with options to resize and skew the image. I can resize the image by percentage or pixel, depending on my preference. Then I click 鈥淥K鈥 to save my changes.
Finally, to save my newly resized image, I click 鈥淔ile鈥 on the menu bar and navigate to 鈥淪ave As鈥 on the dropdown menu. This allows me to choose the format to save my image.
There are a couple of ways to start the process of resizing an image on Canva. With the updated app navigation and photo editor released in 2024, the most straightforward way is to upload my image and go from there.
From the Canva homepage, I click on the 鈥淒esign Spotlight鈥 dropdown and select 鈥淧hoto Editor.鈥
A window opens up where I can click and upload the image I need to resize. I upload the image from my computer by clicking the 鈥淯pload your image鈥 button.
Canva will open my image as a new design, with the original dimensions of the uploaded image. The Photo Editor app will open automatically in the left side panel.
Although I can crop and add new dimensions to the image using Photo Editor, it isn鈥檛 particularly useful for overall resizing. Instead, the image will be resized on the original dimensions of the design, leaving me with whitespace when I go to download it.
Instead, I usually click on the 鈥淩esize and Magic Switch鈥 option in the top ribbon. There, I can access a ton of useful out-of-the-box resizing options for the web and social platforms, as well as the ability to create custom dimensions.
Note: The 鈥淩esize and Magic Switch鈥 tool is only available with a premium Canva account.
Once I鈥檝e set the new image dimensions, I save my changes by either clicking 鈥淐opy and Resize鈥 鈥 which will create a resized copy of the image 鈥 or 鈥淩esize鈥 鈥 which will resize my original image within the same design.
One of my favorite parts of this feature is the ability to select multiple options for resizing at one time to create a whole new set of resized designs. So you can quickly repurpose an image into social graphics across multiple platforms, for example.
Finally, to save my resized image, I rename it in the header bar, then click the 鈥淒ownload鈥 button also located in the header. This triggers a dropdown menu where I have the option to download the image.
For website images, I鈥檒l typically use JPG from the dropdown and leave the quality at 80 since there鈥檚 usually no visual quality loss. But you can select multiple different image types from the 鈥淔ile Type鈥 dropdown and play around with the file size and quality if needed.
As mentioned, when compressing an image to or under 100KB, some quality loss will happen, but it won鈥檛 be noticeable if done properly. Here we鈥檒l look at how to compress an image in Squoosh.
First, I open Squoosh in my web browser (there is also a desktop application. To insert my image, I can either copy and paste it into the pink spot or drag and drop it there.
I can also retrieve it from my device by clicking the image icon on the page.
Then, I toggle the resize icon on the menu bar. This will trigger a dropdown menu where I can adjust the pixel width and height of the page.
To view compression options in Squoosh, I open the dropdown menu under 鈥淐ompress鈥 where several options are listed, but there are three that are my go-tos. These are:
Once I鈥檝e set my new dimensions and compressed the image so it鈥檚 under 100KB, I click the download icon on the bottom right corner of the 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 I recommend:
Let鈥檚 go through a few more of my recommendations for image resizing tools.
If I had to manually resize each and every image I upload to a website, it would require a huge investment of time and energy. The good news is, even with limited knowledge of graphic design, you can simplify the process with an image resizing tool.
Below is a collection of the best image resizing tools. These are some of my favorites, and they range in functionality and price so you can choose the right one for your needs and budget. Let鈥檚 get started.
Resizing.app is a free Chrome extension that allows users to resize images right in their browsers. It features an incredibly simple interface.
Clicking the extension triggers a pop-up page that instructs the user to click an icon to upload an image. Then, once the image is uploaded, the user can resize the image by width, height, percentage, or using custom dimensions.
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鈥檛 show the file size when you鈥檙e optimizing it. That can make it difficult to know when to stop sliding the scale to the right.
What I Like: Resizing.app is a great option if you want to quickly convert an image from one format to another and maintain the same quality.
Pricing: Free
BeFunky is a web-based image editor that allows users to edit photos, create collages, and design digital assets such as banners and flyers. It鈥檚 designed to be Photoshop for beginners. It鈥檚 rich with features but presented in a user-friendly interface.
With BeFunky鈥檚 Batch Image Resizer, you can even resize images in bulk instead of one by one. There鈥檚 a free version with 125 digital effects available, and a with hundreds more.
To resize an image with this tool, you can import the image directly from your computer, choose an image from your Google Drive, or simply drag and drop images into the editor.
Once the image is in the editor, the rest is pretty simple 鈥 select the 鈥淓dit鈥 menu and navigate to 鈥淩esize.鈥 This will trigger a pop-up window where the image can be resized by width, height, or scale.
What I Like: If you鈥檙e working with a paid version of BeFunk, the integration with GDrive makes it easy to access your projects as you work.
Pricing: A free version is available. The paid version costs $4.99 a month billed annually or $9.99 a month billed monthly.
PicResize is a web-based, image-resizing tool that allows users to crop, resize, and convert images. The standout feature of this tool is the ability to resize images in bulk using a feature called 鈥淏atchResize.鈥
This feature allows users to upload up to 100 pictures at once, resize these images using a single parameter such as 鈥渕ake my pictures X% smaller,鈥 and finally save the images in JPG, GIF, or PNG format.
Once complete, users can download the resized images as a Zip folder.
It鈥檚 important to note two things.
What I Like: PicResize is a simple, easy to use tool for any resizing task. But I particularly like its upscaling feature. It uses AI to quickly double the size of images with minimal quality loss.
Pricing: A free version is available. The paid (ad-free) version costs $75 for lifetime access.
GIMP is a free, open-source tool. However, unlike the other tools on this list which are web-based, this tool is a downloadable program.
Although you can use this program for resizing, it is designed as an 鈥渋mage manipulation program.鈥 It has many other powerful features, such as photo enhancement and digital retouching.
To resize an image on GIMP, users can either insert fixed dimensions (similar to other tools on this list) or resize the image completely freehand by dragging the corners of the image.
What I Like: If you need to do some editing on the go without internet access, having a free desktop program to work with is a dream.
Pricing: Free
Let鈥檚 face it: Whether you鈥檙e a site owner, social media marketer, or blogger, resizing images can easily seem like just another thing in a long list of tasks.
I created this post to teach you how to make this process as easy as possible. So, next time you鈥檙e tempted to skip this crucial step, remember that by using the right methods and tools and my tips above, resizing can be quick and painless.
You can resize your images in less time, 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.