Week 12: Images

OVERVIEW | WEEK 12

Image File Formats
Image Size
Saving Images out of Photoshop/Illustrator
Using the image tag
Using images as links
Background images
Making a simple thumbnail gallery


IMAGE FILE FORMATS: Review

There are three primary image file formats used for graphics viewed on the web. Each of these file types were designed for the purpose of compressing memory usage. Each file type does this a different way. NOTE: .PSD, .AI and .INDD files will NOT show up on your website.

Jpeg 

Jpegs work well on photographs, naturalistic artwork, and similar material; not so well on lettering, simple cartoons, or line drawings. JPEG is “lossy,” meaning that the decompressed image isn’t quite the same as the one you started with. (There are lossless image compression algorithms, but JPEG achieves much greater compression than is possible with lossless methods.) JPEG is designed to exploit known limitations of the human eye, notably the fact that small color changes are perceived less accurately than small changes in brightness.

Gif
Graphics Interchange Format. A format used for displaying bitmap images on World Wide Web pages, usually called a “gif” because .gif is the filename extension. These files use “lossless” compression and can have up to 256 colors.

Png-8 and Png-24
PNG is a compression scheme that has two main benefits: it is a lossless compression image format and it holds alpha channel information. Originally, the Portable Network Graphics (PNG) format was designed as a royalty-free format, which would replace GIF and JPEG. Png-24 allows for smooth blending between alpha and opaque.

Image Size
When speaking about image size on the web, there are three possible interpretations of this that you must take into account.

File Size refers to the amount of disk space an image occupies (in KB or MB)
Image Dimensions refers to the physical size of the image, expressed in height and width.
Resolution refers the pixel density of an image. This is expressed in pixels per inch (ppi). Images are displayed on the web at 72 dpi. Printed images are generally of higher resolution.

Resize your images in Photoshop PRIOR to uploading them on the web.

Compression

Compression shrinks down the file size of the photo so that it loads on the user’s computer quickly, but maintains a certain level of quality.


Saving Images Out of Photoshop or Illustrator  
Both Photoshop and Illustrator have excellent options for optimizing images for the Web, via the “Save for Web” menu. It is better to use this option rather than “Save As” or “Export” options, as you will have more control over the output settings and the final file size will be smaller because no preview image is saved with the file.

Save and Export

There are two ways of saving a photo in Photoshop. The first is to use the Save As… dialogue, the other is called Save for Web & Devices… which is used to save your photos in preparation for publication to the Web.

1) Save as: FIRST, save the file type as a Photoshop or .PSD file. This will save extra Photoshop-specific information about your photo and allows you to go back to the file at a later date and manipulate all layers. You will not lose any quality when you re-save it multiple times. THEN, save as a .jpg, .png or .gif which compresses the photo allowing you to use it on the web.

2) Save for Web: Use this when you are ready to export your photo for publication to the Web.  The Save for Web allows you to see how your photo will appear once it’s published to a Web site. Optimized will show you how your photo will appear once it’s published on a Web site, and 2-up/4-up will show you comparisons so you can see how the different levels of compression will affect your photo when saving. These are automated ways to save your image for the Web.

***Here’s a great reference for “save for web”.

 


 3 Ways you can Retrieve Images to Place onto your Website

Use a third party image hosting site like Flickr.

Flickr:

Upload your image to your Flickr account and copy the image URL. To get the direct URL of an image on Flickr do the following:

Upload your own image or search and find an image already on Flickr. One you’ve got the image you want to use, right click on the image and then click on “view all sizes”. Choose your size and click on it. You’ll see the image with various image sizes listed above it. Choose your size and click on it. Right click on the image and choose “copy image URL”. NOTE: you need the direct url to image with a files extension of .jpg, .gif or .png.

 <img src=”http://farm5.staticflickr.com/4081/4883281674_8428f07e53_z.jpg”>

Use a direct URL to a website.

Find your image anywhere on the web. Click on the image and then click on “full-size image”. Copy the URL and place the full URL into your HTML file.

 <img src=”http://discovermagazine.com/2012/jul-aug/06-what-is-your-dog-thinking/dog1.jpg”>

Upload your own image via FTP to your own web hosting space.

Log into your web hosting space via FTP and upload your images. It’s good practice to place them inside a folder called: images.

 <img src=”images/dog.jpg”>

Here’s a great resource for finding images released under Creative Commons.


ADDING IMAGES TO YOUR PAGES

Image tag
Images are displayed on the web using the image tag:

