Image Editing Tools For Web and WordPress

In: Blogging Basics


image editing tools and terms for the 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

Picnik.com – an online editor owned by Google. It’s intuitive to use and integrates with Picasa should you use that service.

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 Picnik 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. Supposedly it works on both MAC and PC, but the installation appears to be much simpler for a 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):

PhotoXpress.com

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

Weekly WordPress Tips To Your Inbox
+ Get 50% Off The Beginner's Guide to SEO Ebook!

Lucy Beer - WebTrainingWheels WordPress TrainingDo you need a personal WordPress teacher to help you learn what you need to know without wasting time? I provide customized WordPress tutoring in-person or remotely via phone/screensharing.


Comment Form

Weekly WordPress Tips

+ Get 50% Off The Beginner's Guide To SEO Ebook!

How I Can Help You

Hi! I'm Lucy Beer. I know that WordPress is liberating when you know how to use it, and bewildering when you don’t. I help individuals and businesses learn WordPress for their specific needs. I will accelerate your knowledge and cut your learning curve in half (at least!). Generic tutorials and videos only go so far - when you need specialized knowledge, or a real person to answer your questions, that's where I come in. I help non-techies understand and use the web to empower their personal or business mission.

Learn How To Get Targeted Traffic To Your Site >> $20

Socialize

Services I Use & Recommend

Siteground Hosting
Sucuri
WP Engine
Gravity Forms
  • Dorothy at Shockingly Delicious: I just updated WP and I really miss not being able to highlight text with a background color. I didn [...]
  • LucyBeer: Thanks and you're welcome! I need to update it a little to talk about some of the new details i [...]
  • LucyBeer: Sounds like you'll need something like the "Members" plugin by Justin Tadlock [...]
  • Taimoor: How can we make certain part of the post password protected? [...]
  • mommyrunsit: I'm so glad I found this post! Thank you so much - it's been extremely helpful. I've [...]