The most common question I get as a graphic and web designer is how to resize images for web. Which is an important question because if you import large images without resizing, your site will load very slow and your readers will get impatient. No good. I have been resizing images for web for a long time and am sharing the easiest and best ways to get small file sizes while keeping quality.
A few of my standards on resizing:
- Keep it under 1MB. In the KB’s is awesome! (Not sure what a KB or MB is? Read here).
- It doesn’t need to be any larger than 3,000 pixels wide.
- Resolution (or pixels per inch) can be set to 72. Pictures taken on nice cameras are usually at 300 which is good for print but 72 is the common dpi for web.
- PNG is a larger file size than JPG, so if you do not need a transparent background use JPG.
- Don’t forget to make a duplicate so you still have the original size!
I’ve show you 3 different ways to resize your photos on different programs: Preview, Lightroom, and Photoshop.
Resize images for web in Mac Preview
Using Mac’s default image view program, Preview, you can very easily resize your images without any fancy programs like Lightroom or Photoshop! I actually find Preview very effective and when I need to resize one or two photos I will use this. Watch the video below to hear my tips!
Three things to change in Mac Preview. You do not have to do all of these, you can do as many until it is the file size you like!
- Change the resolution to 72
- Change the width down to 3000 or 2400 pixels wide
- Export as JPG and move the quality slider down to 70%.
It is quick and easy!
Resize images for web in Lightroom
Lightroom is how I resize my images for web when I want to resize in bulk instead of one by one. Watch the video below to hear my tips when exporting.
Probably the easiest one because all I have to do is set those settings once and I can export images for web lickity-split!
Resize images for web in Photoshop
For those who don’t have a Mac or Lightroom but do own Photoshop, watch the video below! All you have to do is resize images to be around 3,000 pixels wide and save a copy! If it still is not under 2 MB bring it down to 2,400 pixels or 2,000 pixels. Make sure to not go too low or your pictures will end up low quality or pixelated/blurry.
The photo below shows the original (5.6MB) and resized image (640KB) side by side. Can you tell which is which? Probably not because there is little to no difference in the quality but the difference in file size is huge!
Extra tips:
Let’s say you don’t have a Mac and don’t own Photoshop or Lightroom. And you are not a tech savvy person in the slightest. No worries, I’ve got something for you! I have found the website Bulk Resize Photos does a pretty good job of resizing, plus it’s bulk which is just the greatest. I suggest choosing Width and putting in 2400 pixels wide. When you click Start Resizing and get a download, just check the file size and if it is still over 2MB try again with a smaller width size. Easy peasy!
If you are using a lot of images on your WordPress site, I would recommend downloading WP Smush. This plugin will resize and optimize all of your images automatically when you upload onto your WordPress site! WP Smush meticulously scans every image you upload, cuts all the unnecessary data and scales it for you before adding it to your media library. The free version is limited to ‘smushing’ 50 images at a time. For those who are photographers, I would suggest investing in the Pro version of the plug-in since you will have hundreds of images on your site.
You can test your site’s speed here and here. Don’t let a low score scare you, I’ve pulled my hair trying to perfect different site scores but if you are curious you can find stats of how long a page loads and tips on how to fix it.
