Skip to content
On this page

Using images in Web

Responsive and adaptive graphic assets

Responsive images

Imagine a website that is displayed on huge desktop monitor and a small smartphone. If there should be a full-width image, which size is optimized for the phone, it will appear stretched and blurry on big screens. We can use big image and show it on both devices, but its "weight" is huge and it makes no point to download all that unnecessary image data to the phone.

It means that we should use different size files for different devices. As we talk about raster images, of course. Vector (SVG) is scalable. In this section we talk about, how.

About compression and optimization

Media delivery services

There are services avalable, that host, deliver, generate and optimize your images. They usually have free plans that suite for personal sites, blogs, portfolios etc.

Responsive backgrounds

Sometimes you want to use an image as background of a page or section of page. Read, how to make responsive backgrounds:

Content queries should be also covered when wider browser support becomes available. Maybe its not that important here, but in the main CSS part of the course?

Icons / icon fonts

There are other type of graphics in user interfaces than images - functional graphics or icons that help users better to understand or navigate the UI. Creating icons is a separate topic and will be covered in the illustration section. But we don't always have to create all the icons by ourselves. Instead we can use existing icon packs or fonts. In this section we will covers that.

How to use

There are several ways to use icons.

  • each icon as separate image
  • reusing predefined images / image sprites / svg symbols
  • icon fonts: some icon sets can be used as fonts

There has been a debate about which way is the best. You can read about it in this article.

Here you can find a nice collection of icon fonts

You can also generate your own fonts:

🛑 Although icon fonts are very easy to use, there are many downsides. Read Stop using icon fonts

Example of icons as reusable svg symbols

Example of icons as svg fonts