Placing pictures and graphics on web pages

On a web page pictures are placed with the <img> tag of HTML: the src attribute gives the file path, alt gives a short text description of the picture, and width and height give its size (in pixels). If the picture file is in the same folder as the page, the path is just the file name; in another folder it is written like “images/club.jpg”. For the web, JPEG (photographs), PNG (transparency and crisp lines), SVG (vector, sharp even when enlarged) and the modern WebP are convenient. The file size of a picture affects page speed: to show a 4000×3000 pixel photo in a 300-pixel box it is wasteful to upload it as it is; before uploading it should be reduced to the needed size (in PhotoShop, Image → Image Size) and compressed. The look of the page is set with CSS: color – text colour, background – background, border – border, padding – inner space, margin – outer space, font-family – font, text-align – alignment; the rules are written inside <style> or in a separate .css file. Colours are given by a #RRGGBB (hexadecimal) code. The contrast between text and background must be sufficient: at least 4.5:1 is recommended for ordinary text (white text on #0b5cad is about 6.7:1, on #1e90ff only about 3.2:1, which suits only very large headings). Do not copy a picture from another site: respect copyright and use your own picture or one with a free licence.