If you work online at all, you know how important image quality is in presenting a clean and professional look.
Stock images and royalty-free images are easy enough to find, but how do you resize an image without losing quality to make it fit for your purposes?
It doesn't matter if you're wanting to use an image for your blog article, social media platform, or as a backdrop for your video, getting the right aspect ratio for your image is important.
You want your images to enhance your brand's look. An image that looks stretched or disproportionate can cause your brand authority to suffer. But don't worry, we've you covered.
- Fantastic Image Formats and Where to Find Them
- Why Does Resizing in Image Make It Lose Quality?
- How to Resize an Image Without Losing Quality
- Resize an Image in Four Steps
- Frequently Asked Questions
Fantastic Image Formats and Where to Find Them
There are lots of different file formats that you'll use depending on your purpose. While you can use some of these interchangeably, for maximum effect, convert each image to the specific file type and then optimize from there.
JPG – By far, the most common type of image you'll see on the Internet is the JPG format. It's more or less the “Swiss Army knife” of online images, since it can be used in both web-based projects and documents. The only downside is that is the file size decreases, the image quality goes down as well.
TIFF – Although a TIFF can be transferred with virtually no loss of image quality, you should avoid using these raw files online, since it can drastically reduce your load time. The most often used for printing photographs.
PNG – PNG files are low resolution files that allow you to edit the image without much quality loss. A PNG file is best reserved for text-based content, such as infographics and charts.
PSD – If you receive a file as a PSD, that means your designer created your image in Adobe Photoshop. While you have to have Photoshop to manipulate the image, the file is produced using multiple layers that can be edited individually.
GIF – Contrary to popular belief, a GIF (however you pronounce it) is not a short video but a sequence of images displayed rapidly. The amount of colors you can use in a GIF are significantly less than other file types, which provides an advantage in speed but a loss in overall image quality.
Why Does Resizing in Image Make It Lose Quality?
A high-quality image on the internet needs to serve two primary purposes: display professionalism and decrease the load time for that page.
Trying to find the balance between the two can be tricky; a high-resolution image will look better but will also take longer to load. Both blurry pictures and a slow website can kill your traffic.
As a general rule, you should aim for an image file size that is around 100 KB. This will provide you with a nice balance of quality and size. The loss of either won't be noticed by the site visitor.
That's a good number to shoot for, but what happens if you have an image that is 10 or 20 times that size?
Typically, you'll want to scale it down a tad, but when you do, it will also reduce the amount of pixels that are inside the image. Since you're subtracting pixels when you decrease the size of an image, you most likely won't notice a quality difference on the way down.
It's much more difficult to add pixels to an image, so if you try to make the resized image larger, it will come across as blurry.
This is one reason why it's a good idea to keep the original versions of any images on your computer, even after you resize them. If you ever need to manipulate them further, you'll want as many pixels in the original size as possible.
How to Resize an Image Without Losing Quality
Since most images are static, finding an image size manipulator that can make it the size you want can be hard. Fortunately, there are a few solutions on the market that can accomplish this, both free and paid.
Use an Online Tool
if you're going to be doing a lot of photo manipulation, it's worth it to invest in some premium tools like Adobe Photoshop.
Seasoned professionals rely on this software every day to perform complex editing tasks, such as adjusting contrast, inserting elements, and — yes — resizing images.
Besides the complex learning curve, one of the main drawbacks to people using Photoshop on a regular basis is the cost.
If you still want a high-powered image editor without the cost, consider using a free alternative like GIMP. It's open-source and free, so you should have most of the features you need.
Another option besides downloading software is using a free online image resizer like SimpleImageResizer.com or Resizing.App. As their names state, both of these services allow you to resize your image to where you want with a few clicks.
One last online tool that you might want to look into is Canva.
Not only can you put images in the exact size and format you want, but they also have pre-made templates for the most popular platforms: blogs, social media, and ads. There is a free version, but a pro subscription will only set you back $13 a month.Try Canva Here
Use a Plugin
Assuming you use WordPress, there are a variety of plugins that will allow you to resize an image automatically when placing it on your website.
Two of the most popular are Smush and Imagify. Both are free to install and free to use up to a certain limit, with a paid plan if you want more bandwidth.
Even though Smush and Imagify are used by thousands of websites, you should also look at plugins like ShortPixel, EWWW.io, and TinyPNG. They might not be as supported by the WordPress community, but many users have reported having good results with their services.
If your plugin uses a “lazy load” feature — which means the image won't actually load until the user scrolls to that section — it can conflict with the rest of your website.
Ironically, it may cause your site to take longer to load because of coding issues, or it could shift your content to make the page look wonky.
Resize an Image in Four Steps
The technical aspects of resizing an image will depend on which type of tool you use. An online platform that lets you manually resize it will usually net you the best results, but it's also labor-intensive.
An image compression plugin will take care of all that automatically, but you might have to run the compression system manually from time to time.
Regardless, if you want to manually resize your image, here are the four steps you need to follow.
Upload Your Image
Most image resizing tools allow you to simply drag and drop your image onto the interface.
You may need to upload it directly from your desktop, so make sure it's in the right file type for your software.
Determine the Format
Do you want to export it in a PNG or JPEG? Are you creating a GIF, or do you need a file you can manipulate, such as vector images?
If you don't know exactly what type of file you need, some services will allow you to choose a platform-specific output.
You may be able to export it to the desired dimensions of a social media profile or header image for your blog post.
Understanding the pixels are only half the battle, though; the specific aspect ratio you use is just as important.
Some platforms have a 1:1 aspect ratio, whereas others use a 16:9 to achieve optimal performance.
When in doubt, consult the individual platform you're using for best results.
Download and Compress (If Necessary)
Once you have your picture the size you need it, hit the save button and download it to your desktop. Check the resized image properties to ensure that your file size is at an acceptable limit — ideally, around 100 KB.
If the file sizes are too large and you're wanting to use them on your WordPress site, the plugins mentioned above should automatically compress your file.
If not, go back into the resizing software and choose a lower resolution. You'll lose a little bit of image quality, but you'll make up for it with speed.
Upload and Test
Finally, upload your new image to your platform of choice and see how it looks when it goes live. Social media platforms will usually trigger an error message if the image is too large, so resize if necessary.
Additionally, use an online speed tester like GTMetrix.com see how the image affects your website.
Frequently Asked Questions
Can I Enlarge a Picture for Print Without Losing Quality?
Enlarging images for print requires a bit more technical knowledge, but it is possible depending on what software you use.
Adobe Photoshop does this by preserving the details, but you can also use the native Preview function on your Mac when opening your image. Adjust the size under tools, but also uncheck the “resample image” box underneath. This will allow you to adjust the resolution before exporting to your new dimensions.
How Do I Resize Images in Bulk Without Losing Quality?
If you want to resize a bunch of images at the same time without losing quality online, you'll need to use a free tool.
The aptly named BulkResizePhotos.com provides just such a service. All you do is bulk select your photos, add them to the platform, then re-download. Remember to keep the ones with the original dimensions in case you need to reuse them.
The tools mentioned above — Imagify and Smush — should also resize your photos automatically. Once you install the plugin, run the system so that it resizes all the images at the same time.
It should take a few minutes to run, but the results will speak for themselves.
What's the Difference Between Resizing Images and Scaling Images?
A question like this falls into the whole “not all squares are rectangles” debate. While resizing images can include scaling an image, scaling doesn't always include resizing.
Confused? Let's dive deeper.
Scaling an image means that you're taking the same dimensions of the original image, just enlarging it or making the image smaller.
Resizing images means that you're changing the proportions of the image's size itself. If the original image was a 4:3, converting it to a 16:9 would make it appear different.
Learning how to resize an image without losing quality isn't rocket science, but it does take a little bit of time. Professional digital graphics artists will tell you that it's an art more than a science, so don't get discouraged if it still doesn't seem right after several tries.
Take advantage of the software that you have available to make your life easier, and try to find the right balance that works for you and your audience.
Check out our list of 20 sites offering free photos for blogs!