Wait! Before you upload those awesome pictures you took with your phone or camera to your website, have you even looked to see how big they are?
No? Well, you should!
Why size matters
There are two sizes to consider when using images for your website.
Screen size: The actual real estate of your image, which is the total width x height. Simple enough, right? Think 4×5 photos or 12×16 framed art hanging on your wall. How much physical space do your images take up?
File size: Images are measured in KiloBytes (KB) or MegaBytes(MB). MB are heavier than KB. So, the lighter your image files are, the faster they load. Makes sense doesn’t it?
Trim the excess pixels
There are many image editing applications to reduce your images’ screen and file sizes.
Maybe you don’t own an old version of Photoshop or want to pay the monthly fee for Creative Cloud… Wanna learn about FREE online photo file and size reducer alternatives? Read on!
The digital diet process
– The same image was used for each example.
– Image was resized from 4000 x 2667 (1.2 MB) to 1000 x 667 (37 – 69 KB).
Online Photo Resizers:
Image Resize
Crops and resizes images online. There are zero bells and whistles as it just gets the job done.
The process:
• Choose to upload an image from your computer or select one from the web.
• Resize the image to various percentages (25%, 50%, 75% of the original or custom size).
• Choose image format (.jpg or .png) before saving.
What I like:
• The simplicity of the image resizer.
• Option to crop images.
• Shows the original and the newly reduced image size.
• Easily saves the image to your desktop.
• Ability to select an image from a website (of course you need to know the URL).
• Greatly reduces file size.
Quick Tip: Apple users “right click” for us means “control click.”
Saved image size: 37 KB
Web Resizer
Quickly optimize images for the web with a few extra features.
The process:
• Choose file and upload an image from your computer.
• Add new size in pixels (choose width or height and it will automatically retain proportions).
• Apply changes to resize image.
• Download image to desktop.
What I like:
• Shows the original and optimal images side by side to compare sizes.
• Option to rotate, crop, add border, add image tint, adjust exposure, contrast, color saturation.
Saved image size: 69 KB
PicMonkey
If you’re interested in more than just resizing your images, check out this photo editing tool to edit/touch up, design and create collages.
The process:
• Select Edit and choose to upload an image from your computer, Facebook, OneDrive, Dropbox or Flickr.
• Choose resize (yes, you’ll see choices for crop, canvas color, rotate, exposure, colors, sharpen too).
• Resize image by typing dimensions to resize by percentages or proportions (I prefer proportions since it shows the results in pixels).
• Apply changes and save to your computer (or share).
What I like:
• Ability to rename the image before saving.
• Choice of image quality (Roger is fine for website images).
• Lot of fun tools with the free version; add effects, touch up images (remove those wrinkles and brighten your teeth!), add text, add overlays, customize image with frames, add textures, add a theme (you always wanted a super hero inspired image, right?).
Note: Paid version is available monthly ($4.99) or annually ($33) for an ad-free experience and full access to all the features.
Saved image size: 64 KB
Wait! You’re not done!
Now that you’ve gotten your image to the right screen size, did you know you can reduce these file sizes even more?
TinyPNG
In techno speak, TinyPNG uses smart lossy compression techniques to reduce the file size of your image files.
In plain English; it reduces images to use less bandwidth and load faster.
For example:
Original file – 1.2 MB –> 164.4 KB (86% savings)
Image Resize – 36.9 KB –> 30.3 KB (18% savings)
Web Resizer – 68.7 KB –> 28.7 KB (58% savings)
PicMonkey file – 64 KB –> 26.6 KB (58% savings)
What I like:
• It’s super fast and reduces image file sizes considerably.
• Photoshop plugin. This is great for people who “save image for web,” but want to reduce the file sizes further without leaving the Photoshop application.
• WordPress plugin. I haven’t tried this yet, but it’s on my list of things to do!
If you tried the TinyPNG WordPress plugin, I’d love to hear your thoughts!
Weighing the pixels
The three online image resizers I’ve suggested are by no means the only or free tools out there. If you edit your images, which online editor do you use?
Psst! If you have no interest or time to resize your images. I can do them for you, name them appropriately and upload to your Media or send them via email or DropBox*.
*The DropBox link is a referral link and I’ll get some extra space if you sign up. It’ll come in handy and I thank you in advance. If you haven’t tried DropBox yet, you should. It’s great for sharing files, remote storage for your videos, photos and files. You can invite people to share your folders and it’s awesome for collaborating on projects.
Leave a Reply