blob: bc39559c9656fc680d9fc33724049af6083de0b9 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
+++
title = "Pixelated images for vintage inspired websites"
author = ["Michał Sapka"]
date = 2025-01-08T11:27:00+01:00
categories = ["blog"]
draft = false
weight = 2001
image_dir = "blog/images"
image_max_width = 600
Abstract = "Simple CSS trick for fun an profit"
+++
We don't take kindly of modern, huge images here, at Crys.
But modern browsers don't care and they put a significant amount of grease over them.
Images must be big or ugly, and therefore I have more grease over my web buttons than in my fries.
But CSS comes to save the day once again!
We can force the amazing, pixelated rendering that we want.
```css
@media (min-resolution: 192dpi) { * { image-rendering: pixelated; } }
```
(I stole from min-resolution [Ruben's retro site](http://retro.rubenerd.com), like a lot of other things).
|
