![\"How](\"https:\/\/urbanpixxels.com\/wp-content\/uploads\/2015\/08\/Resizing-blog-images-Photoshop.jpg\")
Resizing photos for your blog is probably something that every blogger struggles with. I know I do! Everybody is so obsessed with megapixels when they buy a new camera. We want more, more, more! Resulting in beautiful photos…and huge file sizes. All those pixels are great when you want to make prints, but if you don’t want your blog to take forever to load, you’ll need to resize your photos.<\/p>\n
So what’s so difficult about resizing a\u00a0photo? Reducing the number of pixels can\u00a0make a photo\u00a0look blurry and not sharp and crisp like the original (larger)\u00a0version. I don’t know about you, but I want the smaller version to look just as good.<\/p>\n
I’ve read so many tutorials about this topic and finally found a workflow to resize my blog photos that works for me. There are probably a million other ways to do this, but this is how I do it for Urban Pixxels.<\/p>\n
<\/p>\n
![\"How](\"https:\/\/urbanpixxels.com\/wp-content\/uploads\/2015\/08\/Resizing-blog-images.jpg\")
Obviously every blog is different. I want my images to align with the text, so they need to be the same width as my blog. Have a look at your blog settings to check\u00a0the number of pixels you need.\u00a0For me it’s 900px, but for most other blogs it will be smaller, especially if you have a sidebar.<\/p>\n
Then there’s the thing<\/em> with retina displays. Gotta love those super sharp displays, but you’re also going to need twice as many pixels to get the same sharp effect.<\/p>\n That’s why I upload photos that are 2x the width of my blog, so they’ll look good on both retina and non-retina displays. The downside is that the file size will be larger, which slows down the blog a bit, so it’s up to you if you want to do this.<\/p>\n <\/p>\n Open the photo in Photoshop and select Image > Image Size.<\/p>\n Change the number of pixels next to ‘width’ and make sure you’ve checked the Resample box and that it says ‘Bicubic (smooth gradients)’. \u00a0If you want you can also change the resolution as you won’t need more than 72 for web images. Click ‘OK’<\/p>\n <\/p>\n Copy this\u00a0layer by clicking Ctrl + J (PC) \/ Cmnd + J (Mac) and then select Filter > Sharpen > Smart Sharpen.<\/p>\nStep 2: Resize your photo in Photoshop<\/h3>\n
![\"How](\"https:\/\/urbanpixxels.com\/wp-content\/uploads\/2015\/08\/Resizing-blog-images-pixels.jpg\"){kind=tracking}
I’m using Photoshop CC to change the size of my photos. Of course I can export a smaller version in Lightroom (or other programs) as well, but I’ll need Photoshop for the next steps.<\/p>\nStep 3: Make it super sharp<\/h3>\n
![\"How](\"https:\/\/urbanpixxels.com\/wp-content\/uploads\/2015\/08\/Resizing-blog-images-sharpen-photo.jpg\")
If you would upload the photo after the previous step it would look okay, but compare it to the original photo and you’ll definitely see it’s less sharp. So we need to add sharpness. It’s important that you do this after<\/em> you’ve resized the photo.<\/p>\n
![\"How](\"https:\/\/urbanpixxels.com\/wp-content\/uploads\/2015\/08\/Resizing-blog-images-save-for-web.jpg\")
Instead of just saving your photo via ‘Save as’, I’m using the ‘Save for Web’ option. This will optimize the file size, while\u00a0still maintaining\u00a0a good image quality.<\/p>\n