Skip to content

Images

Raster & Vector Images

Images used in the web are usually raster or vector graphics.

Raster graphics consist of pixels and usually have file extensions like jpg, png. Raster graphics file cannot be edited with text editor.

Vector graphics file is a code file, usually with extension svg that contains information how to render the content of the file. File contains instructions like locations of different files. Vector graphics can also contain animation instructions.

Which Image Format to Use?

Different image formats have their pros and cons. Below I have described pros and cons of 4 very used image formats in web: svg, png, jpg and gif.

Vector Images (SVG)

  • DO: Vector images are great for small illustrations, icons, logos. They are pixel perfect, can have transparent background and even animations and never loses any detail.
  • DON'T: Vector images are not great for creating a large image / illustration with lots of details or having hundreds of icons visible at the same on your website with this format. These will cause serious performance issues with your website as your browser will need to manually draw the instructions provided by your file into your screen.

Rasterized Image (PNG)

PNG images are lossless images, thus they provide great image quality. The only problem with the losslessness is that image sizes cannot be made as small as compressed JPG images. PNG images also support transparency. Usually when exporting something on the web you decide between the PNG and JPG format.

  • DO: PNG images are great for logos, small illustrations and images that require transparency.
  • DON'T: Do not use PNG format for large images with lots of detail as they are much higher sized than JPG images.

Rasterized Image (JPG)

JPG images do not support transparency and are compressed, thus the size is usually a lot smaller than PNG.

  • DO: JPG images are great for large images.
  • DON'T: JPG images do not provide transparency thus should be avoided with logos, icons and such.

Rasterized Image (GIF)

GIF images do support transparency but are generally larger than jpg and png images. Gif images have a special feat to them: they support animations. Thus I would recommend only using them if you want very short animated images.

  • DO: GIF images are great for making very small, low detailed animations.
  • DON'T: GIF should be avoided when creating any large images or images with lots of details.

The img tag

The self-enclosing <img /> tag can be used to embed an image into webpage. The tag always requires two attributes:

  • src attribute which is used to set the location of the image. Can be absolute or relative URL.
  • alt attribute which is used to set alternate text for the image which is shown if image for some reason cannot be displayed.

Read more about the <img> tag from here.

Basic Usage

HTML
<img src="google_logo.jpg" alt="Logo of Google" />

Setting width and height

Width and height for the image can also be set. Attributes width and height can be used for this. Units for the width and height are pixels.

Example:

HTML
<img src="https://cdn.vox-cdn.com/thumbor/Pkmq1nm3skO0-j693JTMd7RL0Zk=/0x0:2012x1341/1200x800/filters:focal(0x0:2012x1341)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg" alt="Logo of Google" width="100" height="100" />

Example Output:

Logo of Google

Challenge

  1. I have prepared a file image_assets.zip for you in Moodle. Download that file.
  2. Create folder img in the folder where you have your HTML code.
  3. Extract the archive image_assets.zip in your img folder. Make sure that the images are directly under the folder.
  4. Add image img/undraw_home.svg on top of your main heading in index.html with width and height of 200.
  5. Add image img/undraw_about.svg on top of your main heading in about.html with width and height of 200.
  6. Add image img/undraw_wiki.svg on top of your main heading in wiki.html with width and height of 200.
  7. Try adding the image img/desert.jpeg in some location of your website.