Unit 4: Images

Internet content falls under copyright law, so, as a rule of thumb: if you cannot find or infer what rights you have to use an image, then you should assume you have no rights to use that image.

Artists' professional web sites, stock image services, social media platforms, and other ways to legally acquire images for use online, will all have posted information about their copyrights. Here are some examples:

• The Facebook policy has been controversial, and it has more than one detail to consider. First is the actual wording of the terms, (as of 6 April 2015) "you grant us a non-exclusive, transferable, sub-licensable, royalty-free, worldwide license to use any IP content that you post on or in connection with Facebook" which means Facebook can do anything they like to distribute user's images, but it does not take away their copyright, and deleting their account ends the license they granted to Facebook (Facebook Applications, on the other hand, may come with their own policies on intellectual property, that could be different than the core Facebook web site). As a consumer of images, to use in your own sites, this means you cannot simply take any image from Facebook--you must get your own license from the person who posted the content.
• Flickr is a social media platform owned by Yahoo where the owner of the content may choose among several different licenses image-by-image. In additional to all rights reserved, the images on Flickr could be marked as public domain or one of the Creative Commons licenses. You can read about all 6 Creative Commons licenses (as well as learn more about the mission of the Creative Commons) at their web site. Knowing these licenses will be helpful as an image consumer.
• Every stock photo site is different. Always read the terms. For example, this one does not use a standard license like Creative Commons, but rather enumerates the rights which he is reserving/granting. It is your responsibility, as the image consumer, to be certain of the right you have to use the image on a particular web page, and to properly attribute that work as required by the copyright owner.
• Some of the images at this class are licensed only for this educational purpose. Others were created specifically for this site and should be considered 'all rights reserved' unless otherwise noted. The rest should have some attribution which could help you track down your rights if you wish to use the image.

Double-check your assignments to be sure you are giving proper credit for images and other resources.

There are many digital graphics formats, and some are better than others for the web. Here are 4 common types and their primary differences.

• PNG: highest quality and supports transparencies, but may be slightly larger files
• GIF: supports transparencies and animations, but is only good for images with very few colors and sharp edges
• JPG/JPEG: great for detailed images with lots of colors and has small file sizes with compression options, but does not support transparencies or animation
• SVG: Scalable Vector Graphics are ideal for images which may require frequent resizing, such as fonts.

Given an image, you should be able to guess its file type based on these differences.

Syntax: <img src="filename.ext" alt="description" title="tooltip" />

SRC attribute: This specifies the location and file name of the image to display. If the image is in the same folder as the HTML file, then the filename alone is enough. Subfolders can be included using the forward-slash (/) syntax. Full URLs are also ok. You will learn more about web paths (different ways to specify folders/urls) in a future unit about hyperlinks.

Hotlinking: Hotlinking is the act of using an external URL in the source ("src") attribute. For example, on my personal site I might try to include the Google logo with the following code: <img src="http://google.com/logo.png" alt="Google's Logo" />, which would require the web browser to go get the image from the Google.com servers. Hotlinking is bad for several reasons. First of all, it is a bandwidth cheat. It was once popular back in the late 90s and early 2000s as a way to reduce bandwidth usage, but those image had to be downloaded from somewhere! The original site hosting the image would then have excessive bandwidth usage, and it was very expensive. Thus, hotlinking is like stealing bandwidth. To combat this problem, many Web hosts have some kind of blocker against hotlinks. So if you try to use a hotlinked image, it won't even work. Hotlinking is also bad for your Web site's visitors--A hotlink means that their Web browser has to go find another server to download the image from, so it increases download times. Finally, hotlinking is bad because Web sites are notorious for disappearing--You wouldn't want to link to an image that won't be there later on!

ALT and TITLE attributes: Alternate text or "alt" text is one of the attributes of the tag. It is important for users who have visual impairments or who have text-only browsers. Alternate text is also important so that search engines understand what your image content really is. Always provide a brief but precise description of your image in the altnernate text. In some browsers, the alternate text is also a tooltip for when visitors hover over the image, but it's more reliable to use the TITLE attribute for this purpose, and doing so also allows you to have a tooltip that is different from your alternate text.

