The Easiest Way To Add And Size Images In Your WordPress Website

WordPress Images Easy Way Add and ResizeWordPress is a wonderful platform for building your website because it is extremely configurable and adaptable to almost any situation.

However, one of the things that I struggle with is adding and configuring images for websites. Maybe I’m too picky about how images look on a website, but I will spend twenty minutes sometimes sizing an image in the HTML code so that the text flows around the picture just the way I want it.

It shouldn’t be that difficult to put an image in a page or post and get it to look right. So what are the options?

Featured Plugin - WordPress Infinite SEO Plugin

Fully integrated with the SEOMoz API, complete with automatic links, sitemaps and SEO optimization of your WordPress setup - this is the only plugin you need to help you rank your site number 1 on Google - nothing else compares.
Find out more

Size My Images Before Uploading Them To My WordPress Website

Online

There are numerous online tools that you can use to resize your images – and most seem to do a really good job of it. A simple Google search will reveal quite a few that you can use freely.

Personally, I use Shrink Pictures – a free online service that does a pretty good job. Is it the best? Probably not. I only use it because I found it a long time ago and it works when I need it to. Occasionally, an image is not high quality to begin with and the image I get from Shrink Pictures is pixelated. When that happens, I just try to find a better image or fire up one of my installed programs mentioned below.

On My Computer

You have several options to resize images on your local machine – PhotoShop, Gimp, and several other well known tools can resize images; however, they may be a bit overkill just to resize an image.

A free tool is available for download at cNet called Free Picture Resize Starter.

One feature that is very promising on this tool is the ability to batch resize photos. One of my clients, a cabinet shop, gave me over a dozen DVD’s with photos of their cabinet work on them – but all the images were HUGE. I am resizing them all – one by one – to a standard height so that there is some consistency when I put them in a gallery, slideshow, or lightbox. This process is tedious at best. Free Picture Resize Starter states that I can set a parameter and apply it to all images.

Featured Plugin - WordPress Google Maps Plugin

Simply insert google maps into posts, sidebars and pages - show directions, streetview, provide image overlays and do it all from a simple button and comprehensive widget.
Find out more

Load My Images To My WordPress Website And Size Them There

Using The Visual Editor

WordPress Image Visual EditorOne of the limitations of the visual editor when resizing images is that you are limited to the incremental percentages for resizing. Plus, I have found the results inconsistent and unpredictable. My logic may be flawed here, but if I have a full size image and I change the percentage to 80% in the visual editor and close it, then reenter the visual editor, the slider should be at 80%. It is not – it has returned to 100%. From there, my frustration grows – so I’ll just stop on this point. I do not use the visual editor for resizing images.

Using The HTML Editor

This has been my preferred method for resizing images – not because I particularly like it, but because it is consistent and dependable.

When you add an image in the WordPress HTML editor, you are show several size options (depending upon the original size of your image). A recent photo that I added to a post gave the options “Thumbnail”, “Medium”, “Large”, and “Full Size”; however, sometimes “Large” and even “Medium” may not be options if the original image is too small. I usually pick “Medium” initially and work from there.

If you then look at the HTML for the image, you will find two parameters that you will want to change:

width=”XXX”
height=”YYY”

These are your two key numbers. I will occasionally increase these numbers, but you don’t want to increase them too much (I usually try to increase them no more than 10% to 15%) or the image quality will degrade. Normally, I try to choose an image size larger than I need and decrease these numbers accordingly.

But, you don’t want to just change them indiscriminately – these numbers represent a height and width ratio that you want to maintain. So, if your width is 300px and you decrease it to 200px, then you want to decrease your height by 33% also. This doesn’t have to be a pixel perfect reduction, but it needs to be as close as possible or the image might distort. So for this example, if the image were 150px wide, then you would reduce it to 100px.

To maintain this ratio, you actually need to do a little bit of math that you might remember from high school. EWWWW Math? I usually keep a calculator and scrap piece of paper handy when doing this and by the time I finish a post, the paper is filled with calculations for image sizes.

Another option is to use an online calculator like the free Image Resizer at toshop.com.
Wordpress Image-Video Resizing Calculator
Enter in your image original height and width, and then enter in the resized width and the resized height will be calculated. Put those numbers into your height and width parameters above and you image will be resized.

Featured Plugin - WordPress Wiki Plugin

To get a wiki up and running you used to need to install Mediawiki and toil away for days configuring it... not any more! This plugin gives you *all* the functionality you want from a wiki, in WordPress!!!
Find out more

Seems like a lot of work doesn’t it? Especially if you are calculating the dimensions by hand every time. But that’s our only options…until…

Image Pro – WordPress Image Management Plugin

The Image Pro plugin is the slickest tool for handling images in WordPress that I’ve ever seen. The features that I personally like are:

1) Ability to drag an image from the desktop or a Windows Explorer window, and even your downloads list directly into WordPress and drop it for upload
2) Ability to drag and drop images from the display window below the visual editor into the visual editor
3) Ability to resize visually in the visual editor multiple times until it looks “just right”
4) Ability to change image properties without opening the standard WordPress Media Pop-up through the “Selected Image” panel that opens up when you click on an image

I could drone on about the features of this tool, but the developer has a video that is less than three minutes and will explain it all.

This is a very powerful tool for image handling in a WordPress post or page. I’ve been using it a few weeks and I have found very few issues that I don’t like. I have found that it will occasionally insert extraneous hidden characters that cause things to be a little out of line, but a quick switch over to the HTML tab allows me to remove those with ease. The benefit of being able to resize the images quickly and easily far outweighs any of the negatives I’ve encountered.

Some people misunderstand this tool because they don’t realize that once you resize the image, it actually stores an image on your server that is the size you have chosen, so it’s not serving up the fill size image and just resizing it. That should save you a little on page load times and hopefully some server space as well.

Featured Plugin - WordPress Appointments Plugin

Take, set and manage appointments and client bookings without having to leave WordPress. Appointments+ makes it easy.
Find out more

Do you have a method that works for you when using images on your WordPress website? If so, share it in the comments. If you’ve used any of these methods, be sure to leave your comments below.

Photo Credits:
Jeff Hester via photo pin cc
NASA Goddard Space Flight Center via photo pin cc
Zabowski via photo pin cc
MikeBehnken via photo pin cc

Tags

Comments (4)

    • Thanks for sharing this Kay. I looked the Imsanity plugin over and I must say I’m very impressed – plus, it’s kept up to date at the latest WP version. The really interesting thing is that I will have a need for it in an upcoming project for a client and I would not have known to look for it had you not shared it. You have helped me out tremendously – I hope others find this useful as well. Keep up the great work.

    • Thanks for commenting Peter.

      Be sure to share (Facebook, LinkedIn, Google+, Twitter, and anywhere else) with anyone you think would benefit from it so it can get more exposure. Also, be sure to visit back with us often for more useful WordPress information.

Participate