I found a little more browser support for my retro pixelated CSS image treatment by using all three of these:
-ms-interpolation-mode: nearest-neighbor;
image-rendering: crisp-edges;
image-rendering: pixelated;

This is done in conjunction with up-scaling a low-res dithered image and helps retain the sharp crispy pixel goodness.

· · Web · 1 · 1 · 1

Is this just artistic or is there size benefits to this as well. If there are, I may consider it for adding more photos to my blog without making pages bigger.

@murtezayesil definitely there are size benefits. For example the image on the homepage of my site is just 13 KB. A major reason is that it's physically smaller than displayed.

Using webp instead of png format could help a little further but I am not sure how much more on the "landscape-low". However gThumb (image viewer) was able to compress favicon.ico from 7.4KB to 844 bytes.

And I learned about
𝚒𝚖𝚊𝚐𝚎-𝚛𝚎𝚗𝚍𝚎𝚛𝚒𝚗𝚐: 𝚌𝚛𝚒𝚜𝚙-𝚎𝚍𝚐𝚎𝚜;
after viewing the source of your page, so thanks for that.

Sign in to participate in the conversation

Revel in the marvels of the universe. We are a collective of forward-thinking individuals who strive to better ourselves and our surroundings through constant creation. We express ourselves through music, art, games, and writing. We also put great value in play. A warm welcome to any like-minded people who feel these ideals resonate with them.