Web Images and Effect Types Lesson

Web Images

You might be familiar with the Chinese proverb that indicates "a picture is worth 1000 words". The images you add to a website can portray a message without the need to have your audience read details in a paragraph. In the first section of this course, you discovered that the Graphics Interchange Format (.gif), Joint Photographic Experts Group (.jpeg), and Portable Network Graphics (.png) are the appropriate formats for images used on the website. In HTML 5, the images saved in this format are referred to as bitmap (also referred to as raster) images. The images consist of colorized pixels text annotation indicator typically showcasing real-life subjects. When bitmap images are resized, the resolution of the image is compromised leaving it with a look that is grainy or distorted. When using bitmap images, make sure to save the file with the needed dimensions so it does not deform the image's appearance.

Vector images, like logos, line art, and buttons are made up of objects. These graphics are generated by a computer and are used in HTML 5. Some vector images may not be supported by the browsers used by your target audience. Because of that fact, you will need to convert the image to a bitmap image before publishing it on your website.

Effect Types

The application of effects can add pizzazz to the images on the website. In many instances you, or a member of your web design team, will access image editing programs to apply photo effects text annotation indicator to images that can be added to a web page. It is also possible to code the effect using the CSS Filter. The CSS Filter property would be used to apply the filter effect.

The table below provides a description of some of the common CSS Filters that are applied to images.

Filter	Description
Blur	Applies a Gaussian blur effect. The effect reduces noise and detail in the image
Brightness	Enhances the image so that is lighter or darker.
Contrast	Adds or takes away contrast from an image.
Grayscale	Removes the color from images.
Hue-Rotate	Images are modified in color based on the value of angles defined.
Invert	The image is inverted in color. For example, black inverts to white.
Opacity	Blends an image with background colors or designs. Makes the image more transparent depending on the value.
Saturate	Decreases the color value of an image and makes it appear dull.

The filters are added to the CSS for the site, page or element. Below is a list of how you add filters. When you add a filter, you also add the value you want the image to be changed (percentage, decimal, pixel, etc.) depending on the filter.

img {filter: blur (5%);}
<img src="image.jpg" style="filter: blur (5%)">
Multiple filters: img {filter: contrast(200%) drop-shadow(8px 8px 10px green);}

IMAGES CREATED BY GAVS