View on GitHub

reading-notes

class 05

IMAGES

adding images
To add an image into the page you need to use an <img> element. This is an empty element (which means there is no closing tag). It must carry the following two attributes:

  1. src:
    This tells the browser where it can find the image file. This will usually be a relative URL pointing to an image on your own site.
  2. alt:
    This provides a text description of the image which describes the image if you cannot see it.

there are more attributes in the img element such as: title, width, height, …

<img src "url" alt "text" />

three rules for Creating Images

  1. save Images In the right format
    Websites mainly use images in jpeg, gif, or png format. If you choose the wrong image format then your image might not look as sharp as it should and can make the web page slower to load.

  2. save Images at the right size
    You should save the image at the same width and height it will appear on the website. If the image is smaller than the width or height that you have specified, the image can be distorted and stretched. If the image is larger than the width and height if you have specified, the image will take longer to display on the page.

  3. use the correct resolution
    Computer screens are made up of dots known as pixels. Images used on the web are also made up of tiny dots. Resolution refers to the number of dots per inch, and most computer screens only show web pages at 72 pixels per inch. So saving images at a higher resolution results in images that are larger than necessary and take longer to download.

COLOR

colors can bring life to your webpage
you can change lots of things with the color property like: text color, background-color,…

p{
    background-color: blue;
}

you can specify colors in multiple ways:

  1. RGB, RGBA:
    where R is red, G is green, B is blue, A is for alpha(opacity)
    ex : rgb(102,205,170)
    rgb(102,205,170,0.5)
  2. HSL, HSLA:
    where H is hue, S is saturation, L is lightness, A is for alpha(opacity) ex : hsl(0,0%,78%)
    hsl(0,0%,78%,0)
  3. HEX:
    hexadecimal ex :#66cdaa
  4. color name:
    ex : red

TEXT

The properties that allow you to control the appearance of text can be split into two groups:

more font choice, @font-face allows you to use a font, even if it is not installed on the computer of the person browsing, by allowing you to specify a path to a copy of the font, which will be downloaded if it is not on the user’s machine.
ex:

@font-face {
  font-family: 'ChunkFiveRegular';
  src: url('fonts/chunkfive.eot');}
  h1, h2 {
  font-family: ChunkFiveRegular, Georgia, serif;}

you can change the font, make it bold, italic, uppercase, lowercase, underline, change letter and word spacing, text alignment and much more.

JPEG vs PNG vs GIF

These 3 image formats have significant differences amongst themselves thus making each of them suitable for specific use cases.

JPEG is a lossy compression specification that takes advantage of human perception. It can achieve compression ratios of 1:10 without any perceivable difference in quality. Beyond this, the compression artefacts become more prominent. Because JPEG compression works by averaging out colours of nearby pixels, JPEG images are best suited for photographs and paintings of natural scenes where the variations in colour and intensity are smooth. However, if an image contains text or lines, where a sharp contrast between adjacent pixels is desired to highlight the proper shape, this lossy compression technique does not yield good results.

PNG is a lossless image format using DEFLATE compression. No data is lost during compression and no compression artefacts are introduced in the image. For this reason, a PNG image would retain higher quality than an image than JPEG and would look a lot sharper, it would also occupy more space on the disk. This makes it unsuitable for storing or transferring high-resolution digital photographs but a great choice for images with text, logos and shapes with sharp edges.

GIF is also a lossless image format that uses LZW compression algorithm. It was favoured over PNG for simple graphics in websites in its early days because the support of PNG was still growing. Given that PNG is now supported across all major devices and that PNG compression is about 5–25% better than GIF compression, GIF images are now mainly used only if the image contains animations.

PNG images support transparency in two ways — inserting an alpha channel that allows partial transparency or by declaring a single colour as transparent (index transparency). Partial transparency makes the edges blend smoothly into the background. PNG8 images (discussed in the “Colours” section below) can support only index transparency whereas PNG24 images can support alpha channel transparency.

GIF images support transparency by declaring a single colour in the colour palette as transparent (index transparency). Because of absence of partial transparency, the edges (specially rounded or too-detailed edges) get a poor jagged effect. Though this can be solved to some extent using dithering, with improved PNG support, GIF is unsuitable for images with transparent backgrounds.

PNG images mainly have two modes — PNG8 and PNG24. PNG8 can support upto 256 colours whereas PNG24 can handle upto 16 million colours like a JPEG image. Use PNG8 for simple shapes with fewer colours and PNG24 for high quality, complex logos and shapes with rounded corners on a transparent background.

GIF images are limited to 256 colours. If index transparency is used, then one of these 256 colours is assigned as transparent and the remaining 255 are used for other colours.

images