<img>

This is the basic syntax for using the image tag:

<img src=”dog.jpg”>

You MUST upload the image to your ftp site for the web browser to find it. Use JPGs for photographs, and GIFs or PNGs for line art or most screenshots.

Create a subfolder on you FTP site called “images.” Whatever images you want to show on your web pages, upload them to this “images” folder.

The “alt” attribute is used for the text that will display if an image does not load in the browser, and in some browsers is visible when you hover over the image with the mouse:

<img src=”images/dog.jpg” alt=”Spot the Beagle” />

The image tag also allows you to input a numeric value for the height and width of an image. It is a good idea to specify the height and width, as this allows the browser to render the page faster.

<img src=”images/dog.jpg” alt=”Spot the Beagle” height=”400px” width=”200px”>

You can try it out on W3Schools.


Pulling an Image from the Web

If you’re pulling in an image from the web, view its properties to grab the absolute URL. If you are pulling in an image from a folder on your a server, call to it correctly:

Examples:

  • <img src="http://www.url.com/nameofimage.jpg" alt="Name of Image">This image is located somewhere else on the web.
  • <img src="images/dog.jpg" alt="Spot the Beagle">This image is located within a folder called images on my server.

Images as Links

You can use an image to link to another document by simply wrapping an image tag in a link tag:
<a href="filename.html”><img src=”image/dog.jpg“ alt="Spot the Beagle"></a>

You can see an example on W3Schools here.


Background Images

You can set an image as a background in any page element. The properties of background images are detailed here:

****Here’s a great link several sites that generate backgrounds for you. You can create gradients, stripes, tartans, tiles and patterns.

Putting it All Together: Images and CSS

<!DOCTYPE html>
<html>
<head>
<title>HTML Images Tutorial</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>

<h1>
HTML Images Tutorial
</h1>

<h3>
There are three way to place <i>images</i> onto your HTML page.
</h3>

<ol>
<li>Use a third party web hosting space.</li>
<li>Link to an image already on the web.</li>
<li>Upload an image to your web hosting space using FTP.</li>
</ol>

<p>
Use a direct link to pull this image from <b>Flickr</b>or another image hosting site.
</p>

<div align=”left”>
<img src=”http://farm5.staticflickr.com/4081/4883281674_8428f07e53_z.jpg”>
</div>

<p>
Upload an image to your site by <b>linking</b> to an image anywhere on the web.
</p>

<div align=”left”><img src=”http://discovermagazine.com/2012/jul-aug/06-what-is-your-dog-thinking/dog1.jpg”>
</div>

<p>Or, you can <b>upload</b> an image to your web hosting space using<strong>FTP.</strong>
<div align=”left”>
<img src=”images/dog.jpeg”>
</div>
</p>

<p>
You can even use an image as a link to a <b>URL</b> anywhere on the web.
</p>

<p>Create a link of an image:
<a href=”http://www.blogcdn.com/www.urlesque.com/media/2008/11/23-pooch11.jpg”>
<img src=”images/Blinky_Dog.gif” alt=”dog gif”></a>
</p>

</body>
</html>

If you use the HTML above, you can see what the site looks like in the screenshot below.

You can see the FULL HTML page here. The HTML was upload to web space using FTP.


Image Spacing and Alignment

Let’s see how it looks when you add text. Type in “This is one crazy dog!” directly after the close of the img tag. The text will bump up against the edge of the image and wraps around the bottom of the image (depending on how much text you’ve written). To make the text wrap correctly, add an “align” attribute to the image. It’s your choice whether you want to align it to the right or left by using align=”left/right”.

In the image below I’ve added the attribute align=”left” – see the full code here: <img src=”images/dog.jpeg” align=”left” />


A Simple Thumbnail Gallery

This method creates a flexible grid of thumbnail images and captions that dynamically fills rows based on the browser width. This is what it looks like in action:

Each thumbnail and caption is part of an unordered list (ul) with the id “thumbnails”. The list items (li) are set to display:inline and float:left and have background, margin and padding set to create the white boxes around them.


Rounded Corners

It seems like the trend nowadays are images that have rounded corners. If you don’t want to manually do it in photoshop or illustrator, use this online service called RoundPic.

View the links below to learn more about rounded corners and background images.


More CSS Image Techniques

Thinking through your images:

Foreground vs. Background Images. The best way to think about this is as a picture and a frame. Background images are the frame, foreground images are the picture. Background images should be restricted to interface elements, foreground images to content.

