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.
CAUTION!! Save a NEW VERSION of your image BEFORE resizing
#1: Open the Image Size Dialog Box
#2: Uncheck Resample
#3: Change “Resolution” from 133 to 72*
#4: Recheck Resample
#6: Change the pixel width to your desired length
And there you have it! Your image is resized and ready to go. But what above saving your image, you ask?
Tip 1: Use the Save for Web feature within Photoshop to see the varying file types and how they will affect your image.
Tip 2: Some web building platforms will require specific pixel dimensions for your image to show up accurately – remember to always start from your original image when creating these new pixel specific image files.
Tip 3: If you’re working with a photoshop edited image, remember to flatten your image before resizing. We recommend saving a separate unflattened document and a separate flattened document for this purpose.
Tip 4: Be sure your web image is in RGB.
* 72 dpi is an optional choice. As illustrated above, 2 dpi is also an option for web only images.
