I rarely get on my high horse over interweb matters but here goes! I see a lot of images on websites that appear to be appropriately sized but are actually massive and made to look small. A simple right click ‘inspect element’ in Chrome or Firefox shows the truth.
Don’t know what I’m on about? I probably haven’t explained it as well as this video does….
Size always matters
To show what I mean I have two pictures of Bodie from The Professionals, (actor Lewis Collins who sadly died recently) one of my style icons. They look very similar but the stats show they are very, very different. The larger 4MB plus version on the left has been resized via WordPress image editing screen to look 250 px x 375 px on the blog post but it’s actually more than ten times that size. Just because you made it look small doesn’t stop it being bigger than it is. You can click on the images which will show you what they look like at their original size. The one on the right looks fine and you wouldn’t event notice any difference if it wasn’t propped against its giant cousin.
Left image: 2731px x 4096 px, 400dpi, 4.6 MB.
Right image 250px x 375 px, 72dpi, 33 KB.
Why is this a problem?
Back when I was first building websites you were dealing with 56.6 K modems and so everything had to be optimised to be as efficient as possible – waiting for your pages to load is annoying. I regularly built whole websites that would fit on a floppy disk (1.44 MB). Once we all started getting better internet connections people got sloppy and stopped worrying about page load times. Google took action and we now use devices more and so people are starting to think more seriously about this again – a good thing.
Why not use the fancy image manipulation tools that most CMS have now?
Because they suck ass – if there is a good one I haven’t seen it yet. Classically some of these will let you edit the image and create an additional copy of the image with all your edits. So you’re left with two (or three, or four, or five…or how ever many edits your do) of the same image on your server! This makes version control and organising your files in your media manager generally, more difficult.
What should we do then smart guy?
Probably go back to the totally ‘old fashioned’ way of using tools like Photoshop (or something like GIMP if you’re short of cash) to web optimise your image to exactly the right size and resolution and then upload it to your CMS. Leave the image tinkering to the tools that do it best.
So going back to Father Ted clip – the image on the left is far away and the one on the right is small. Or is that the other way round?