Faster browsers, better imaging: the technology evolves
In recent years, the development of HTML5 and CSS3 has brought a host of new tools for web designers, and those who design web browsers, that make it easier to incorporate awesome graphics into page design. As is always the way with the internet, however, there are still many different ways to achieve the same effect – some better implemented than others.
Think of these as filters on the lens of a camera, applied over the top of the image after it is rendered. Because of this, designers can choose to use just one, or apply them in layers. One advantage of this is that they simply disappear if a browser does not support them.
To achieve a simple image effect such as grayscale, it can be as easy as applying one line of CSS to your image: “filter: grayscale(1)”. You can view a live demo of this at https://www.smashingmagazine.com/2016/05/web-image-effects-performance-showdown/.
Background Blend Mode
Blend modes provide a method of combining image effects. There are two ways to use this effect:
– the “mix-blend-mode” property defines how an element will blend with whatever content is being displayed behind it, whereas.
– “background-blend-mode” can be used when an element has more than one background, to describe how those different backgrounds should blend with each other.
The blend mode properties are fiddly to use. Properties and colours need be structured in just the right order to work as expected, and browser support for the property is patchy. Therefore, although this is a powerful effect it maybe best left on the sidelines for the moment.
Demonstrated across much of the portfolio of Bristol web design agency Aardvark Creative, HTML5 Canvas offers infinite variety because you have pixel-by-pixel access to image data. It can be slow and resource-intensive, so best left alone unless there is no other way of achieving the effect you want. On the plus side, browser support is consistent and widespread.
These work the same way as CSS filters, but using an imported SVG image. Unfortunately since support for SVG images is still limited, this is also probably best avoided for the moment.