Resize Matters
 |
 |
| How it should look | How your browser makes it look |
Take a look at the resized sprites up there. If the "how your browser makes it look" sprite looks like a blurry piece of crap, it's... well, it's self-explanatory, isn't it? This is what happens with resized images now. Originally, you could code a small image to be larger like this...
<IMG SRC="folder/imagefilename.png" WIDTH="284" HEIGHT="176">... and get a large, crisp sprite. In the late 00's (around 2008 or so), browsers started to add a smoothing effect (anti-aliasing) to any resized graphic. This feature is helpful for most .JPG image files, commonly used for photographs, it turns a lot of resized crystal-clear graphics in a mess of visual fuzz. By the way, if you think the blurred sprite looks bad now, you should've seen the earlier algorithms that made resized pixel art look like someone had projectile-crapped a bowl of undigested, runny Neopolitan ice cream onto the internet. Since this effect is applied whether the site was made before or after the browser makers decide to add this, many sprite-based web pages instantly looked like birthday cakes left out in the rain. ScrollBoss wasn't immune to this case of electronic visual mudbutt, so I weighed my options in a rational-adult manner.
| Waste of time | HUGE Waste of time | Waste of data | Waste of band- width |
Blurry Sprites | Crisp Sprites | Is fun! | |
| 1.) F*** it, I'll leave it all blurry |  |
||||||
| 2.) Make resized copies of every sprite I have to replace. | |
|
|
|
|
||
| 3.) Make a PHP script to replace resized images with resized GD library copies. | |
|
|
||||
| 4.) Fix a few things with a PHP script, leave the rest blurry but add a sarcastic article to the site that describes how irritating this crap is. | |
|
|
Yeah, you're reading the last part of option four. Luckily, my laziness patience paid off. Kiwi, future owner of 2Dwillneverdie.com, found a Mozilla link that had a CSS fix for blurry, resized sprites. Anyone dealing with blurry sprites should read that link to find multiple solutions to the problem
 |
 |
|
| How it should look | How your browser makes it look | How the CSS features make it look |
ScrollBoss, Brody Lawler, Passion Tanaka and Goofy Green Pixel Face Head © 2012 James Beaver
Return to top of the top of the page