So when I’m doing a blog post and want to add an image or photograph, or just add a photo to my gallery, I am bemused (to say the least) about people talking about pixels and dpi and references to sizes in KB or MB – whoosh that’s another subject that flies about 2 feet over my head!
Well, the Blogmistress set me the task of getting to grips with it, from the viewpoint of the uninformed!
Basically, all images are made up of several components:
Pixels – this word combines the 2 words “picture” and “element” and refers to the small dots that make up an image. Each pixel is a different colour, which when put together makes up the image itself. The more pixels an image has, the clearer and more defined the overall image will be. So, high pixel count is good….
Dpi – this stands for dots per inch and measures the resolution of an image. That might not sound much, until you know that it’s per line! So again, the higher the Dpi figure, the sharper the image will be. For web this only needs to be 72 but if you want things printed it needs to be at least 300.
KB and MB – this is the one that gets me (and plenty of others, I gather). Blogmistress says it is the size of the image, but as in how much space it takes up, not in the “physical” size in pixels.
And then there are things called thumbnails – smaller equivalents of the image you’re using but we’ll cover more on that another time
So there you have it in a nutshell. One of the most important things to be concerned about is that size matters – we really cannot be uploading images that are MB size, so I’d like to share this really helpful site that guides you through resizing your images – useful if your images are too big. http://www.resizeyourimage.com/ basically holds your hand through changing the number of pixels or the width/height of an image… it’s great and if it works for me then it’ll work for you! So, go play with it and have fun.
Thanks to Su Butcher for suggesting this mighty useful tool
Mary
And Babs has now done a screencast showing how to use this:
Anonymous says
June 16, 2011 at 10:11 amOn windows PCs since the coming of XGA and the release of Windows XP screen dpi has been 96dpi not 72dpi.
Babs says
June 16, 2011 at 10:48 amThanks Jon – this is interesting and I’ve been working to the 72 dpi rule for longer than I care to admit. Thanks for this – it’s opened up something for your apprentice to look at in more detail.
Morag Gaherty says
June 17, 2011 at 12:42 pmOoh, am liking the resizing tool. Thanks!
Jonathan Gwyer says
October 15, 2011 at 4:39 pmGreat post, but I’m going to split hairs with both you and “Anonymous”…
When it comes to onscreen, dpi means nothing – it is neither 72 nor 96dpi.
A 15″ screen displaying 1280×1024 has the same number of dots as a 17” screen at 1280×1024, but a different number of inches 🙂
Pixels are far more important when considering the lowest common denominator for a reader’s screen, and filesize for download speed.
And although download speeds are becoming less of an issue, disk space and bandwidth are still important and affected by filesize.
Great link, too – one for the bookmarks!
Babs says
October 15, 2011 at 5:21 pmThanks Jonathan. So when I’m exporting an image, what dpi should I set it to? Ah – I think perhaps saying dpi is wrong. I use Fireworks and set the pixels/inch to 72 and had mistakenly (?) thought that was the dpi. Hmm.
I’d love to get this right, for myself and for our readers and clients.
PS: took care of that other little thing too 😉