When a browser downloads the HTML document for a web page, the first thing it does is look through the whole document from top to bottom, left to right to establish its outline structure (its Document Object Model, or DOM). Then, almost immediately, a preloader goes out to get all the images from the server so they are ready to go. Finally, the CSS and the JavaScript are downloaded. It is likely that the style sheet has instructions for layout and image sizes, but by the time the browser sees the styles, the images are already downloaded. As a developer, give the browser a good hint with the sizes attribute whether the image will fill the whole viewport width or only a portion of it. That allows the preloader to pick the correct image file from the srcset list.
A simple example with the image at 100% of the viewport width, regardless of the device - the complete img element:
<img srcset="realidad480.jpg 480w,
realidad960.jpg 960w,
realidad1280.jpg 1280w,
realidad2400.jpg 2400w"
sizes="100vw"
src="realidad640.jpg" alt="A VR app about Venezuela">
The sizes value is a comma-separated list in which each item has two parts. The first part in parentheses is a media condition that describes a parameter such as the width of the viewport. The second part is a length that indicates the width that image will occupy in the layout if the media condition is met. Here’s how that syntax looks:
sizes="(media-feature: condition) length,
(media-feature: condition) length,
(media-feature: condition) length"
An example with media conditions added to the previous example for a complete valid img element, view example:
<img srcset="img/realidad480.jpg 480w,
img/realidad960.jpg 960w,
img/realidad1280.jpg 1280w,"
sizes="(max-width: 480px) 100vw,
(max-width: 960px) 90vw,
(max-width: 1280px) 70vw,
1280px"
src="img/realidad640.jpg" alt="A VR app about Venezuela">
The sizes attribute tells the browser the following:
Now that the browser knows the width of the viewport and how big the image will appear within it, it can select the most appropriate image from the srcset list to download.
The picture element has no attributes; it is just a wrapper for some number of source elements and an img element. The img element is required and must be the last element in the list. If the img is left out, no image will display at all because it is the piece that is actually placing the image on the page.
A sample picture element, view example:
<picture> <source media="(min-width: 1280px)" srcset="img/realidad1280.jpg"> <source media="(min-width: 960px)" srcset="img/realidad960.jpg"> <img src="img/realidad480.jpg" alt="VR app about Venezuela"> </picture>
This example tells the browser that if the viewport is 1280 pixels wide or larger, use the large version of the image. If it is wider than 960 pixels (but smaller than 1280, such as on a tablet), use the 960px version. Finally, for viewports that are smaller than 960 pixels and therefore don’t match any of the media queries in the previous source elements, the 480px version should be used. The small version, as specified in the img element, will be used for browsers that do not recognize picture and source.
SVG is an example, or application, of XML (Extensible Markup Language), which provides the rules and standards for how markup languages should be written and work together. XML was designed to store, transport and describe data. It is a set of rules - must have root element, tags must be closed and properly nested, tag names are case sensitive, may not contain spaces and attribute values appear in quotes. Both HTML and SVG are based on XML.
In SVGs shapes and paths are specified by instructions written out in a text file. As HTML has elements for paragraphs (p) and tables (table), SVG has elements that define shapes like rectangle (rect), circle (circle), and paths (path). Images entirely created in Illustrator may be saved as SVG files.
A simple example will give you the general idea. Here is the SVG code that describes a rectangle (rect) with rounded corners (rx and ry, for x-radius and y-radius) and the word “hello” set as text with attributes for the font and color. Browsers that support SVG read the instructions and draw the image exactly as designed:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 180">
<rect width="300" height="180" fill="purple" rx="20" ry="20"/>
<text x="40" y="114" fill="yellow" font-family="'Verdana-Bold'" font-size="72">
hello!
</text>
</svg>
Advantages of SVGs over bitmapped counterparts for certain image types:
Advantages of SVGs over bitmapped counterparts for certain image types:
Embedded with the img Element (can not apply styles or javascript or external images or web fonts)
<img src="/img/circle.svg" alt="">
Inline in the HTML Source (can apply css and javascript - part of the DOM, but can require a huge block of code) Copy the content of the SVG file and paste it directly into the HTML document. Each circle element has attributes that describe the fill color, the position of its center point (cx and cy), and the length of its radius (r).
Vew Example (code was generated by Adobe Illustrator)
Embedded with the object Element (linked external file - no excessive block of code and still accessible via css and javascript)
<object type="image/svg+xml" data="pizza.svg"> <!-- fall back image, unfortunately some browsers will load even when not used --> <img src="pizza.png" alt="pizza"> </object>
Learning Web Design, 5th Edition by Jennifer Robbins