Live Text vs. Graphic Text. In order to keep your pages as semantic and machine readable as possible, not to mention keeping download time to a minimum, it is important to use as much “live” text as possible. However, there are times when you don’t want to be limited to the web safe fonts. Today we’re going to explore a few ways that you can get the best of both worlds.

You can see a great example of image rollover on the Apple website.

See a great example of image replacement rollover.

<div id=”nav”>
<ul id="navlinks">
   <li id="home"><a href="#">Home</a></li>
   <li id="navprojects"><a href="#">Projects</a></li>
   <li id="navclients"><a href="#">Clients</a></li>
   <li id="navevents"><a href="#">Events</a></li>
   <li id="navabout"><a href="#">About</a></li>
   <li id="navcontact"><a href="#">Contact</a></li>
 </ul>
</div>
  • Image replacement CSS The key to this technique is to use a single image, containing all the navigation menu items and all of their states.

Then, set up a unordered list of links in your html page. This is a nice semantic way to represent navigation:

Make sure that you give the ul and each li unique ids.

Then, in your CSS, you can use link states (a, a:hover, a:active, a:visited) and background position to reveal the appropriate section of the background image.

CSS Positioning. A great resource to check out.

There are three techniques displayed in this example:

  • Image with background color rollover
  • Head tag replacement
  • Single Image Navigation Rollover

 Embedding Multimedia

Playing Quicktime and Flash Movies
The QuickTime format is developed by Apple. Videos stored in the QuickTime format have the extension .mov.

QuickTime is a common format on the Internet, but QuickTime movies cannot be played on a Windows computer without an extra (free) component installed.

With the object element, code that will play a QuickTime movie can easily be added to a web page. The object can be set to automatically install a QuickTime player if it is not already installed on the users computer.

This is the code required to play a QuickTime movie:

quicktime html code

You can also display a flash animation as an object:

If you use a third-party service like YoutubeVimeoGoogle, or blip.tv, you can just copy their embed code and paste it into your .html file.

YouTube

Youtube (Third-Party Video Service)

embed_code

EMBEDDING AUDIO:
There are several different types of music formats that are used…so which one do we use for the web?

The WAVE format is one of the most popular sound format on the Internet, and it is supported by all popular browsers. If you want recorded sound (music or speech) to be available to all your visitors, you should use the WAVE format.

The MP3 format is the new and upcoming format for recorded music. If your website is about recorded music, the MP3 format is the choice of the future.

ADDING INLINE SOUND
When sound is included in a web page, or as part of a web page, it is called inline sound.

If you plan to use inline sounds in your web applications, be aware that many people find inline sound annoying. Also note that some users might have turned off the inline sound option in their browser.

Our best advice is to include inline sound only in web pages where the user expects to hear the sound. An example of this is a page which opens after the user has clicked on a link to hear a recording.

So if you insist…you just need to use the tag.

<embed src="beatles.mid" />

HYPERLINKING SOUND
If a web page includes a hyperlink to a media file, most browsers will use a “helper application” to play the file.

The following code fragment displays a link to a music file. If a user clicks on the link, the browser will launch a helper application and play the music file.

<a href="nameofyoursong.wav">Play this tune</a>

Play this tune


HOMEWORK | WEEK 12

  1. Take any 12 images. They can be photos, illustrations, your artwork, anything you have. If you do not have anything you can pull images from Google images or create different colored boxes and use those as images. Create two different sizes of these images, one thumbnail image and one full size image. The full size image should not exceed 800×600 pixels. Use the “Save for Web” process to optimize the images, saving them in the file format most appropriate for each image. Save these images to the “images” folder you created in week two.
  2. Create HTML / CSS using the thumbnail size of the images that duplicates the functionality of the thumbnail gallery that we went over in class today. Take the thumbnail gallery one step further – link each thumbnail to its full sized image. Post the files and images to your server and put the link to the gallery as homework for week 12 on your blog.
  3. Embed a video on one of your pages.
  4. Add a background image.
  5. Make one of your images link to another website.
  6. Add at least one image that has rounded corners.
  7. Add ALT, HEIGHT & WIDTH properties to all  your images.
  8. Recreate the image rollover using a file YOU create in Photoshop.
  9. **FOR EXTRA CREDIT: Google HTML/CSS photo gallery tutorial and create a SECOND photo gallery. Here’s a good link to get you started. Here’s another good link. Light Box is also a great image gallery. Use images that you’ve created for a portfolio gallery.