Watch the video or read the transcript below. You’ll learn how to resize images for web and properly compress them before adding them to your website.
If you don’t resize and compress your images, you could be causing your visitors to needlessly wait an eternity for your website to load!
This can even negatively impact your search engine result ranking, which is something no one wants!
What’s In This Article?
- The Importance of Optimization
- Resizing & Compressing Images
- How To Do It
1. Why Is Optimizing Images For Web So Important?
Let’s Start With A Little Math
An image that comes straight out of your camera is HUGE.
The dimensions are usually over 5000 pixels wide, and the file size is generally anywhere from 2 to 10 MB.
I’ve even noticed some of my own images that have a lot of detail in them have been over 14 MB each, straight out of the camera!
When it comes to websites, the recommended page size is around 2 MB (although I will say this is very difficult to achieve for most of us, especially photographers and other creatives who need websites that are very heavy on visuals). Everything, from the scripts to the HTML to the fonts on your website contributes to your overall page size, however, images usually make up over 90% of the total size which is why it’s so important we focus on optimizing them.
Now, consider this: most of us have at least 3 images on our website’s homepage. At. Least.
If each of our images was 10 MB, our page size would be 30 MB…just in pictures!
(Most content management systems these days will take it upon themselves to resize a really large image for you. For example, if I upload my 14 MB, 5000+ pixel wide image to my WordPress site, it will automatically shrink it down to about 1 MB and 2500 pixels wide. However, I know we can get more bytes out of it than that…plus, my image doesn’t look the best when WordPress automatically compresses it. This is why I prefer to optimize on my own before uploading, and it’s why I’m teaching you this method, too.)
What Happens When I Don’t Optimize My Images?
Not optimizing your images for your website leads to some really negative effects:
- First and foremost, yes, your visitors will end up waiting a very long time for your website to load. Oftentimes, this leads to them losing interest. They get tired of waiting and move on to something else.
- It can affect how you rank in search engine results. Google doesn’t reward slow loading websites, so you always want to make sure yours loads as fast as possible!
- Smaller images take up less space, and also use less bandwidth, on your hosting server. This will help ensure you don’t exceed the resources you’re allotted. (If you do require extra resources, this usually comes at a cost!)
The bottom line: OPTIMIZE. THOSE. IMAGES.
2. Resizing & Compressing Your Images
To optimize our images for web, we’re going to do two things: first, we want to resize our images so their dimensions aren’t huge.
This alone will help shrink the file size down, however, we still will want to compress our image as well to squeeze a few more bytes out of it.
For this tutorial, I’m going to use this free image I downloaded from Unsplash.
Raw image specs:
Dimensions: 5184 x 3456 pixels
File Size: 1.7 MB
(It’s likely this image has already been compressed a bit since it was uploaded to Unsplash; the file size here isn’t outrageous for the dimensions.)
We want to resize this image because we definitely DON’T need an image with dimensions of 5184 x 3456 pixels anywhere on our website.
What dimensions should my image be?
What size DO we need our image to be?
Well, it depends on where it’s going.
- If the image is going to span the full width of the page, I usually recommend resizing to around 2500 pixels wide.
- If the image is NOT going to span the full width of the page, you can usually get by using an image that is around 1300 pixels wide. (However, this really depends on your unique website and what space you are trying to fill.)
Back to my example. When I take this image and resize it, here are the new specs:
Resized image specs:
Dimensions: 2500 x 1667 pixels
File Size: 607 KB
Reduction total: 64%
That’s a pretty great reduction, however, we can always do more!
We can certainly squeeze more bytes out of that image’s file size by compressing it.
There are two main ways I like to compress my images:
- Using Photoshop: this allows me total control over how much my image gets compressed, so this is my favorite method!
- Using an online tool: There are various services online for this, but my favorite is Tiny JPG (I guess I think the Panda mascot is cute!). Simply upload your image, let the tool do its magic, then download your compressed image.
I’ll show you how to use both of these methods soon, but first I want to continue on with my example.
Original File Size: 607 KB
File Size: 278 KB
That’s nearly an 84% reduction from where we started! That’s going to make for a much faster loading page than if we had not done anything to our image.
3. Okay Great…Now How Do I Do It?
I want you to choose a group:
- Group 1: Adobe Photoshop users
- Group 2: Non-Adobe Photoshop users
Yes, I Have Adobe Photoshop!
Photoshop makes resizing and compressing images a breeze!
Resizing in Photoshop Instructions:
- Open your image file in Photoshop
- Go to Image >> Image Size and type your new width value in the width box. The height value should automatically get configured so the image doesn’t appear distorted.
- Click the “OK” button. That’s it!
How To Compress Images In Photoshop:
- After resizing your image in Photoshop, go to File >> Export >> Save For Web (Legacy)*
- Ensure “JPEG” is selected from the dropdown box, and then play around with the number in the quality box. What your image looks like after apply that amount of compression will be shown to you on the bottom.
- Note the image size in the lower left hand corner. Remember, the lower the better! Try to find the perfect balance between a low file size and quality that still looks good. (50-65 quality usually is the sweet spot, I’ve found.)
- Click the “Save” button to save the file.
* It appears Adobe may be phasing this function out, however, it still exists at the time of authoring this tutorial. If you don’t have the “Save For Web” option, you can use File >> Export >> Export As. It is mainly the same thing, however, you aren’t able to see the file size as you play around with the compression, so I find “Save For Web” more useful.
Bonus tip: always save images that are photographs, like the above, as JPGs. PNGs should be used sparingly, and are best for when you have a graphic that has sharp lines (like an illustration).
For Non-Photoshop Users…
How To Resize An Image On A Mac Using Preview:
If you’re using a Macbook, resizing an image is super simple!
- Open the image in Preview. (Most of the time, you can just double click on your image and it will automatically open in Preview, however, depending on how your Macbook is set up, you may need to right-click (or CTRL + click) on the image thumbnail in Finder, then go to Open With >> Preview
- Go to Tools >> Adjust Size. Type your new width value in the box. As long as you have the “scale proportionally” box checked, the height value will automatically adjust.
- Click the “OK” button, then go to File >> Save to save your changes.
Bonus tip: if you want to see the file size of your image, while in Preview, press command + i on your keyboard. This will bring up the file’s “General Info”, including the file size.
Bonus tip: resize multiple images at a time by opening several up in Preview, then selecting them all before completing steps 2 + 3 above.
How To Resize An Image On A Windows PC:
You’re going to hate me for this one, but I’m not providing explicit instructions here because it varies by operating system and what software you have on your computer!
I recommend going to Google and searching: “How To Resize Images on Windows [enter your operating system here]”. This should lead you to specific instructions tailored to your unique set up. (If you’re stuck, try using MS Paint.)
How To Compress An Image Using An Online Tool
- Go to TinyJPG.com (it’s my favorite online tool for this!)
- Click within the box with dashed border to upload your image(s)
- Let the tool process your images, then download the new, compressed versions!
And that’s a wrap! It may seem like a lot of steps at first just to add images to your website, but once you learn how to resize images for web and get in the habit of properly compressing them, it’ll become second nature.