I launched my site today despite a few known discrepancies/annoyances in my mind. My excitement got the best of me and I am trying hard to curb my perfectionist side for fear of never debuting my work. Now, I managed to look past some of the mobile jQuery misfires and the not-exactly-perfect alignments here and there, but one thing got me for sure — fuzzy graphics.
I’m by no means a full-time designer (if even worthy of the label at all), but I can recognize a great design or a sharp look when I see it. I thought my savvy “save for web & devices” option alongside my measly meta tag smoothings would save me from an abysmal image rendering. Nope. Each image sat there in need of a nice haircut. What gives?
Anti-aliasing, or spelled antialiasing, is basically a software technique used to prevent “jaggies” or stair-like edges on lines that should be smooth. Rough edges usually occur due to the image being too high of a resolution for the output device/monitor. So, anti-aliasing simply combats these jaggies by filling in the voids with grey or similar colors. Sounds awesome, right? Not until it happens when your device CAN handle the image as is.
I toyed around with the settings for a bit. Tried jpgs instead and other various extensions. I considered increasing the resolution settings, but I don’t want to overload my website with heavy images for the sake of this silly fuzziness. So, I scour the internet for some answers.
I tried option 2 and doubled my images in Photoshop before shrinking them back down with the ‘width’ attribute within the <img> tag. It seemed like the simplest solution without much increase in file sizes. Reload some pages and voila! Crispy images!
Now, I did notice that IE had to ruin the day and come to the party with jaggies, but I think I can live with that for now.
I’ll treat it as proper punishment for those who use that lovely, lovely browser. I’m content for now :)