Images and Icons

Almost every web application is going to display images and icons in some form. The images and icons can be accessed by one of the following means:

  • stored in a database
  • read by calling a webservice
  • shipped with the application (kind of hard-coded)

There are three ways to display images and icons in a web browser:

  • CSS background-image
  • using the <img> tag
  • using so-called icon fonts or SVG sprites

A generated web application can handle all of them. Let’s have a look at the details:

PrimeFaces and Omnifaces Components for Images

<p:graphicImage> vs <o:graphicImage>

Storing Images and Icons

Standard HTML Images

<img> CSS background-image