Attributing Intellectual Property: Let's face it: We borrow most of our images from other sources. You should always make an effort to credit that source. The alternate text is a great place to do this. You could also put a link tag around the image that links back to the original site where it was found. Or you could simply put a note somewhere near the image. Some authors/artists will require specific methods of attribution. No matter how you do it, you should credit images to their original artists whenever possible.

You should be able to add image content to an HTML page using the IMG tag.

Modern browsers on modern connections can handle a lot of image work. However, for simplicity and performance, there are a few optimizations that should be attempted prior to adding an image to a web page.

• Crop: Don't waste your visitor's attention on unimportant parts of an image. Crop out whitespace and irrlevant backgrounds. Make the subject of the image the center focus.
• Resize: In general, you want to deliver the image at the size intended for viewing. Even if the image is meant to be resized for various uses by the browser, do not use image files larger than the largest size needed.
• Compress: Depending on your file type, you may have some compression options when saving. The JPG standard has very good compression for full color photos, so adjust your settings until you have the right balance between file size and image quality.

All of these optimizations are about reducing file size. A smaller file takes less time to download and render, so your site will perform better for your visitors. This is especially important if you need to be able to reach visitors with slow connections.

Be sure you can perform these optimizations in your preferred image editor.

Sizing: In the not-too-distant past, browsers were notorious for poor image resizing algorithms. The preference since then has been to deliver the image to the browser at the desired size. It is still important to optimize your images for the size, crop, and quality desired for display. However, this is an area where browsers have been improving, and the need for easy mobile response has pushed forward with allowing the browser to resize images via CSS. You may choose to set the width or the height (both is not recommended--just set one and the image proportions will be maintained) in measurements of either pixels or percents.

Responsive Sizing: For a simple CSS-only approach, responsive images can be set with a width:100%; inside of a container element that resizes as appropriate for the responsive design. You will learn more about responsive design and implementation techniques in a later unit.

IE9- link border: To use an image as a link, you simply have to wrap it in an anchor tag (just like any text link). However, in IE8 and lower, this adds a vivid blue border to the image. IE9 makes the blue less vivid, but it is still present and often undesired style. You may wish to keep the following line in your own CSS reset file, so that this unwanted blue border is avoided in your projects: a img{ border: 0; }

When an image is used purely for visual appeal (that is, it wouldn't make sense to describe it to someone looking for information on the site), a good technique to add the image to your web page is using CSS background properties. They are:

• background-color -- Don't forget to set this so that your text is readable if your image takes a long time to load. It's also good to have behind background images with transparencies.
• background-image -- Use the special url(path/file.ext) syntaxt to reference the location of the image you want to show.
• background-repeat -- By default, your background image will be tiled, so use this property to specify repeat-y, repeat-x, or no-repeat.
• background-position -- By default, backgrounds start in the "left top" position. You can use the named positions or numeric positions to change this. The property takes two values, first is the horizontal value, and then the vertical value.
• background-attachment -- Set this to "fixed" if you want the background image to stay still while the content of the page scrolls over it.

There are some other new features for CSS3 backgrounds, including background-size and multiple background images. Explore these as you need them, just be aware that they do not work in IE8 or lower!

You can use the CSS Backgrounds tutorial at W3Schools to review these properties.

Favicons are the special icon you may see in the title/address bars of your web browser, which identify a web site. These are called favicons, short for "favorites icons" because they were first introduced in old web browsers that used "Favorites" lists as bookmarks. Even today a common setting for bookmarks toolbars is to show only the icon, or the icon with the page title.

Because this is a nonstandard feature of HTML, there are several caveats to using favicons. Internet Explorer is especailly touchy, requiring ICO files delivered over HTTP out of your site's root web folder. The simplest approach that will get you to most browser support is to use a 32-by-32-pixel ICO file with the following code insead your <head> tag: <link rel="shortcut icon" href="example_favicon.ico" />

Review this unit's favicon lesson for more details.