How to show a small GIF bigger without blurring it
A blinkie is tiny: 150 × 20 pixels. Show it bigger and the browser smooths it, so the crisp pixel letters turn soft and fuzzy. One line of CSS keeps every pixel sharp - as long as you make it bigger by whole times.
Three times as big, the usual way: soft and fuzzy
Three times as big with image-rendering: pixelated: every pixel sharp
One and a half times, also pixelated: the pixels come out uneven
The line that keeps it sharp
Give the picture its new width and height, and tell the browser not to smooth it:
<img src="music-is-life.gif" width="450" height="60" style="image-rendering: pixelated" alt="music is life">Many pictures to make bigger? Give them a class, and say it once in your CSS:
<img class="pixel" src="music-is-life.gif" width="300" height="40" alt="music is life">
<style>
.pixel { image-rendering: pixelated; }
</style>image-rendering: pixelated works in every browser people use today: Chrome, Safari, Firefox, Edge, on
computers and phones.
Why whole times?
Twice as big, every pixel of the GIF becomes a block of 2 × 2 pixels on the screen; three times as big, a block of 3 × 3. Every block is the same size, so the letters look just as they were made, only bigger.
At one and a half times, a pixel would have to be one and a half screen pixels wide - and half a pixel does not exist. So some pixels become one wide and others two, and the letters come out uneven, as in the last one above. Keep to whole times:
- a blinkie of 150 × 20:
300 × 40,450 × 60,600 × 80 - a button of 88 × 31:
176 × 62,264 × 93 - any other size: multiply both the width and the height by the same whole number
Width and height in the code. Always give both: then the page keeps the right room for the picture before it has loaded. And check that they go together - 450 × 60 is three times 150 × 20, but 450 × 50 would squash it.
Good to know
- It helps at its own size too. Phones and many laptops have screens with two or three tiny pixels for each pixel of a
page, so the browser makes every picture bigger behind the scenes. With
pixelated, a blinkie stays crisp there as well. - It is for small pixel graphics: blinkies, buttons, pixel art, old-web GIFs. A photo or a soft painted graphic looks better smoothed - leave the line out for those.
- Making a picture smaller does not get better with it; this is only for making things bigger.
- The Blinkie Studio can save your blinkie twice, three or four times as big right away, sharp, so no CSS is needed.
Good to know next
Blinkie, button and stamp sizesBlinkie 150x20, button 88x31, stamp 99x56 and more, at their real size.
How to put graphics side by side, or in the middleSide by side, a row that wraps, or in the middle: a line or two of code.
How to add blinkies to your Neocities pageCopy the code or upload the GIF, a wall of blinkies, and a blinkie of your own.