Uploading Images Online & Tools to Reduce File Sizes (2 are Free!)

Sizing images for web can be tricky and sometimes even confusing. In the past, webmasters were the only people who knew how to properly upload images to the web. Now that the online world has become more accessible through simplified apps and more intuitive software, image uploading is everyday and available to everyone. Though its functionality has become easier, there are still guidelines to keep in mind when uploading images for websites, video displays, and social media.

Here are my tips to guide you through image uploading, and how to get the most out of your assets.

What types of images NOT to use: Let’s just get these out of the way…

Images from social media or Google (unknown sources): By now, so many things are recycled and re-recycled online, that no one knows who is the original source. You shouldn’t use these images as your own without proper crediting and acknowledgement of the source. This means they’re off limits for use on your own website, your business’ site, and even on social media pages. You can and should continue to share those funny memes as normal using the “Share” button, just don’t try to use or post these as your own.
Watermarked images: Never, ever use Photoshop (or any image editors) to remove a watermark. Never crop out a watermark. These are legal signifiers that identify the photo’s original source. Think of it as erasing and author’s name from the spine in the book, and writing in your own.
Your own images from social media: An estimated 350 million photos are uploaded to Facebook every day. So how are Facebook and Instagram, etc. able to store so many images? They compress them to death. By compressing, I mean they reduce the quality of your photo (drastically, in this case) when you upload it. It’s so easy to locate/download your shared photo instead of finding the original, but when possible, always opt for the original photo file. The quality is well worth the time.

What types of images SHOULD I use online?

Stock photos (istock.com, thinkstock.com, shutterstock.com, etc): These sites are finally coming around and offering images that look more real and less “stock” (meaning staged and unrealistic). However, there are certain sites that only allow photos to be used for personal use. Check the fine print to be sure. Once you decide on an image, download the appropriate pixel size (small, medium, or “web” size). Only purchase a large size if you’re going to use it for print as well. I’ll get into why you should do this in a bit…
Images by photographers: Once you have the photographer’s permission, be sure you upload or post, always giving written credit to the photographer.
Your own images on your camera/computer/phone: These are, of course, the safest images to use on your site. Keep in mind that if your photos are looking grainy or blurred (pre-upload), you may want to think about upgrading to new camera or a new smartphone. By now, many smartphones (like the iPhone 6S and up) have caught up to high end point-and-shoot camera, taking photos that are generally as good as DSLRs.

So, now that you’ve got your quality photo ready to use online, chances are, your image is quite large. Check what size image you need for your website and for use on a digital display. You may need to compress your image to a smaller size. (For social media, it doesn’t matter. Facebook, etc. will compress the images on their own.)

Why are large image sizes a problem?

In short, they slow things down. If you’ve got large images on your website, every picture ads extra load time. For instance, if you have an image that is 1000 x 1000 pixels, but you have scaled it down to 100 x 100 pixels, your browser has to load ten times more than necessary.

In order to get your images lean & mean, optimize them.

What is an optimized image?

By definition, optimized means to make as effective, perfect, or useful as possible. That’s the goal. We want to have the best looking images at the smallest possible size.

Here are 4 tools to optimize your images:

imageoptimizer.net – For Scaling/Resizing Images
This is probably the simplest DIY optimizer you will find and you can use it on your phone or computer completely free. Just choose your file and upload. Set your quality (I recommend Best Quality, but definitely play with the settings if the file size still seems too large). Set your max width and height. For use on your phone, make sure to save your newly optimized file to your camera roll. For doing a batch of images, you might want to download the app (also free).
Tinypng.com – For Reducing File Sizes
With this optimizer, you can reduce file sizes (for example, your 3MB photo will be compressed into 400K) of up to 20 images at a time . It’s completely free and it’s got a cute interface–who doesn’t love smiling pandas? The only thing I don’t love is that you have no control over actual image sizes it produces in the end.
WordPress
You may already be with familiar with WordPress if you use it to update your business website, but perhaps you did not know that you can use it to resize your images upon upload.
- In WordPress, choose “Media” on the left-hand side and “Add New.”
- Drag and drop your file from your desktop into the browser menu.
- Select “Edit Image.” Type in the new dimensions (if you type width, the height automatically adjusts to scale).
- Click “Scale” then make sure to save the image.
Photoshop
This is the tried and true method for optimizing images.
- Choose File > Export > Save for Web & Devices. Now you have the option to choose your image size and experiment with the quality until it looks good.
- Move the quality slider down until you start to see the image lose quality. You’ll know you shouldn’t go lower than that.
- Also, on the bottom left you will see how adjusting the quality and size of the image affects the file size. I use this feature a lot for creating digital ads that have to be a certain file size.