Adding pictures to the posts on your blog is a good thing, providing interest and illustration and giving readers a glimpse into your quilty world. Sizing images correctly is a must though, since images that are too big for the layout of your page will cause other elements like sidebars to move around and end up out of position, and pictures that are too small are just difficult for readers to see. Here’s a quick tutorial (I use Photoshop Elements, but the theory is the same for any graphics program):
Open the image in Photoshop (or whichever graphics editor you use) and edit the color, fix red eyes or crop the image to delete any unnecessary background from the shot. Once you’re satisfied with the image, you need to know the size of the space where the image must fit, in pixels. That’s the important part here. Inches mean nothing, it’s all about the pixels.
I generally worry more about the width of an image, because that’s the dimension that will cause the layout of my pages to break if it’s too big. I use a tool called MeasureIt, which is an add-on for the Firefox Browser. When you have MeasureIt installed, you can click on the icon and then click and drag on your screen to measure an area in pixels, like this:
I’ve measured the width of my post area, and I know that my image can’t be wider than 491 pixels. I usually stick with about 450px, because I like to leave a little room around the image, and it’s an easy number to remember when I’m sizing the images in Photoshop.
In Photoshop, there are two ways to size the image properly. You can use Image>Resize>Image Size, and then enter the width in the Width field, making sure that the box next to “Constrain Proportions” is checked at the bottom, and that the drop down menu next to the Width field says “pixels.” Once you enter your desired pixels for the Width, the Height will change automatically if “Constrain Proportions” is checked. Click “OK” to resize the image and save it.
The other (better) option is to use File>Save for Web to resize and optimize the image at the same time. Without getting into too much technical stuff here, when you optimize and image for the Web, you balance the quality and the size, so that image files are small enough to load quickly, but still look good on the screen. In general, for photos I save the files as a .jpg file, and for clip art type graphics I use .gif files, because .gif files are smaller, and don’t save as much detail.
Once you’ve used File>Save for Web, you’re presented with a window with two sections, the image as it is on the left, and the image as it will be saved on the right. You can enter your desired width in pixels for the image in the column on the right side, taking care that the “Constrain Proportions” box is checked and click “Apply”. At the top of the column, choose the format (JPEG or GIF) from the drop down menu.
If you choose JPEG, you can experiment with the quality using the other drop-down menus or the Quality slider. If you choose GIF, there are no quality options, and you can uncheck “Transparency” if there are no transparent parts in the image. There are other choices for both JPEG and GIF files, but you can generally just use the default actions.
At the bottom of the window, you’ll see something like “JPEG 29.19K 6 sec @ 56.6 Kbps” which is telling you how long this file will take to appear in the browser if a user has an Internet connection speed of 56.6 Kbps (dailup speed). A download time like this is fine for my site, considering that only 5% of my users are using dailup, and most of them have DSL or Cable speeds. You can change the “benchmark” speed to see the effect of higher speed connections on the download time by right-clicking in this area.
Once you’re satisfied with all the variables, click “OK” to save the image. I use WordPress (installed), and host my own site, so I have complete control over (and therefore responsibility for) the size of the images. If your blog is hosted by a service such as blogger or wordpress.com ymmv, but image resizing is still something good to have in your blogging toolbox.
Have a WFMW tip you’d like to share with the blogosphere? Find out more about Works-for-Me-Wednesday at WFMW headquarters at Rocks in my Dryer! Basically, the idea is that on Wednesday you post a little tip you’ve learned on any topic–anything that has “worked for you” in making your life easier. Visit Rocks in my Dryer for great tips on everything from kids to money on this Works-for-me-Wednesday!