Chapter 7 - Adding Images

Question 1

Scalable Vector Graphics (SVG)

Answer 1

a special image type that is mathematically calculated into existence

Question 2

bitmapped (raster images)

Answer 2

images that are made up of a grid of colored pixels

Question 3

external image

Answer 3

making a link directly to the image file

Question 4

MIME type

Answer 4

official media type

Question 5

<img></img>

Answer 5

adds an inline image

Question 6

phrasing element

Answer 6

elements that stay in the flow of text, aligned with the baseline of the text, and do not cause any line breaks

Question 7

replaced element

Answer 7

an element that is replaced by an external file when the page is displayed

Question 8

non-replaced

Answer 8

text elements that have their content right there in the source

Question 9

src=”URL”

Answer 9

source (location) of the image

Question 10

hotlinking

Answer 10

linking to an image on another server

Question 11

cache

Answer 11

a space for temporarily storing files on the hard disk

Question 12

alt=”text”

Answer 12

alternative text

Question 13

alternative text (alt text)

Answer 13

serves as a substitute for the image content, conveying the same information and function - used by screen readers, search engines, and graphical browsers when the image doesn’t load

Question 14

null

Answer 14

empty

Question 15

width=”number”

Answer 15

image width in pixels

Question 16

height=”number”

Answer 16

image height in pixels

Question 17

application

Answer 17

example

Question 18

standalone SVG

Answer 18

SVG text files saved with the .svg suffix

Question 19

<svg>
</svg>

Answer 19

an inline SVG image

Question 20

inline

Answer 20

copy the content of the SVG file and paste it directly into the HTML document

Question 21

pixels

Answer 21

little squares of colored light that make up a screen display

Question 22

device pixels (hardware pixels, physical pixels)

Answer 22

the pixels that make up the screen itself

Question 23

ppi

Answer 23

pixels per inch

Question 24

resolution

Answer 24

number of pixels per inch

Question 25

reference pixel (points, PT, Device Independent Pixels, DP, DiP, CSS pixels)

Answer 25

a measurement used for layout purposes

Question 26

device-pixel-ratio

Answer 26

the ratio of the number of device pixels to CSS pixels

Question 27

px

Answer 27

pixels

Question 28

x-descriptor

Answer 28

tells the browser to make a selection based on screen resolution size only, with no regard for the dimensions of the screen or viewport

Question 29

viewport

Answer 29

the size of the browser

Question 30

viewport-based selection

Answer 30

image sizes change based on the size of the browser viewport

Question 31

w-descriptor

Answer 31

width descriptor that provides the actual pixel width of each image

Question 32

Document Object Model (DOM)

Answer 32

outline structure

Question 33

preloader

Answer 33

goes to get all images from the server upon opening a web page.

Question 34

vw

Answer 34

viewport width units

Question 35

media condition

Answer 35

describes a parameter such as the width of the viewport

Question 36

...

Answer 36

specifies a number of image options

Question 37

....

Answer 37

specifies alternate image sources

Question 38

art-direction-based selection

Answer 38

accomplished with the picture element that picks which image to display that includes pictures of different sizes, crops, etc.

Question 39

MIME type (File MIME Types)

Answer 39

the type of file

Question 40

polyfill

Answer 40

a script that makes older browsers behave as though they support a new technology

Question 41

Which attributes must be included in every img element?

Answer 41

The src and alt attributes are required for the document to be valid. If the src attribute is omitted, the browser won't know which image to use. you may leave the value of the alt attribute empty if alternative text would be meaningless or clumsy when read in context.

Question 42

Write the markup for adding an image called furry.jpg that is in the same directory as the current document.

Answer 42

Question 43

Name two reasons to include alternative text for an img element

Answer 43

a) Because HTML documents are not valid if the alt attribute is omitted b) alt approves accessibility by providing a description of the image if it is not available or not viewable

Question 44

What might be going wrong if your images don't appear when you view the page in a browser? There are three possible explanations

Answer 44

a) the URL is incorrect, so the browser is looking in the wrong place or for the wrong filename b) the image file is not in an acceptable format c) the image file is not named with the proper suffix (.gif, .jpg, or .png)

Question 45

What is the difference between an x-descriptor and a w-descriptor

Answer 45

x-descriptors specify the screen resolution used for targeting high-resolution monitors. the w-descriptor provides the actual size of the image file that the browser uses to make the best selection based on viewport width

Question 46

What is the difference between a device pixel and a CSS (reference) pixel?

Answer 46

a device pixel is the square of colored light that makes up the screen display; CSS pixels make up the grid that devices use to lay out what appears on the screen; the CSS pixel may be made up of multiple device pixels

Question 47

What is cache and how does it affect web page performance?

Answer 47

Disk cache is where browsers temporarily store files downloaded over the network so they can be reused. Taking advantage of cached resources eliminates the need for repeated server requests for the same file and can increase performance

Question 48

Name one advantage and one disadvantage of adding an SVG to a page with the img element

Answer 48

Advantages include simple and familiar markup, excellent browser support, image caching, and available fallbacks Disadvantages include the inability to manipulate the parts of the SVG with style sheets or JavaScript.

Question 49

Name one advantage and one disadvantage of inline SVG

Answer 49

Advantages include the ability to take advantage of all fo SVG's features (animation, scripting, and applying CSS style rules), good browser support, and fewer server requests. Disadvantages include potentially unwieldy amounts of code in the HTML document, more complicated image maintenance, and lack of caching.

Question 50

When would it be appropriate to add an SVG to a page as a background image with CSS?

Answer 50

When it is purely presentational and not part of the editorial content of the page.

Question 51

What is this bit of code describing, and when might you need to use it? image/svg+xml

Answer 51

image/svg+xml is the MIME type of an SVG file. You may need to include it as the value of the type attribute in the picture element or use it to configure your server to recognize SVG files as images

Question 52

What is this bit of code describing, and where would you find it? http://www.w3.org/2000/svg

Answer 52

http://www.w3.org/2000/svg is the pointer to the SVG namespace as standardized by W3C. It appears as the value of the xmlns (XML namespace) attribute in svg elements.