Scribd
Upload
41 views

Images!: Best Practices For Adding Images!

The document discusses best practices for adding images to HTML documents. It covers supported file formats, sizing images, using the width and height attributes, alternative text, and other tips for implementing images properly in HTML.

Uploaded by

Riajimin
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
41 views

Images!: Best Practices For Adding Images!

The document discusses best practices for adding images to HTML documents. It covers supported file formats, sizing images, using the width and height attributes, alternative text, and other tips for implementing images properly in HTML.

Uploaded by

Riajimin
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

INTRODUCTION

02.05 Images TO HTML

Images!

Best practices for adding images!


INTRODUCTION
02.05 Images TO HTML

Images its more than the tag!


Many file types are widely supported!
JPEG (.jpg and .jpeg), GIF, and PNG!
SVG and BMP are additional options!
File extensions must be included!
Every image must be downloaded, so size can be
a factor!
Every image requires an HTTP Request!
INTRODUCTION
02.05 Images TO HTML

Image Sizes!

When you link to an image the browser displays


the image as big (or small) as the file.!
This size is rarely optimal!
Quick solutions change file, use width/height
attributes!
INTRODUCTION
02.05 Images TO HTML

Using an Editor!
Editors can be used to permanently change the
size of the image!
Only works on local files!
!
Built-in software for this includes Preview (Mac)
and Paint (Windows)!
INTRODUCTION
02.05 Images TO HTML

Using Attributes!

Always strive to keep style out of your


HTML files but!
!
<img> tag includes width and height
attributes!
INTRODUCTION
02.05 Images TO HTML

Default Image size!


INTRODUCTION
02.05 Images TO HTML

Using Width in Pixels!


INTRODUCTION
02.05 Images TO HTML

Using Width and Height!


INTRODUCTION
02.05 Images TO HTML

Using Percentages!
INTRODUCTION
02.05 Images TO HTML

Favicons!
You can put image/logo/icon next to the
title of your page (in the tab)!
Must go in <head> section!
INTRODUCTION
02.05 Images TO HTML

Alternative Text Attribute!


Provides a textual alternative to non-text
content!
Read by screen readers!
Displayed in place of images!
Provides semantic meaning for search
engines!
INTRODUCTION
02.05 Images TO HTML

Creating Good alt text!


Be accurate!
Be succinct!
Dont be redundant!
Dont include picture of.., graphic
of ..!
INTRODUCTION
02.05 Images TO HTML

Empty alt text!

It is okay to leave alt text empty (null)!


Decorative images used for non-informative purpose!
!

Do not skip the alt attribute though!!


INTRODUCTION
02.05 Images TO HTML

Long alt text!

Some images (especially infographics) may


require elaborate alt text!
Consider replacing alt text with link to
separate page with full explanation!
INTRODUCTION
02.05 Images TO HTML

Review!

Misuse of file extensions, filename, and file


paths are often a problem!
For now, style the height/width in the html
code.!
INTRODUCTION
02.05 Images TO HTML

Acknowledgements/Contributions!
These slides are Copyright 2015- Colleen van Lent as part of http://
www.intro-webdesign.com/ and made available under a Creative
Commons Attribution Non-Commercial 4.0 License. Please maintain
this last slide in all copies of the document to comply with the
attribution requirements of the license. If you make a change, feel free
to add your name and organization to the list of contributors on this
page as you republish the materials.!
!
Initial Development: Colleen van Lent , University of Michigan School of
Information!
!

You might also like