Blog Design Studio

“A picture is worth a thousand words”.

This phrase emerged in the USA in the early part of the 20th century. Its introduction is widely attributed to Frederick R. Barnard, who published a piece commending the effectiveness of graphics in advertising with the title “One look is worth a thousand words”, in Printer’s Ink, December 1921.
It points out the power of a single image that can present complex stories that need many words to be described, or that a single image may be more influential than a great amount of text. Today in our dynamic world this is more important than ever before. Today we must absorb large amounts of data quickly.

In WordPress it’s quite easy for you to add images to your WordPress site. Upload them directly from within WordPress by using the built-in file uploading utility in the post screen or use any FTP Client software to upload as much as you want images to your WordPress site. In WordPress you can resize images and create thumbnails too. Actually there are three size settings available for you: thumbnail, medium and large.  In the same moment when you upload an image, WordPress will automatically generate these three image sizes not affecting the aspect ratio. The thumbnail is a resize with a crop, and the other settings are “max” width and height. So don’t worry.

Styling your images on your WordPress blog/site

Most likely your theme is already styling your images i.e. it is set to put a border around images in your posts, and float them to the left or to the right, and most of the time this is working good for you, but sometimes, you would like to style them in a different manner. In those cases you can easily change this “default” styles by few simple edits in the HTML code.

At Blog Design Studio in most of our themes we use these styles for the images:

.alignleft {
float: left;
}
.alignright {
float: right;
}
img {
border: none;
}
img.alignleft {
float: left;
margin: 5px 10px 5px 0;
}
img.alignright {
float: right;
margin: 5px 0 5px 10px;
}

And here is what you get:

But let’s say you want to add a thick black border around the picture. Before the /> that closes the tag just insert: style=”border: 3px solid #000000″

You can add space between the border and the picture too:

You can float it to the left:

Or to the right:

And of course you can add margins according to your preferences:

Optimizing your images for WP

You should not overlook image optimization. This is also an important part of WordPress SEO. By writing good alt tags for images and clever thinking of how you name the files, you can get extra traffic on your blog from the different image search engines. You can help your lesser able readers who check out your site in a screen reader, to make sense of what’s otherwise hidden to them too.

Heavy images can cost you traffic. Your visitors won’t wait 10 seconds for your image to load! So you should optimize your images for the web.  Your images should be in either .gif or .jpg formats (.gif is best for logos and navigation buttons, while .jpg is best for photographs.)  Reduce the size of your graphics so that they take as few bytes as possible while retaining acceptable quality.

In following posts, we’ll come up with some of the tools and plug-ins that will help you in making your life easier when it comes to dealing with images!