Jaggy pictures when resized
Maybe I’m just an anal kinda guy, but when I see websites with beautiful images that come out jaggy, I cringe. It’s one of those things that gets under my skin, and find hard to accept. I was surfing a photographer’s website today and this just jumped out at me, and I’d like to share a simple tip on how to improve embedding images on websites.
Maybe you’ve never encountered it, but even WordPress does that to your photos sometimes. Let me explain the scenario…
You have a stunning photo that is of a certain size, let’s say 800 pixels wide by 764 pixels high (for those who don’t know, pixels are the dots on your screen that make up images, words, etc… and you measure sizes of things on screen in pixels, not centimeters or milimeters). For the sake of discussion, let’s say you want to insert the image using WordPress. When you click on the “Add an image” icon, you can upload and insert the large image, and what gets generated behind the scenes is a HTML IMG tag (part of the code).
It looks like this <img src=”images/mybigpix.jpg” width=”550″ height=”525″ /> – what actually happens is that WordPress tries to squeeze it to conform to a specific width and height setting, although the real image is 800 x 764. As such, the image becomes jaggy and looks utterly horrible. Here’s an example of an image that was resized and looks jaggy.
The poor mum-to-be in the picture above looks like she went through a rough patch – she might have hair growing on her chest, legs and chair!
However, if the image was properly resized using an image manipulation program (there are dozens out there that are free – Irfanview is one, Picasa is another and Photoshop, which is an overkill for simple resizing), your image will come out sharp. I viewed the full size image above, and resized it with one of those softwares mentioned, and here is the much nicer, refined and sexy mum-to-be.
Some content management systems allow you to insert an image, then drag the corners to adjust the size – that is also another time when you will be squishing the image and bring out the jaggy hairy looking effect. Sure it’s fine if you’re embedding a picture of an orang utan, but I seldom need to do that. Therefore, do spend a little more time to resize your images accordingly before uploading them.
Side tip: it also will speed up the loading time of the page if you resize them smaller according to my suggestions above.
(These images come from the website I saw today, and I normally give credit when I use images, but in this circumstance, they might not quite be credit, and as such have not linked their website – if you are the photographers, and would still like a link, let me know)
