Lesson 20: More Images
In this lesson, you'll learn about advanced images. We learned about the image basics in Lesson 9, so feel free to go back and review before continuing on.
Images and responsive design
There is a hot debate going on right now in the HTML community about the best way to deal with images when people are accessing them from so many different devices. A picture that looks great on laptop is just too big (or has too many pixels) to be displayed on a smart phone. Everyone agrees that we want pictures to be quickly loaded and appropriately visible on every device…but how to make this possible is a bit trickier. And we all want a simple answer to a not-so-simple technical problem.
Two possible standards could be <srcset> or <picture>. The element <srcset> would let you specify different sized pictures for different devices. The <picture> element does a similar thing, by letting you define multiple sources depending on media type and width as well as orientation. The <picture> element would also allow you to use <srcset> inside it. The <picture> element is supposed to avoid being forced to download all the images listed, even if you're only showing one. And that's its major drawback. No one wants to download 3x or more than they need to. Also, right now no browsers support <picture> properly.
This is a simplified summary of the debate that is going on, but suffice it to say that we're stuck right now waiting for the best possible solution to be discovered, agreed upon and supported by major browsers.
SVG and canvas
Back in Lesson 9 about graphics, we briefly mentioned SVG as one of your possible graphic source types. SVG is short for Scalable Vector Graphics, which means that graphics don't lose quality when you zoom in or resize them. The graphics are actually built in a language called XML, although that's invisible to most people. You can create SVG graphics with just about any graphics editor.
SVG has some major benefits over other graphics types, in addition to the zooming and resizing. Because they are created in the XML language, any text inside the graphic can be indexed and found by a search engine (this is a very good thing if you want Google to find your graphic). SVG is also an open standard, which means that people can build SVG into their tools fairly easily and no one is going to force you to buy specific software.
You can actually create an SVG graphic in a text editor, just like you're creating your web pages.
SVG is going to be the most important graphic type going forward.
Simple SVG
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="red" stroke-width="2" fill="blue" />
</svg>
Try putting this code directly into your web page to create a blue circle with a red frame.
You can also simply link directly with an SVG graphic that you have created with a graphic editor.
Link to SVG
<embed src="circle1.svg" type="image/svg+xml" />
We've used the <embed> element here, but you can also use the <object> element or even the <iframe> element (although it leaves a little rectangular border). Generally, you'll want to use the <embed> element because it is both supported in all browsers and allows scripting.
Canvas
The <canvas> element is a new one in HTML5; it lets people draw on your page. Try adding this code to your page:
<canvas id="drawing1" width="400" height="400"
style="border:1px solid #000000;">
</canvas>
You might notice that this is not yet enough for someone to be able to draw. You still need some JavaScript to enable the actual drawing part, but think of the canvas as a window through which you can be able to draw... or just display a dynamically rendered graphic using JavaScript.
Between SVG and canvas, most people are embracing SVG. Canvas is actually an Apple-specific element, meaning that it is NOT an open standard, like SVG.
| Related topics in the | Replies | Views |
|---|---|---|
| No related topics yet | ||