Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

CSS > 1.5 Responsive Images > Flashcards

1.5 Responsive Images Flashcards

1
Q

Why do images need to be responsive?

A

There are different screen sizes, different resolutions, different pixel densities that need the right quality image to appear on the screen.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What are the 3 reasons why is it helpful to treat images as content?

A

SEO, accessibility and RSS feeds

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Should images be placed in HTML, CSS, or JavaScript?

A

HTML

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

When should images be placed in CSS?

A

When it’s a repeat pattern or for presentation purposes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Why shouldn’t you use JavaScript for images?

A

It’s more error prone than HTML and CSS. And it doesn’t work well with parser for content purposes.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What are the primary advantages of using HTML elements and attributes for responsive images instead of CSS background images?

A

Many images are content, not just for decoration. Including content images in the HTML markup is better for SEO, accessibility, and general separation between structure and presentation

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What type of image is best delivered in JPEG format?

A

Photographs

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Why can 2x photographs have a higher amount of JPEG compression?

A

When 2x images are resized in the layout, the scale of the JPEG artifacts tends to be reduced.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What types of images work best as SVGs?

A

When the image has lots of flat areas of solid colors.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

In general, what’s wrong with sending a single high resolution image to every device?

A

Often a single high resolution image results in wasted bandwidth, particularly on 1x devices and smaller mobile screens.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is the disadvantages of GIFs and PNGs?

A

GIF + PINGs tend to low slower because of file size.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

WHat’s the advantage of SVGs?

A

SVGs are one of the best options, as it works at all pixel densities

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What is image resolution?

A

It’s an image quality factor ranging from low DPI to high DPI. The right DPI depends on whether it’s going to be printed or how it is used online.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is a polyfill?

A

A polyfill is a piece of JavaScript that will implement specific features in browsers that don’t support those features natively.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

When using a polyfill, what happens to browsers that have native support for the polyfilled feature?

A

Browsers that support HTML natively will work as intended, and browsers that don’t– will use the polyfill.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

How does the srcset attribute differ from the src attribute?

A

The srcset attribute allows us to specify multiple files for a single image.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

When using the srcset attribute, it’s up to browser vendors to make the most intelligent choice about which file to deliver. Why might this be desirable behavior when we could instead maintain full control over image source selection using the picture element?

A

If browser vendors come up with a better way to choose sources or new devices come along, this implementation will leave the hard thinking out of our code and in the hands of the browser.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What is picturefill?

A

Picturefill enables support for the picture element and associated features in browsers that do not yet support them, so you can start using them today.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Can an Asynchronous attribute have dependencies?

A

No It must not have any dependencies because it can be loaded at any time.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

How do you begin adding JS to the HTML file?

A

script src =

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

How do you add JS to HTML for picturefill?

script src = then

A

“url” async

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

How do you end JS snippet to the HTML file?

script src url async

A

Closing script tag

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Is srcset currently supported by browsers?

A

Yes, srcset is supported by most browsers.

With the exception of IE which does not accept srcset

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

What two attributes can be specified when creating srcset?

A

Width

Pixel density descriptor

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

What does the pixel density descriptor do?

A

It refers to the image quality, number of pixels available.

It’s represented by using a number + x (ex: 1x, 2x, 3x)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

Why do you use the width attribute for srcset?

A

To proactively tell the broswer, what the native image size is which helps page performance, load content faster.

27
Q

Do you use srcset in conjunction with legacy img src?

A

Yes, you use img src with srcset because

IE doesn’t accept srcset for images.

28
Q

With pixel density descriptor, do you add a width?

A

No.

You add the image with the correct pixel density.

29
Q

Is there a natural order to pixel density descriptor images?

A

Ideally, highest density photo appears on the top.

30
Q

How do you write the srcset with picture density descriptor?

A

Create an image tag

Within the tag, write srcset = then image path

31
Q

With srcset img path setup,
what do you do next for a pixel density descriptor image?

A

Add the density as a factor
say 2x or 1x immediately after file path
with no punctuation between them, only a space,
close with ‘’

32
Q

How do you write the html for srcset when its by width?

A

Create an image tag

Within image tag write srcset

33
Q

When it comes to width srcset, what comes after the image tag and the srcset?

