Resize Images to Make Them Web-Friendly
In this post, we will give you some tips on how to actually edit your images and make them web-friendly – with free software! These same tips will also work if you have pictures that you want to email to someone but the file size is too big (friends don’t send friends images that are 3MB and bigger!)
Ever notice on some websites that it takes FOREVER for an image to load? It will slowly creep in on the page? That’s because the image was not properly sized to be web-friendly.
We are all so used to taking our pictures at the highest possible resolution (like 300 dpi) because that’s what you need to do if you want to print great looking pictures. But the web is an entirely different animal. Since it’s only being seen on the screen, and not printed, the resolution can be as low as 72 dpi. The smaller the file size, the faster it will load. Which makes your viewers happier!
While software programs like Photoshop are fabulous and powerful, they aren’t for the faint of heart. There is a fairly steep learning curve with using such sophisticated software. And let’s face it; unless you have aspirations to be the next Annie Liebovitz (whose work is amazing, BTW!), you don’t need such complex software to edit your images.
In fact, there are a few that are free and allow you to do exactly what you need to in order to get your images up and on the web in the format you need and want. Here are a couple that we like to use when we are in a pinch and don’t want to get all techie with Photoshop.
Pixlr.com
This is one that we stumbled upon and is quickly becoming a favorite of ours because of its simplicity. The best part about it is that you don’t have to download anything (and again…it’s FREE)!
You can edit straight from the website itself: www.pixlr.com. So you can literally edit on the fly!
Just go to the website URL and start using it. Nothing to download. No account setup.
If your image is really big and you need to make it smaller, simply open the file, go to Image, Click on Image Size, and resize it.
A good size for the web is something around 500-800 pixels wide. (The above in this post is 600 pixels wide, just to give you a frame of reference.) Keep the proportions “constrained” so that it adjusts the height in proportion to the width. (If you don’t constrain the proportions, your image will get stretched out and weird-looking.)
In addition to the size of the file, the type of the file that you use is also important. When uploading images to the web (whether it’s social media or your website), saving it as a .jpg file is better than a .png because .png files are bigger. We only use .png files when we need the image to have a transparent background versus a white background like in a logo.
Want to see a live tutorial?
Check out our Facebook Live below:
Preview Image on Mac
If you are a Mac user, you have a built in editor that you may not even be aware of: Preview Image.
Have you ever double-clicked on an image from your desktop or another place where you have downloaded it and saw it pop up to this screen:
If so, you may have been like me and thought that all this screen did was show me a preview of my image or graphic. But there is SO MUCH more that you can do right from this one window; things that I wasn’t even aware of until just a few months ago.
If you hover over “Tools”, a dropdown will appear and you have many options to choose from. You can adjust the color, adjust the size, flip it horizontally, flip it vertically, add an annotation, crop it and so much more! What a goldmine!
If all you want to do is resize the image so that it’s web-friendly, simply duplicate the image by going to File, Duplicate (this will ensure that your original image remains intact). Then go to Tools, Adjust Size and you can adjust the size right there and then go to File, Save to save it!
I’m not kidding when I saw that I used to bring all of my images into Photoshop to resize them. Now that I discovered what Preview Image is capable of, this is where I go whenever I simply need to resize my image.
There you have it! Some very simple ways to resize your image or photo and save it as a web-enabled image!!
Until next time!
