Images on the Web


Every picture tells a story – or does it?

You might think that using a lot of images is great – I know I do, however, you need to add imagery in an accessible way so people with visual impairments still get the information.

People surfing on mobile devices might still have images turned off because of small screens and the cost of downloading data.

Great_Seal_of_the_United_States_(obverse).svgVisitors of your site might be blind or visually impaired to such a degree that they cannot see our images properly.

Other visitors might be from another culture and they don’t understand the icons you use.

Search engines only index text – they don’t analyze images (yet), which means that information stored in images cannot be found and indexed.

It is very important to choose images wisely and use them when appropriate and always offer a fallback for those who cannot see your images.  Navigation and menu issues can arise with images.

You have content images and background images.  Content images (<img> element) always get an alt tag and are relevant to the paragraph or other section.  If, however, an image is only being shown as eye candy, no alt tag is required, so alt=”” is appropriate.  CSS control offers many design options as well.

The alt attribute of image elements – your image fallback – may be necessary due to several reasons, such as the image not being available because it could not be found, loaded, or because a browser (or other user agent) does not support images.  Assistive technologies read web pages out loud to their users.  It is sometimes called “alt tag”, when it is actually an attribute of the <img> element.

Use the title attribute if you have a lot to say about an image which, if the user has mouse capabilities and the browser is capable, acts as a tooltip popup.

The longdesc attribute allows you to link to complex data like charts and graphs.  There is no visual clue that this attribute is there, but assistive technologies will let their users know there is an alternative available.

The are several image element attributes such as, width, height, src, md, units, align, alt, ismap, id, lang, and class.

HTML5 introduces the figcaption and summary elements.  Figcaption acts as the optional caption or legend for any content within its parent figure element.  A figcaption element must be the first or last child of the figure element.

The figure element is used to mark up any self-contained content that may be referenced from the main flow of a document but could also be removed from the primary content (for example, to an appendix) without affecting its flow.  This makes it suitable for various types of content raging from graphs and data tables to photographs and code blocks.  Example:

<p>This is one of the most interesting places on earth</p>
<figure>
<audio src=”where-are-we-going.mp3″ controls></audio>
<figcaption><cite>Where are we going?</cite>by Jamie Lee Jones</figcaption>
</figure>

The creation of the figcaption element is an important step forward for HTML5 because it reliably markups the caption for content that is best marked up as a figure.

The summary element represents a summary, caption, or legend for any content contained within its parent details element.  The summary element must be the first child of a details element and if there is no summary element present then the user agent should provide its own.  This is because the details element has a specific function – to markup additional information and allow the user to toggle the visibility of the additional information.  Although it is not specified in the spec, it is expected that the summary element will act as the control that toggles the open-closed status of the contents of the parent details elements.  Example:

<details>
<summary>Technical details</summary>
<dl>
<dt>Bit rate:</dt><dd>190KB/s</dd>
<dt>Filename:</dt><dd>bongo-mix.mp3</dd>
<dt>Duration:</dt><dd>01:02:34</dd>
<dt>File size:</dt><dd>78.9MB</dd>
</dl>
</details>

The introduction of the summary element seems to secure the future of the details element and the new behavior for now.  When user agents begin to add support for the details element you won’t need JavaScript, or even CSS, to have expanding or collapsing sections in an HTML document.  When and how it is implemented is still being worked on.

IMAGE RESOLUTION FOR THE WEB

Best bet?  Use different sized images.  Unfortunately, this comes with a slight hit on load but you use them dynamically with JavaScript.  You can have two images with different sizes and serve up the correct one for a specific device using Media Queries. It’s not the resolution that is important, it is the size of the image.

There are many tutorials out there that explain how to use Media Queries to target specific browsers and devices and apply special rules to them.  It is really painless.

Right now, most images on the web are served up as 72 pixels per inch (ppi), which is the standard.  Ppi is really only relevant to print.  An image sized at 200px x 200px will display the same regardless of resolution at the same dpi, but what does matter is width and height.  If you change an image 200px x 200px unconstrained except by it’s resolution, to say 96 from 72, the dpi would automatically increase and make the image larger.  I didn’t say better, I said larger.  This is why you need to know how to manipulate images for the web.  Always start big and work your way down.  Don’t go the other way when it comes to image sizes for the web.

We have been getting prepared for High Definition.  CSS3 renders user interface elements with borders, shadows much the same way vector graphics do.  They are completely resolution independent and will display crisp and smooth no matter how much you zoom into them.

UTILIZE WEB FONT ICONS – THEY’RE VECTOR – SVG

Utilize web font icons.  @font-face CSS allows you to embed a custom font which has been specifically designed with simple pictographs in place of normal characters.  This allows you to have a arsenal of re-useable vector icons at your disposal on the web.

BE RESPONSIBLY RESPONSIVE FOR PERFECT IMAGES

So, while I was researching this post, I learned that the way to go right now – if you care about how your images appear to all visitors, all the time, on every type of device, is to build a responsive site, and using media queries, serve up a higher res image via your stylesheets and media queries based on these situations, use proper HTML practices for captions and alternative text elements for your image elements & use vector icons via sprites for some navigation or menu items if your design allows for it.  Watch your load times and do everything you can to eliminate unnecessary file sizes.

I always say you have 3 seconds for your page to load. That’s it.  If it takes longer than that, there might be a defect in your design.

Gallagher, Nicolas. New HTML5 elements summary & figcaption, 2010
Heilmann, Christoper. Images in HTML, dev.opera 2012

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s