{"id":3972,"date":"2024-09-23T17:17:49","date_gmt":"2024-09-23T22:17:49","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=3972"},"modified":"2024-09-23T17:17:50","modified_gmt":"2024-09-23T22:17:50","slug":"keeping-pixely-images-pixely-and-performant","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/keeping-pixely-images-pixely-and-performant\/","title":{"rendered":"Keeping Pixely Images Pixely (and Performant!)"},"content":{"rendered":"\n

After Marc chimed in<\/a> with technique he needed to pull off as part of this years big promotion last week, it reminded me of another thing that ended up being relevant to the design aesthetic at play. <\/p>\n\n\n\n

\"\"
A horizontal slice of that background image was used here on this blog and the image size was quite tolerably small thanks to this CSS property.<\/figcaption><\/figure>\n\n\n\n

See how everything has that 8-bit-ish pixely look to it? There is a CSS property that you can apply to images (<img><\/code> elements) that will affect how they look when they scale. Like if you’ve got an image like this:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

You’re probably going to want to do this no matter what:<\/p>\n\n\n

.castle-landscape-image<\/span> {\n  image-rendering<\/span>: pixelated;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
If there is any resizing at all any direction, it’s just going to look better. There is also image-rendering: crisp-edges;<\/code> which is apparently specifically for pixel art, but I don’t see much of a difference. <\/p>\n\n\n\n
Another cool thing we can do here is ensure the original art is as small as it can reasonably be (probably whatever size it was originally created at) <\/em>and served like that, so any scaling beyond that doesn’t cause any anti-aliasing stuff (blurred edges) at all.<\/em> In the case of the example above where I didn’t really have the original just a high-res version, I can scale it down and down trying to find the best place where it still looks fine but I’m saving lots of image space:<\/p>\n\n\n\n