In a recent article I explained how to save images for the web with Photoshop. However, I am well aware that many ‘normal’ people don’t have Photoshop – it’s an expensive piece of kit for professional designers and photographers. In this post, I’ll share two great tools to save images for the web without Photoshop, before you upload them to your WordPress site. And they’re both free.
A quick and easy guide to saving and cropping your images for the web without having to spend any money on software.
1. What size shall I save my image?
This is the first and in a way most important question. When you need to publish an image on the web, the exact pixel size of your image really depends on its final use and on your website. This can vary widely, so it’s best to check: usually your theme’s documentation will provide you with the information you need for the best image size and ratio to use.
However, if you really have no idea, bear in mind that the images that come out of your phone and camera are probably way too big as they are – never count on them being ok. They will slow your site down. Here is a quick and dirty cheatsheet with a few scenarios you might find yourself in:
Hi-res photo gallery, possibly full-width: 1920×1280 pixels. 1200×800 will also give you a good final result for the web.
Full-width blog header: 1600×1060 pixels.
Full-width image in blog content area with no sidebar: 960×640 (again, this depends on the individual blog).
Full-width image in blog content area with sidebar: 800×533.
These are just a few examples. Also bear in mind that usually what really matters is the pixel width, while you can do whatever you want with the height (unless you are using an image gallery or other type of feature that requires a set height as well as a set width). You don’t need to worry too much about being pixel-perfect, because WordPress will adjust the size for you where necessary. The important thing is to be aware that you need to resize and optimise your images and you should never upload them as they are straight out of your camera or phone.
Web Resizer is easy to use and above all, it’s free. It’s a very handy tool if you want a quick shortcut to save images for the web without Photoshop. It really does do all the things that it promises it will do for you: it will reduce image size, crop photos, sharpen, resize, change width and height, rotate, adjust contrast, brightness, saturation, convert photo to black and white and even add a border. All with a few clicks and not a penny spent. So please go ahead and click on the orange button that says Resize Photos Here to get started.
The design of this page is not about to win any awards in term of UX but I’ll remind you, it’s free. So at the top of the page you’ll see the button that says ‘Choose file’: click on it and browse your computer to find the image that you need to work on. Then click ok, and the file name of you image will appear next to the ‘Choose file’ button. At this stage, you must click on the ‘upload image’ button just to the right of the filename: do that, and you will see your image just like in the image here. Your original image will be on the right, and the reduced image will be on the left.
If you don’t need to crop and don’t wish to add a border, head for the simple set of editing tools underneath the images: if you know the size you want for your image, you can input it into the ‘New size’ window. You can also perform some basic image manipulation, which is nice: give it a tint, change exposure, contrast and saturation. Knock yourself out and experiment in peace: if you’re not happy, just click on the ‘start over’ button.
You can also rotate and sharpen (keep it low!) and lower the image quality to get an even smaller and faster image. However, please make sure that you don’t compromise over the quality of the image too much. When you’re done, you can download the optimised image and upload it to your site. Of course, always keep the original.
If you have more than one image that you want to apply the same parameters to, you can try out the bulk optimizer by clicking on the green button at the top of the page. I haven’t used it so I cannot vouch for it but I have no reason to think it wouldn’t work.
The important thing is to be aware that you need to resize and optimise your images and you should never upload them as they are straight out of your camera or phone.
Pic Resize is another excellent and free tool for picture resizing and saving without Photoshop.
This is what you see when you get to the page:
The useful thing is that you can upload images from your computer as well as from a URL, which means that if you have uploaded photos anywhere on the web – your flickr account, your Facebook page, and so on – you can resize them without having to download them and then upload them again.
Once you have uploaded the photo or entered the URL, you get to the next page where you can do all your cropping, rotating and flipping. As you’re done with that, you can move on to Option 2.
Option 2 lets you resize your picture, with all the sizes you could possibly need in the drop-down menu. You can’t edit exposure, contrast and quality like you can in Web Resizer, but on the plus side Option 3 lets you choose from a number of filters to make your image more interesting.
Once you get to Option 4, you can choose your image format between GIF (normally used for simple animations as it uses a limited range of colours), Jpeg (lossy compression), PNG (lossless compression that allows for transparency) and BMP (bitmap file format). If you need a reminder of which format you should choose for your image, you can find a brief explanation in the previous post on how to save images for the web with Photoshop.
Otherwise you can always ask Wikipedia.
When you’re happy with your choices, click the ‘I’m done’ yellow button at the bottom, and get to your final result. You will find you have a number of options: view your image, resume the edit, save the new image to disk, or publish it directly on a number of web platforms.
As a final note, I’d like to add here that the tools I recommend in this post are meant for when you need to save your images for the web without Photoshop and you need to crop, resize, and do a modicum of editing: they’re not, however, necessarily the best tool for optimising your image, i.e. compressing and making an image smaller without changing its pixel dimension. Most optimisers will make your images leaner and faster, but they won’t allow any editing you to crop and/or resize. This is meant to be a guide for those who have no access to an image editor but still need to resize and save images for the web. Hope it helps!