[CSS3] All abourt responsive image

Take few examples:

• Full size image: The problem for that is it overflow when the screen size is smaller than the image size. (BAD)
• width: 100%: The problem for that is when screen size is larger than image size, it blurs the image. (BAD)
• max-width: 100%: This is a good way, it ensure image is responsive and when the screen size is lareger it won't blur the image. (GOOD)

• img {
      max-width: 100%;
  }

• Two images with 50% width: (OK)
• Tow iamges with 50% width and margin: (GOOD), use calc() to help you

img:last-of-type {
    margin-right: 0;
}

img {
    margin-right: 10px;
    max-width: 426px;
    width: calc((100% - 10px)/2);
}

 

Raster and Vector

Raster: means png image.

Vecctor: means svg image (BETTER). Because it scales without quality degradation.

 

Check you page speed:

https://developers.google.com/speed/pagespeed/insights/?url=simpl.info%2Fcssfilters.

https://developers.google.com/speed/docs/insights/OptimizeImages