English
English
Appearance
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.
- CSS-Tricks: A Guide to the Responsive Images Syntax in HTML
- Dev.to: A comprehensive guide to responsive Images (picture, srcset, source etc)
- Dev.to: Responsive Images - A Reference Guide from A to Z
About compression and optimization
- Dev.to: Optimizing images for the web - an in-depth guide - includes a list of free image optimizing services
- Insanelab: Why WEBP Is the Rockstar of Image Formats for Web Designers
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.
- https://www.cloudflare.com/
- https://www.cloudimage.io/
- https://cloudinary.com/
- https://imagekit.io/
- search for more...
Responsive backgrounds
Sometimes you want to use an image as background of a page or section of page. Read, how to make responsive backgrounds:
- with media queries
- with image-set() ⚠ check the support before using in production!
⚠ 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