Working with Images in HTML and CSS3

You’d be hard pressed these days to find a website that doesn’t use images. However, not all sites use images in the best possible way. Images should be used to help interaction with a site, to provide additional information and to help with aesthetics. There are several methods you can use to optimize the images on your site; including allowing search engines to index images and taking into consideration the visually impaired. At the end of the article, there are a couple of CSS3 tricks that you might want to experiment with in Safari.

Let’s start with best practices for image tags. The following is valid and correct code for inserting an image on your page.

<img title="Latest Product" src="images/products/latestproduct.jpg" alt="Latest Product by our company with lots of features" >

Now, let’s break down the different attributes of the img tag. The title attribute is used for the pop up when a visitor hovers over the image. In this case, if a user hovers over the image, they will see a pop up with the text “Latest Product,” which, of course, should be the specific name of the product.

The source is the location of the image that can either be a URL or a folder within your directory.

Alt is extremely important attribute, which is used in a few different ways. It is probably also the most underused attribute in the img tag. The text assigned to Alt is used when an image can’t load or is used by the visually impaired. Also, the alt attribute is what search engines use to index your image. Search engines can’t see your images but they can see the text. That’s why using the alt attribute is useful, because it not only helps the visually impaired, but it improves your SEO.

Because of the importance of the alt attribute, you’ll want to be as accurate as possible in describing the image using keywords that you think you’re visitors would use in order to find your site.

Also important is how you name the image file. You’ll want to use something descriptive as opposed to using a series of numbers. If it’s a picture of a particular product, then use the name of the product.

Last, the size of the image is equally important in that file size does matter in terms of page load. If you’re image appears as 50×50 on the site, then use a 50×50 image file. If you use a 500×500 image, even if you tell the browser to resize it to 50×50, the browser still loads the large-sized image and then shrinks it down. By using the large image size, you are risking the speed at which your page loads.

If you want to play around with some experimental CSS3 properties and images, you can try adding a gradient mask to an image. Here’s some example code:

.element2 {
	background: url(img/image.jpg) repeat;
	-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

This does use the Webkit vendor specific code, so it will only work in browsers based on the Webkit engine, such as Safari.

You can also mask an image with another image like this:

.element {
	background: url(img/image.jpg) repeat;
	-webkit-mask: url(img/mask.png);
}

Have fun experimenting with this CSS3 code. And be sure to optimize your img tags.