Deliver Optimized Images on your Wordpress Website

Media, when used to supplement content, makes your whole website look appealing. But, do you actually supplement good content using media files. Many times image files are used as an ornament for your website. While decorating your website with images works, it does not improve search engine rankings. If you are not visible, and nobody notices your images, what’s the use of decorating the website?

To make your images recognizable for search engines, you will need to work on offering meta information. Here are a few things that you need to work on when delivering an optimized image for your website.

Attributes of an Image Function

How does an image code appear on HTML? Before you can optimize images, you need to know the different the image tags and the different HTML codes that come with an image function.

<img title="Glass of Water" src="http://myimages.com/theimage.jpg" alt="Half filled glass of water" >

The above code has three different attributes that offer information related to the image

src: URL for source of the image

alt: short for alternative text. In case you are trying to load your image on a text only browser, the text will offer information related to the image

title: Here you will be able to add a short description for your image. The description will appear whenever the mouse hovers on the image

When you are adding the image, you should necessarily add src and alt details. While HTML is strict src, it observes leniency to a great extent when it comes to alt.

Importance of alt and title Functions

Using a combination of alt and title, you can add a meaningful text describing your image. The alt attribute works for both the disabled and Google describing the image to them and the title offers a complete description of the image.

<img title="Excellent Room" src="excellentroom.jpg" alt="A deluxe room with a good view and furnished with all amenities” >

This will help Google know where to show your image and how best to improve rankings of both your image and website. This is the right way to add text to all the three functions for a particular image.

Working out Image Sizes

It is not just about adding images, and writing relevant text; it is also about working on the image sizes, and delivering images that don’t affect the speed of your website.

If you want to load an image of 450x300 pixel size, then you should load an image having a similar file size. Loading a 500kb image, when a 50 KB image is sufficient will add unnecessary load to your website thus slowing it down.

How does Wordpress help in this? It recreates the same image in different sizes, namely the thumbnail size, the medium image size etc. You can choose from the different sizes and add the size that you feel perfectly represents your need.

Normally Wordpress generates a particular image file in different sizes. You can use the code below to add the images in the size you want to your website

add_image_size ( 'large_thumb', 75, 75, true );
add_image_size( 'wider_image', 200, 150 );

To retrieve the images, the following code is used

wp_get_attachment_image_src( 325, 'wider_image');

Adding Featured Images to Content

A featured image gives out the essence of the post to the viewers. In case you are using a magazine styled theme, you can use featured images to capture the audience. It is built into the system, and so you don’t need to add any plug-ins to get featured images.

How can you enable the featured image? Copy paste the following code to your theme’s function.php file

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 115, 115 )

The first line of the code acts as a command to enable the featured images while the second line of the code sets the image size to a default value

Now you can easily add featured images to your content file. What next? How to make the featured image appear alongside your content?

<?php while ( have_posts() ) : the_post(); ?>
<?php endwhile; ?>

When you want to display a particular image, add the above code to the code below in a loop fashion

<?php the_post_thumbnail(); ?>

In case you want to digress from the default size, here’s the code you should use

<?php the_post_thumbnail("wider_image"); ?>

Creating Image Galleries

If you want to showcase multiple images with your content, upload all the images to your post and with the gallery shortcode you can display the different images to your frontend.

Open upload/insert media screen>galleries>gallery settings

Link thumbnails to: Attachment Page

Order images by: menu order

Order: Ascending

Gallery Columns: set to the number of columns you want for the gallery

Once you click ok, all the images you have uploaded to the image gallery will be displayed in the format you have selected

You can modify the gallery shortcode to include/exclude certain images from previous posts.

How to include images from previous posts?

Know the attachment ID for the specific image, which is easily available in the media section.

http://webtastique.net/wp-admin/media.php?attachment_id=92&action=edit

You will be able to get the ID from the URL that can be viewed by placing your mouse on the image

[ gallery include="id1,id2.." ]
To exclude you use the code [ gallery exclude=" id1,id2.."]

How to exclude featured images?

Will you find the ID for your featured image every time you want to remove it from a particular post? Don’t you think that is too much unnecessary work? For this you will need to replace core functions using the codes removeshortcode() and addshortcode()

