ptg16476052200 LESSON 9: Using Images on Your Web Pages
As mentioned, PNG’s alpha transparency works better than GIF’s more rudimentary
approach and supports palette-based images (like GIF) as well as true-color and grayscale
images (like JPEG). In other words, you don’t have to worry about color usage with
PNG, although the number of colors used will result in smaller files.
If you’re creating new images that aren’t photographs, PNG is the format to use. JPEG
still makes more sense for photographs because of its superior compression. If you are
creating new images, GIFs only really make sense if you are using GIF animation.SVG
Scalable Vector Graphics (SVG) is a graphics format that was developed for the Web. It
became a standard at the W3C in 2001, and all current web browsers support basic SVG
features.
One advantage of using SVG is that they are scalable vectors. This means that they
can be resized up or down without any loss of quality. This makes them well suited to
responsive web design and web applications.
SVG images are written in XML and can be written directly in HTML5 documents.
This makes SVG images faster to load and easy to manipulate with scripts or programs.
They can also be used to create moving images and complex animations. If you look
at an SVG image that has been included in HTML, it will look a lot like other HTML
code. SVG uses XML to create the images, so it uses tags and attributes just like you’ve
learned to use in HTML documents. But you don’t need to go out and learn the SVG
markup. Instead, a lot of tools are available to create the images for you. Most vector
graphics programs like Adobe Illustrator (http://www.adobe.com/products/
illustrator.html) and Inkscape (https://inkscape.org/en/) will save the images as SVG. You
can then open the SVG files in a text editor and see that they are just complex XML files.
SVG is a good choice for images that need to be available at many different sizes, such
as on responsive websites. It is also good for scripted images like graphs. But while all
current browsers support SVG, if your site must support Internet Explorer 8 (or lower),
you will need to have fallback options for SVG images.Inline Images in HTML: The ![]()
Tag
After you have an image ready to go, you can include it on your web page. Inline images
are placed in HTML documents using the <img> tag. This tag, like the <hr> and <br>
tags, has no closing tag in HTML.