Code Log 5: Images

How Can Images be Used in HTML and CSS?

Images in HTML are used with the <img> tag which embeds a foreground image into the document.

Images in CSS are used as decoration, rather than being elements like their HTML counterparts. You can modify the background-image property to embed an image into the background of something in CSS.

What is the Difference Between the <img> tag and the background-image Property?

One is coded in HTML and one is coded in CSS to start with. Additionally, as mentioned before using the <img> tag makes the image an element of the page whereas the background-image property is purely decorative.

What CSS Properties Affect Images?

width/height - changes the dimensions of the image
margin - changes the spacing of the image
border - creates a border for the images

What is the Difference Between Dimensions and Resolution?

Dimensions are referring to how many pixels are in the image, whereas resolution is the density of those pixels.

What About Image File Formats?

Different image file formats have different use cases, here are some of the pros and cons for a few of them.

Pros

Gif - Best for short animations
PNG - Best for transparent graphics
JPG/JPEG - Best for photos
WebP - Fastest format
SVG - Best for vector graphics

Cons

Gif - No one can agree on how its pronounced
PNG - Larger file sizes
JPG/JPEG - Not good with text
WebP - Not good in older browsers
Not good for complex photos