Lesson 6 - Images Lets talk about resolutionLets talk about resolution Resolution How close together the dots (pixels picture elements) should be in the output. Measured in dots per inch (dpi). High resolution = more detail, large file size. The world of images is divided into two parts Image file typesImage file types Bitmap image Represented as grid of dots of specified colors e.g., JPG, GIF, and PNG Vector graphic Encoded as geometric shapes e.g., SVG What image file formats should be used with web pages? JPG GIF PNG SVG What about good old BMP Bitmap?What about good old BMP Bitmap? Very large files Do not scale well BMP files should NOT be used for web pages!! Browsers will not display BMP files. JPG Joint Picture Expert GroupJPG Joint Picture Expert Group Optimized for many colors - at least 24 bits of memory to each pixel 16.8 million colors Good for photographs Lossy - they retain all color information, but compress file size by selectively discarding dataand that compression can result in a loss of quality. If you choose the maximum quality option, your image will most likely be indistinguishable from your original photograph, but will have a larger file size PROS 24-bit color w/ up to 16M colors Great for photographs Great for images w/ more than 256 colors Great for making smaller file sizes (usually) CONS Discard a lot of data - Lossy Cannot be animated Doesnt support transparency Not good for text images Not good for images with sharp edges JPEGs GIF Graphic Interface FormatGIF Graphic Interface Format Displays indexed-color graphics Will only display a maximum of 256 colors Not usually used as a format for digital photography. Digital photographers use image file formats capable of reproducing a greater range of colors, such as TIFF, RAW or JPEG Can be animated GIFs PROS Supports transparency Can be animated Great for images with limited colors Great for line drawings & clip art Great for text images Lossless CONS Only supports 256 colors File sizes can be quite large Not good for photographs Not good for images w/ more than 256 colors PNG Portable Network GraphicsPNG Portable Network Graphics Full range of color depths Support for sophisticated image transparency Better interlacing, and automatic corrections for display monitor PNG images can also hold a short text description of the images content, which allows Internet search engines to search for images based on these embedded text descriptions. PNGs PROS Lossless Smaller file sizes Great transparency support Capable of producing background images without jagged edges Great for text images Great for logos CONS Not great for large images (large file sizes compared to JPEG) Cannot be animated Not supported by all web browsers Typically have larger file sizes than JPEGs since they use lossless compression SVG Scalable Vector GraphicsSVG Scalable Vector Graphics Store two-dimensional graphics. The SVG file format is based on the XML markup language. This means that even though the file contains an image, the file itself is actually stored in a text-based file format. The SVG file format was created by the World Wide Web Consortium as a standard way to display vector graphics on the Internet. Files with the.svg extension are often created in Adobe Creative Suite applications, but are not solely reserved for the Adobe programs. SVG files can be compressed, but once compressed the files will contain the.svgz extension. We will not be using svg files in this course or on web pages at present. For more information: So what do you really need to know about graphic files when it comes to writing web pages? The file formats you should use are jpg, gif and png If your graphics have a lot of colors (such as a photo), choose JPG If your graphics have few colors, choose GIF Pay attention to the file type dog.jpg dog.gif Do NOT use bmp, tiff or psd The great questions of life?The great questions of life? How does an airplane stay up? Where does the tooth fairy get her money? Why is the sky blue? How does Santa deliver all those toys in one night? And the really big one If web pages are only text files, then how can a web page show pictures? Images can be added to a Web page by linking to a separate file using the img element One-sided element Must include two attributes: src: path and filename to the image file alt: text to display if image is unavailable Inline element by default Can be wrapped in block element for alignment purposes Within text, aligned to text baseline img tagimg tag Dog Information At T.A.S.K. we care about all the pets that we provide a comfortable kennel experience and take care of through our medical and obedience classes. Height and width are in pixels and are optional. If you had alt=Two dogs face to face - very cute /> The result would be: Two Need quotes because browser interprets the first space it sees as the end of the alt text. Why have quotes around alt text?Why have quotes around alt text? The draft dilemmaThe draft dilemma Bob Height: 5 7 Excellent on defense Outstanding shooter Great play maker Bill Height: 7 1 Good on defense Outstanding shot blocker Below average free throw shooter. You cant make a short person taller, but you can teach a tall person to be better at shooting free throws. Dont make an image that is small in dimensions larger. You cant make a short person taller, but you can teach a tall person to be better at shooting free throws. Dont make an image that is small in dimensions larger. Used to mark images that add information to a Web page - semantic element. The tag provides a container for content that is equivalent to a figure or diagram in a book. It can be used to group a caption with one or more images, a block of code or other content. CSS float attribute enables Web page elements to flow around figure. Figure ElementFigure Element At T.A.S.K. we care about all the pets that we provide a comfortable kennel experience and take care of through our medical and obedience classes. We hope that you will consider us when looking for any of these services. Our office are located in many convenient locations throughout the Phoenix valley. Since image is listed first, it is displayed before the paragraphs. figure { display: block; float: right; margin: 0; padding: 0; } The float property enables Web page elements to flow around figure. Left and right values align figure. The float property enables Web page elements to flow around figure. Left and right values align figure. CSS float property not always sufficient for desired page layout. CSS clear property: prevents floated elements from being displayed to the side of another element. Allows more precise control of Web page flow. Controlling Page FlowControlling Page Flow Also, notice the footer structure element. Clear property causes footer element to be displayed without floating elements to its right. footer { display: block; background: #B8944D; padding: 0.25em; margin: 0; clear: right; } Adding a CaptionAdding a Caption figcaption Marks text as a caption for associated image Nested within figure element for the image Provide context, explanation or credit An Arizona sunset "Two very cute dogs" "Two very cute kittens" If before img tag then caption above image. If below img tag then caption below image. "Two of the most common pet birds - they also need vet care." Caption with multiple imagesCaption with multiple images Associating Images with Related TextAssociating Images with Related Text title attribute Used to specify additional image information Browsers display as floating text during mouse-over When not specified, some browsers display alt text The title information displays when mouse goes over the image. Using Images as LinksUsing Images as Links Images can be used as links - the img element is the clickable item Browsers typically add border around linked image to display link state Use pseudo-classes to modify link state colors Use CSS border property to remove the border Inserting a Background Image Image can be background of Web page or element Specify path and filename as value for background property Important to maintain contrast between background and text Specify background color in case image not available Tiling - displaying images repeatedly Used by browser to fill screen space Inserting a Background Image and Color Syntax of background property: background: url( " url goes here " ) Background: color_indicator When property-value pairs conflict, the one that occurs later in the rule takes precedence body { padding: 0; margin: 0; font-family: tahoma, arial, helvetica, sans-serif; background: white; background: url("images/brick.jpg"); } Favicon Small image (icon) that is associated with Web page in the address bar and on bookmarks 16 x 16 pixels.ico format : : It must be an ico format and in the correct location. The favicon may not show when you test this feature with your page on the local storage. Most browsers do not show the favicon unless the page is published and you access it with a web address that starts with(Most versions of Firefox will show the favicon off your local storage.) Why does my Favicon not work?Why does my Favicon not work? Now I can make a web page showing pictures of my puppies doing cute things. I wonder if I can include a picture of Lassie on my web page?