We’ve all been there. Just admit it. You’ve sized an image and it keeps coming out fuzzy on the web! The sky is falling and you don’t know what to do! You just want to add a new photo to your website but it just looks weird! It’s okay, there’s no evil sorcery going on folks. Just some silliness in the world of pixels vs dpi.
Pixels are for SCREEN
DPI is for PRINT
But what does it all mean Designing Cousins!? Pixels are small or tiny squares that comprise an image displayed on a screen. Meanwhile, dpi is dots per inch comprising a printed image. Things get a bit more complicated, but for general use, like updating your website with new images, follow these sizing steps:
Hi I’m Zuzu and I’m 800 x 530 pixels and 133 dpi!
Hi, I’m Zuzu Two and I’m 800 x 530 pixels at 2 dpi!
As you can see above the pixels were doing all the work here. The dpi had no bearing on the actual screen appearance of the image. Pretty cool, huh?! Now, let’s focus on how to make resizing an image for web happen in Photoshop.