The coding does stretch a few lines, but copy pasting this code will do the job for you.

Why a long code is necessary? In this case, we don’t edit the core file, instead we just replace the core functions with some in-built functions

Go to your Wordpress theme’s function.php file. Copy paste the following code to this php file

// Clear the WP function
remove_shortcode('gallery', 'gallery_shortcode');
// Add the built-in function
add_shortcode('gallery', 'myown_gallery_shortcode');

The default gallery shortcode used to display all image files is replaced with a customized shortcode that will exclude the image files that you don’t need

The following code will define the mygalleryshortcode. Pasting the code given below to the functions.php file will exclude the unnecessary image files from your WP website

function myown_gallery_shortcode($attr)
{
  global $post, $wp_locale;
  static $instance = 0;
  $instance++;
  // Allow plugins/themes to override the default gallery template.
  $output = apply_filters('post_gallery', '', $attr);
  if ( $output != '' )
 return $output;
  //To make the author input look authentic
  if ( isset( $attr['orderby'] ) ) 
{
    $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
    if ( !$attr['orderby'] )
      unset( $attr['orderby'] );
  }
  extract(shortcode_atts(array(
    'order'      => 'ASC',
    'orderby'    => 'menu_order ID',
    'id'         => $post->ID,
    'itemtag'    => 'dl',
    'icontag'    => 'dt',
    'captiontag' => 'dd',
    'columns'    => 3,
    'size'       => 'thumbnail',
    'include'    => '',
    'exclude'    => $default_exclude
  ), $attr));
  $default_exclude = get_post_thumbnail_id($post->ID);
  $exclude .= ",".$default_exclude;
  $id = intval($id);
  if ( 'RAND' == $order )
    $orderby = 'none';
  if ( !empty($include) ) 
{
    $include = preg_replace( '/[^0-9,]+/', '', $include );
    $_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
    $attachments = array();
    foreach ( $_attachments as $key => $val ) 
{
      $attachments[$val->ID] = $_attachments[$key];
    }
  }
 elseif ( !empty($exclude) )
 {
    $exclude = preg_replace( '/[^0-9,]+/', '', $exclude );
    $attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
  }
 Else
    $attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
  }
  if ( empty($attachments) )
    return '';
  if ( is_feed() ) 
{
    $output = "n";
    foreach ( $attachments as $att_id => $attachment )
      $output .= wp_get_attachment_link($att_id, $size, true) . "n";
    return $output;
  }
  $itemtag = tag_escape($itemtag);
  $captiontag = tag_escape($captiontag);
  $columns = intval($columns);
  $itemwidth = $columns > 0 ? floor(100/$columns) : 100;
  $float = is_rtl() ? 'right' : 'left';
  $selector = "gallery-{$instance}";
  $output = apply_filters('gallery_style', "  
"); $i = 0; foreach ( $attachments as $id => $attachment ) { $link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false); $output .= "<{$itemtag} class='gallery-item'>"; $output .= " <{$icontag} class='gallery-icon'> $link "; if ( $captiontag && trim($attachment->post_excerpt) ) { $output .= " <{$captiontag} class='gallery-caption'> " . wptexturize($attachment->post_excerpt) . " "; } $output .= ""; if ( $columns > 0 && ++$i % $columns == 0 ) $output .= ''; } $output .= "
n";
  return $output;
}

In this code, there are a few lines that determine default attributes, which is not excluded. To exclude them, you will need to add the code below

$default_exclude = get_post_thumbnail_id($post->ID);
$exclude .= ",".$default_exclude;

If you patiently make the necessary changes to your Wordpress website with respect to images, you will see that you have an image optimized website. This is specifically good for websites that thrive on images and wish to improve their search engine rankings. You can always use these techniques.

Note: Don’t forget to backup important files before making necessary code changes

Author Bio: Deepa is a passionate blogger associated with Semaphore Software Company, a leading Offshore WordPress development company. She loves sharing information regarding WordPress tips & tricks. If you are looking to Hire WordPress Developers from India then just get in touch with her.

Deepa Ranganathan
  • optimized images on wp
  • wordpress optimized images
By Deepa Ranganathan On 21 Apr, 15  Viewed: 152