A

You include the file path

Then the width of the photo

34
Q

With width srcset, what comes after the file path and width?

A

You separate by commas

Then close with quotation marks

35
Q

Do you need to disable cache in chrome dev tools?

A

Yes

It helps you refresh to see the new images
for different screen sizes.

36
Q

Does the image expansion and contraction
work in the same way when it comes to img srcset?

A

When you expand, it adjusts images upward in size.

When it contracts, it uses the largest image on a smaller screen.

37
Q

Why do you specify sizes within the HTML media query for responsive images?

A

Sizes tell the browser the size of the image within the layout.
This will help so that the image loads within the page
layout proactively and efficiently

38
Q

What are 3 examples of when you’d want to use the size attribute for responsive images?

A
  1. When you want to crop an image
  2. When you want to adjust the image appearance in the wrapper or container space available
  3. When you want an image to align with text or an ad on the same “row” or “section”
39
Q

What does the width attribute do within srcset?

A

Tells the image length in the layout

Because resizes to the image can happen by the browser

40
Q

What does size attribute do?

A

Helps browser choose how to resize
the image based on viewport

41
Q

According to MDN, what does the size attribute consist of?

A

Each source size consists of:

  1. A media condition.
  2. A source size value.
42
Q

How do you separate sizes?

A

One or more strings, separated by commas,

to indicatie a set of source sizes.

43
Q

Why is it so helpful to specify image dimensions?

A

It can drastically improve website speed times by the browser, as it’s more efficient in loading responsive images.

44
Q

Do sizes use media queries in HTML?

A

Yes, it does include media queries in HTML.

45
Q

How do you begin adding the size attribute, based on the example?

A

First, change class

  • Change to max-width
  • Change from 100% to 50%
46
Q

Once the CSS property is updated, what do you do next to confirm the image?

A

Refresh the page with chrome dev tools

Confirm image via chrome dev tools

47
Q

What’s 50% of a 1024px container?

A

In HTML, write media query with size attribute

Container: 1024 max width

If 50% of 1024, it’s size is 512px.

48
Q

How do you start writing the size attribute in the HTML?

with attribute and punctuation

A

Write sizes = “

49
Q

What’s the middle part of the sizes attribute?

A

open parenthesis

min-width

pixels

close parenthesis

50
Q

How do you close the size attribute in HTML?

A

Use the measurement desired in pixels

With “ marks to end string

51
Q

What are the three main steps to creating a size HTML attribute?

A

We added the sizes attribute, media query, and pixel size.

52
Q

How do we specify the vw?

A

Above the media query line,
add the size in pixels
followed by vw

53
Q

What does the sizes attribute indicate to the browser?

A

The size attribute tells the browser how much space an image should take up in the layout

54
Q

What’s the difference between the length values in the srcset attribute versus the media conditions and length values in the sizes attribute?

A

length values in src attribute: tells native size of image

media conditions length value: tells size of image in layout

55
Q

If an image is 1000px wide and displayed @2x, how many CSS pixels wide will it be in the layout?

A

500px

56
Q

The sizes attribute takes one or more CSS media conditions and ending with a length unit. True or False

A

True

57
Q

What is art direction as it relates to responsive images?

A

With art direction, we make judgement calls on which part of image to focus on given the size constraints of different device sizes.

58
Q

When using the srcset attribute on an image element, Chrome will always use the lowest resolution image in the cache.

A

False

Chrome chooses highest resolution image available.

59
Q

In which orientation would this image
(the banner image shown here) work best?

A

Landscape orientation

60
Q

What is the picture element?

A

It’s a responsive image property that lets us specify
the image to use given orientation of the device.

61
Q

What’s found HTML attributes are found
inside of the picture element?

A

The HTML picture element contains a <source></source> element and one <img></img> element to offer alternative versions of an image for different display/device scenarios.</source>

62
Q

What is the first step to creating a picture element?

A

Adding the picture element to the HTML

63
Q

What does the HTML look like for the portrait orientation + square images within the picture element?

A

You specify the media and orientation

64
Q

What punctuation is used for the media section of the picture element?

A

= “(orientation: landscape)”

Parenthesis outside of words

Enclosed by ‘’ quotation marks

CSS (8 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions