November 13, 2012
Behind the Scenes, Part IV: Images and SEO
Let’s take a look at the code snippet again:
Looking at the first product, the long foldover skirt, one line of code looks like this:
<p><img src=”/examplesforblog/images/2012/tiered-cotton-ruffle-skirt.jpg” /></p>
The code is delimited by the <p> tag, which formats it as a new paragraph. And it contains an <img> tag, which specifies an image. The ‘src=”/examplesforblog/images/2012/tiered-cotton-ruffle-skirt.jpg”‘ part specifies the directory where the image is found on the website.
Notice that when you use <img>, there is no </img> ending tag. All the info for <img> is located within the bounds of the “<” and “/>.”
That’s great, but how do I put the photo in that website directory?
How to upload images
There are many ways. Web programmers typically use an “ftp” program, which stands for “file transfer protocol.” There are command line ftp programs and windowed ftp programs, as well as website building programs such as Dreamweaver which have ftp built in so you can “get” and “put” files. “Get” retrieves files from a web directory; “put” posts files to a web directory.
You can even use Windows Explorer to ftp! The server directory looks much like any other directory this way.
And if you are using a content management system such as WordPress, Joomla, Drupal or many others, you can upload images through these programs as well without having to know anything about ftp. It’s built in.
How to apply SEO to an image and improve loading speed
The example line of code above is the most basic way to program an img tag. It contains one required parameter: “src,” which means “source,” or the location of the file.
But you can also specify the “alt” parameter. The “alt” parameter lets you associate some words with the image.
I can write the code for the image this way:
<img src=”/examplesforblog/images/2012/tiered-cotton-ruffle-skirt.jpg” alt=”Tiered ruffle cotton skirt” />
This does several things:
- If a person is browsing the web page, a screen reader can read the alt tag to understand what the image is showing.
- Search engines read alt tags for the same reason, to understand what the image is showing. This helps the search engines understand what your web page is about and might give your page a little boost in placement in search engine results.
You can also specify width and height parameters. Although these are not necessary, they are beneficial for page loading speed. Specifying width and height tell the browser what size to expect so that it doesn’t have to do resizing, which takes additional time.
So here’s our image code now:
<img src=”/examplesforblog/images/2012/tiered-cotton-ruffle-skirt.jpg” alt=”Tiered ruffle cotton skirt” width=”202″ height=”270″ />
An additional tip for optimization and page speed: reduce your image size so that it actually matches the width and height that are going to be displayed. It is true that you can upload a large image and then just change the width and height to define how it appears on the site, but it is best to make sure you save it at that size in order to reduce the amount of time it takes for viewers to see the image in their browsers.
. . .
For more information
This is the fourth installment in a series of blogs about HTML for the layperson. Our most recent blog explained h tags, which help people and search engines understand what your website is about more easily. The next blog will cover links. (To subscribe to our blog, click here.)
Kathy Smith has developed more than 200 websites – everything from n-tier enabled applications to ecommerce to your friendly brochure-style website. She is senior developer at Lakenetwork.net, a website development company in Eastlake, Ohio.
Lakenetwork is a family-owned business providing website design and development for companies, professionals and organizations in the Cleveland, Ohio area and beyond. We specialize in providing the most cost-effective and appropriate solutions for clients’ online needs. We are located in Eastlake, Ohio.