Chapter 7 - Adding Images Flashcards
Scalable Vector Graphics (SVG)
a special image type that is mathematically calculated into existence
bitmapped (raster images)
images that are made up of a grid of colored pixels
external image
making a link directly to the image file
MIME type
official media type
<img></img>
adds an inline image
phrasing element
elements that stay in the flow of text, aligned with the baseline of the text, and do not cause any line breaks
replaced element
an element that is replaced by an external file when the page is displayed
non-replaced
text elements that have their content right there in the source
src=”URL”
source (location) of the image
hotlinking
linking to an image on another server
cache
a space for temporarily storing files on the hard disk
alt=”text”
alternative text
alternative text (alt text)
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
null
empty
width=”number”
image width in pixels
height=”number”
image height in pixels
application
example
standalone SVG
SVG text files saved with the .svg suffix
<svg>
</svg>
an inline SVG image
inline
copy the content of the SVG file and paste it directly into the HTML document
pixels
little squares of colored light that make up a screen display
device pixels (hardware pixels, physical pixels)
the pixels that make up the screen itself
ppi
pixels per inch
resolution
number of pixels per inch
reference pixel (points, PT, Device Independent Pixels, DP, DiP, CSS pixels)
a measurement used for layout purposes
device-pixel-ratio
the ratio of the number of device pixels to CSS pixels
px
pixels
x-descriptor
tells the browser to make a selection based on screen resolution size only, with no regard for the dimensions of the screen or viewport
viewport
the size of the browser
viewport-based selection
image sizes change based on the size of the browser viewport
w-descriptor
width descriptor that provides the actual pixel width of each image
Document Object Model (DOM)
outline structure
preloader
goes to get all images from the server upon opening a web page.
vw
viewport width units
media condition
describes a parameter such as the width of the viewport
<picture>...</picture>
specifies a number of image options
<source></source>
….</source>
specifies alternate image sources
art-direction-based selection
accomplished with the picture element that picks which image to display that includes pictures of different sizes, crops, etc.
MIME type (File MIME Types)
the type of file
polyfill
a script that makes older browsers behave as though they support a new technology
Which attributes must be included in every img element?
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.
Write the markup for adding an image called furry.jpg that is in the same directory as the current document.
<img></img>
Name two reasons to include alternative text for an img element
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
What might be going wrong if your images don’t appear when you view the page in a browser? There are three possible explanations
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)
What is the difference between an x-descriptor and a w-descriptor
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
What is the difference between a device pixel and a CSS (reference) pixel?
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
What is cache and how does it affect web page performance?
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
Name one advantage and one disadvantage of adding an SVG to a page with the img element
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.
Name one advantage and one disadvantage of inline SVG
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.
When would it be appropriate to add an SVG to a page as a background image with CSS?
When it is purely presentational and not part of the editorial content of the page.
What is this bit of code describing, and when might you need to use it? image/svg+xml
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
What is this bit of code describing, and where would you find it? http://www.w3.org/2000/svg
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.
