- English
Categories
Calendar
Recently...
Dynamic backgrounds without artifacts
simonmadine | 03 May, 2012 09:00
This is the second part of the post on the City Pages header images. If you want to read more about background-size:cover, start there.
Now you have your large, dynamically scaling image, it's time to make it better. You might have noticed that when you scale an image up, it can appear low quality. When images are 'upscaled', it can have a bad effect on your users' perception of your page. Even if the effect is subtle, it can detract from any benefits gained in using background-size: cover. Fortunately, there are a couple of techniques we employ to lessen this problem.
Image rendering algorithm
It is possible to specify the algorithm the browser uses when it scales your image. The image-rendering attribute lets you choose, amongst other options, between 'faster, lower quality' and 'slower, higher quality'. In this use-case, we have only a single header image so there won't be a performance hit if we specified the higher quality option. Even though this isn't available in IE, we can use the IE-specific property -ms-interpolation-mode to achieve something similar.
-
With:
-
Without:
div {
width: 180px;
height: 180px;
background-size: cover;
image-rendering: optimizeQuality;
-ms-interpolation-mode: bicubic;
}
Pattern overlay
Another possible way to minimise problems with upscaling is to add a subtle checkerboard effect on top of the image so it breaks up the artifacts and makes the image look better. When we first implemented this, we built it using a checkerboard pattern background-gradient (similar to this one but much, much smaller). This worked well in WebKit-based browsers but slowed down terribly in Firefox. On top of that, the CSS required to specify the gradient pattern was actually larger than the image itself would be. We decided in the end to use a transparent PNG included in our main sprite. It turns out that the clever answer is not always the best answer.
We add the pattern to the page by setting it as the background of the :after pseudo element
-
Example:
-
What it should look like:
div:after {
display: block;
background: transparent url(check.png) 0 0 repeat;
width: 100%;
height: 100%;
margin: 0;
position: absolute;
content: "";
Selective solution
Adding a pattern like this can be a good solution when the image is upscaled but we don't want it to happen all the time. When the image isn't upscaled or when it is only minimally larger than the original size, it can be distracting. To avoid this, we specify these styles in a media-query block. We'll go into them in more detail in a future article.
UI
, Web Technology
, Web
|
Previous |
Comments (1) |
Trackbacks (0)
Comments
Login
Re: Dynamic backgrounds without artifacts
JulieGri | 20/05/2012, 20:39
The world is so small :D
Hi Simon !