Web FoundationsTUESDAY, OCTOBER 22, 2013

LECTURE 16: WEB IMAGES

Web Images

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.

Web Images

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

<img src="images/The_Dude_Abides.jpg" alt="The Dude">

You might call up this image with an HTML tag like <h1> and include a width and/or height attributes, or even a class.

<h1>Labs<img src="images/The_Dude_Abides.jpg" alt="The Dude" width="333px" class="dude"></h1>

.dude {margin: 0

570px;

position:fixed;float: right;

}

The .dude class

Web Images

If you wanted, you could also include an option title attribute to your code. 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 “The Dude Abides!” which, of course, should be the specific name of the image or product.

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

<h1>Labs<img src="images/The_Dude_Abides.jpg" title="The Dude Abides!" alt="The Dude" width="333px" class="dude"></h1>

Web Images

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 (search engine optimization."

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.

<h1>Labs<img src="images/The_Dude_Abides.jpg" title="The Dude Abides!" alt="The Dude" width="333px" class="dude"></h1>

Web Images

lt is 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 50x50 on the site, then use a 50x50 image file. If you use a 500x500 image, even if you tell the browser to resize it to 50x50, 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.

Example: Compare the two "Iceberg" images (and the underlying code) at:

http://studentfolders.student.cascadia.edu/foundations/rexwinkus/

Web Images

With the advent of CSS you can also set your images there, and work in all kinds of looks and effects

Demo 1

Demo 2

Web Images

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(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 Chrome or Safari.

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

.element {background: url(image.jpg) repeat;-webkit-mask: url(mask.png); /* a "Transparent" png */

}

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

view-source:http://learning-html5.info/CSS3/CSS_Masking.html Chrome or Safari Only