Skip to content

Latest commit

 

History

History
202 lines (128 loc) · 5.91 KB

Bootstrap.md

File metadata and controls

202 lines (128 loc) · 5.91 KB

Responsive Images

A course by Udacity.

Introduction

  • More than 60% of Bytes per page is # Bootstrap

👉 div classes

  1. container-fluid
  2. row
  3. col-xs-*
  4. col-sm-*
  5. col-md-*
  6. col-lg-*
  7. container

🎵 The Bootstrap grid system has four classes:

  • xs (for phones - screens < 768px wide)
  • sm (for tablets - screens => 768px wide)
  • md (for small laptops - screens => 992px wide)
  • lg (for laptops and desktops - screens=> 1200px wide)
  1. well

👉 img classes

  1. img-responsive

👉 text classes

  1. text-center
  2. text-danger
  3. h1 to h6
  4. text-muted
  5. display-1 to display-4
  6. lead
  7. blockquote
  8. blockquote-reverse
  9. blockquote-footer

👉 button classes

  1. btn
  2. btn-block
  3. btn-primary
  4. btn-info
  5. btn-danger
  6. btn-default

👉 input type: text

  1. form-control `images.

Average Bytes Per Page Per Content Type. A diagram from http://httparchive.org.

Bits & Pixels

bits = pixels * bits per pixel (bpp)

Relative Sizing

  • Fixed image size in for example pixels would create Unresposive image that will not resize.
  • If you make width : 100%; It will resize as broswer resize but it will lead to pixelation of the image when it resizes to larger of its natural width.
  • But if you make max-width: 100% It will resize to a maximum width of its natural width only and will not pixelate.
  • If you want 2 images to fit side by side you can change to max-width: 50%;.

Quiz: calc()

  • Using Calc is very important when we want the size (width for example) to take the remaining area after a fixed area is taken (for a maring for example).

This is a quiz.

vh vw vmin vmax CSS Units

  • vh: viewport height vw: viewport width. vmin: viewport minimum vmax: viewport maximum.

  • You can set the height of an image to 100% but this only works if the html and body elements are set to 100%.

  • **Alternatively, you can set **

width: 100vw;
height: 100vh;

**

  • Take care of the aspect ratio in this case if you want to keep it.

  • It is better to view vmin and vmax with examples to understand.

Raster vs Vector

Raster images

  • is a grid of individual dots of color.

  • Source:

    • Camera.
    • Scanner.
    • HTML canvas.

  • Example: photographs.

Vector images

  • is a set of curves, lines, shapes, fill colors, and gradients.

  • Source:

    • Adobe Illustrator.
    • Inkscape.
    • Using a vector format such as SVG.

  • Examples: Logos, Line art.

  • Browser can render vector images at any size.

General Rules:

  1. Use JPEG for Photographs.
  2. Use WebP for Photographs(better than JPEG) (supported by chrome).
  3. Use SVG for vector images, solid color graphics, logos, line art.
  4. Use PNG for the same as above if you can't use SVG.

Some useful links:

IMPORTANT ❗ Page Speed Insights

Performance

Latency: is the delay between request & response.

  • The latency affects Page loading times more than bandwidth.

  • So to increase performance you need to compress images and decrease the no of requests.

  • It is better to use text overlaying an image than to use a text as an image.

Background images

  • background-size: cover or contain
  • Background images are responsive.

Symbol characters

  • You can write symbols instead of images by using unicode.
  • They are more than 110000 characters.
  • They are responsive.

Icon Fonts

  • They are treated as text.

  • Scalable (responsive) as it is a vector without a decrease in quality with minimum downloads (less requests). Indeed only one request

  • You can style it easily using CSS like shadow, size, color, etc. And you also add it by CSS clases.

  • They are lots of them.

  • **Examples:

SVG & Data Uri

  • Maximum scalability.

  • Very low size.

  • Can be implemented using HTML, OR CSS.

Accessibility

  • Some advices for using alt attribute with img element:

    • alt attributes should be set on every image.
    • alt attributes should be descriptive for important images.
    • alt attributes should be empty for images that are just decorations.\

  • ChromeVox is a free screen reader.