Images Flashcards
What are the types of images available?
Raster and vector images.
Raster images are defined by pixels. From camera etc. png, jpeg
Vector images are defined by some vectors. svg.
sharp on any size.
JPEG dont support transparency and animation.
What is the use of alt attribute?
- Blind people cannot see the image and when they use screen reader it will read the alt content.
- sometimes the image will not load. then the alt content will be shown.
How to show content image in HTML?
<img></img>
How to show a background image?
use background-image or backgound
body{
background: url(../images/b.jpg)
}
backgorund images repeats. what dto do now?
background-repeat: no-repeat.
we also have repeat-x or repeat-y
The default position of background image is top left corner. How to re-position?
background-postion: 100px 100px;
How to change the size of the background image?
background-size: width height
we can make backgound-size:cover
The background image should not move when we scroll. How to do that?
background-attachment: fixed
What is CSS sprites?
When we have too many images in our web page, it will make many too many http requests to download those images. To avoid these http requests, we have to use CSS Sprites.
In CSS Sprites, we will combine all images to one backkgorund image. And we use span tag to displa them.
STeps:
a. Use CSS Generator to create one image
b. CSS generator also generates the css files.
c. use the image using the spam tag.
What are the problems with CSS Sprites?
File size can get too large
they are not flexible because if we have to edit some icon then we have to redo everything
What is Data URL/URI?
Data URL is a technique where we convert the image to a data. We will embed the data in the web page.
It uses data: as the protocol
Problems with dataURL?
It increases the size of the web page.
What is CSS clipping?
We can clip an image to a different shapes, such as, triangle etc.
to clip use online css clipping. This generates the CSS style. Use it in the CSS.
.image{
clip-path: polygon();
}
we have to an image blur on hover?
.image–class:hover{
filter: blur()
}
similarly we have greyscale etc. check MDN
How to support high density screens?
HD screens are those which has Device Pixel Ratio more than 1. Physical resolution/ logical resolution.
to support high density screens, we have to prepare different images for the scale factor.
then we need to use srcset attribute
