Image Decoration and Optimization Tutorial in WordPress

Use your ← → (arrow) keys to browse

WordPress is used widely for showing images and photo contents, such as designs, illustrations, inspirational images, and more.  Because of this, it is critical not to neglect the possible decoration and optimization that you can apply to images.

This can help draw the attention of users, and can also bring traffic from search engines.  It can also save you valuable bandwidth, improve  your website performance, and make for an overall more appealing website.

So, let’s look at some ways to apply decoration, and how to optimize your images.

Image Decoration in a Post

The reason in-post image decoration is important is because many WordPress sites have large collections of images, but they lack simple image size handling and other basic functionality.  We’ve all seen blogs where the images overlap with text, or expand beyond the border of the design.

So, I will share the way that I decorate images on my sites.  It’s true, it is sometimes a headache to make changes in sizes and other details because of the large number of images in a post.  So, to help with that, let’s discuss some tips and tricks to help.

  1. Image Sizing : If your post consists of a series of images one after another, such as 40 Incredible Illustrations, or similar, keep the width of the images same.  If you do that ,all images will look aligned, clear of same width and attractive.
    How to: Don’t use pixels in width, instead use percentage.  Here’s what you can do:
    I just get the post ready in Dreamweaver, and switch to the code view.  Then, remove all the heights of images in the img tag, and replace the width with width=”85%”.  By doing this, all the images in your post will have 85% width of your post area and height would be automatic.  After that, align all images to center.
    Here is a sample post I wrote, which contains 31 images together, and I used this same technique.  You will see the difference in image sizes by height and same widths. 31 Stunning Futuristic Scifi Illustrations
  2. Image Borders: Using borders for images give them a much more appealing look.  There is a simple and easy way of doing that, called image decoration.  Image decoration varies from template to template in WordPress.  If your images don’t have any sort of decoration, you can simple add this code in you style.css from your admin>appearance> editor> style.css.
    Code: img { border:2px solid #cccccc; } This #cccccc is the code for grey color, you can check codes in Photoshop, or directly put the color name instead.

    This will give a 2 pixel solid border of grey color to all the images in your site.  If you want to give borders to just images in posts, and no other images on site, use this code:
    Most WordPress templates have a CSS class titled .entry for posts.  If you’re not sure, you can check codes using a tool such as FireBug.
    Supposing that the class for posts is .entry, your code will be like this:

    Code: .entry img { border:2px solid #cccccc;} This will give same border to images only in the posts.
  3. Rounded Corners Layers: Now, taking image decoration to an even higher level is giving it rounded corners/edges.  This previously was an incredible hassle, as you had to use rounded edges images to show round corners.  Now, however, it is very easy, thanks to CSS3.  So, using the same class as above for image border, lets make the borders round edged.
    Code: .entry img{border:2px solid #cccccc; -moz-border-radius:7px;
    -webkit-border-radius: 7px; padding:10px;}
    Now, this means that images within the posts will have a round edged box around them.  See a little preview over this dummy site:

Image Optimization

What is image optimization and what are its benefits?

A lot of people doesn’t even bother even thinking of optimizing the images for search engines, and neglecting the fact that they can get a handsome number of visitors from search engines by spending just a few seconds on a post’s images. For that there are a few tips:

  1. Avoid hotlinking of images from other sites.
  2. Save images on your server and give them the accurate names. For example: An image is of a rabbit, name it as rabbit.jpg.
  3. When you insert the image in your post, add an alt attribute.  This is incredibly important.  You can add directly from Dreamweaver or through the WordPress title area in the image insertion form.  If you don’t want to use this,  it can be done through the following code:
    Normal Image Code: <img src=”http… path_to_image” /> It might also have width and height attributes in it. This is not an optimized image!
    Optimized Image for Search Engines: <img src=”http…path_to_image” alt=”image name + Keyword” /> Keyword can be the focus of your post or the image. From above example, we discussed that its an image of a rabbit.  Suppose the post is a collection of illustrations.  The optimized tag will look like this:
    <img src=”http…path_to_image” alt=”rabbit illustration” /> This will tell search engines that this image is about rabbit illustrations.  This increases the chances of getting visitors from search engines.
  4. Avoid using the same alt tags for all your images in a post.
  5. Always close your image tag with a / in the end, so it will look like this />

I previously wrote a post on my SEO blog about image and title tag optimization, which you can check out here: Title and Alt tag Optimization

Use your ← → (arrow) keys to browse



Forgot Password

Enter the e-mail you used to signup. A password reset link will be sent to you by email.