Image Editing Tools For Web and WordPress
Although WordPress allows for some image editing capabilities, it’s not ideal to upload large images into your WordPress admin and use that for re-sizing or cropping images. You’ll end up storing a lot of extra images on your server and over time it could affect the performance of your site.
It’s much cleaner to do your image editing outside of WordPress and upload images at the size you need them. This is especially true if your theme features a slider, or uses featured images that need to be very specific dimensions.
Image-related terminology
When dealing with images for the web there’s a few concepts you should become familiar with.
Dimensions – typically expressed in pixels, for the web. So if your theme says you need an image of 500 x 200, that would mean 500 pixels wide and 200 pixels tall. This represents the size of the image as it appears on your screen.
File size – This is the amount of disk/storage space the file takes up. So the bigger the file size the more space on your server it takes up, and the longer it will take to load on the web page. The file size is often proportionate to the dimensions and resolution of an image, but an image can also be compressed so that the dimensions remain the same, but the file size decreases.
If you take an image right off your digital camera, it’s likely to be a few MBs which is too weighty for use on your website. The optimal size may depend on exactly how the image is being used, but I generally tell people to shoot for around 30kb. If you have some type of portfolio site where you will be showcasing larger images, but perhaps only one image per page, you could go for a higher size – maybe up to 100kb. But if you have multiple images on a page, as many WordPress homepages do, the lower the number, the faster your site will load.
Dpi – dots per inch. This relates to the resolution of the image – the higher the dpi, the higher quality of image you have. 300 dpi is a print quality image and is generally overkill for the web. Typically higher resolution images have a larger file size, so reducing the dpi to 72 for the web is usually an easy way to cut down on the file size.
File formats
Generally on the web you’ll be using .jpg, .png and perhaps .gif files. If you want to super-geek out and find out the difference between all three, you can do so here.
Image Editing Tools
Online Editors
Canva.com – a great online editing tool that also has layouts for different social media sites etc.
Pixlr.com – this is a very nifty and easy site to use. If you just need to do basic things like re-sizing, cropping and even some basic effects, you can use their Express version.
Both Canva and Pixlr work in a similar way. You just upload your image, edit using their website interface, then download the edited pic to your computer.
Programs
Adobe Photoshop – the big momma’s house of image editing. Unfortunately it costs a pretty penny unless you have friends who are generous with their software (I’m not of course advocating bootlegging…..)
GIMP is a free download for both MAC and PC. They also have some handy tutorials to get you started.
Preview (MAC) – If you are lucky enough to be a MAC owner, you more than likely have the program Preview already installed on your computer (check your Applications folder) . This handy program does the basic resizing, cropping and filesize optimizing that you typically need for WordPress.
Need images?
While Google Image search provides access to a vast selection of images, you should be careful about using anything you find – you could be violating somebody’s copyright. Here’s a couple of places to find royalty-free images (assuming you are not selling the images, just using them in blog posts):
Flickr.com – after you type in your search, be sure to click on Advanced Search at the top , then check “Only search within Creative Commons-licensed content”. This will enable you to find images that people don’t mind you using, as long as you provide attribution in the way of a link back to the Flickr page. Each image on Flickr has a License section in the right column where its owner can designate how they allow the image to be used, so be sure to pay attention to that.
* header image courtesy D Sharon Pruitt