The Easiest Way To Add And Size Images In Your WordPress Website
The Easiest Way To Add And Size Images In Your WordPress Website
WordPress 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?
Size My Images Before Uploading Them To My WordPress Website
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.
Load My Images To My WordPress Website And Size Them There
Using The Visual Editor
One 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:
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.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
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.
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.
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.
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.