How To Manually Size Your Blog's Images Without Using a Photo Editor

 So I got this new mac with retina display. This is a double-edged sword because on one hand, my blog designs and pictures look fantastic in photoshop. Everything is so crisp and sharp, it is a party for my eyeballs. But on the other hand, many web graphics, my own included, look fuzzy. Real fuzzy. To combat that, I found a trick that works... upload your images at a higher resolution, then size them down via HTML code, in blogger. 


This trick is not only helpful if you have a laptop or tablet with retina display, but because it can save bloggers who size all their images in a photo editor, so much time. P.S. if you have a blog, you should be taking the time to size your images, end of story. 
Side note: you can also use a CSS code to automatically size every single image you upload to your blog to be a fixed width, but I'm not a big fan of that. You end up sizing images from past posts you don't want sized, or other blog elements like your post signature or pin it button, which can cause a big ole mess. Plus, sizing images down will always look great, but blowing images up will make them very fuzzy. While it works for some, it personally doesn't work for me, so I'm not going to talk about that today. 
// Step one //Upload your image to your blog post

 // Step two //Click your image, and select "original size". I always recommend using original size. If you rely on "x-large" your photos will not come out uniform. Any vertical image will not be sized to the same width as your horizontal images. 

   // Step three //When you preview your image after selecting "original size" you will see that it bleeds into your sidebar. Not good, now let's fix that!

   // Step four //In your blog post editor, select HTML.Locate the area of code for your picture... it will look something like this: 

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit8bTURw7LwcqddDjOQXkuoYQYIMKcSWYwmkxnBnmgU3SsXrugIB715DbUVCNu9PFZhvXu8dRD5v2qgXxA__yH0_TBzLAAvI7hwxg0xJiZh_ormLA1_RAdPYhjzpEMShbSHhifDsJ7kt8/s1600/gee1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit8bTURw7LwcqddDjOQXkuoYQYIMKcSWYwmkxnBnmgU3SsXrugIB715DbUVCNu9PFZhvXu8dRD5v2qgXxA__yH0_TBzLAAvI7hwxg0xJiZh_ormLA1_RAdPYhjzpEMShbSHhifDsJ7kt8/s1600/gee1.png" /></a>

  Here is a screen shot so you can see mine! 

    // Step five //  Right before this portion of the code:

/></a></div>

 You'll want to insert the following code: 

width="650px"

(if you size your images to a different size than 650px, insert that size here instead) So your final code will look like this:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit8bTURw7LwcqddDjOQXkuoYQYIMKcSWYwmkxnBnmgU3SsXrugIB715DbUVCNu9PFZhvXu8dRD5v2qgXxA__yH0_TBzLAAvI7hwxg0xJiZh_ormLA1_RAdPYhjzpEMShbSHhifDsJ7kt8/s1600/gee1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit8bTURw7LwcqddDjOQXkuoYQYIMKcSWYwmkxnBnmgU3SsXrugIB715DbUVCNu9PFZhvXu8dRD5v2qgXxA__yH0_TBzLAAvI7hwxg0xJiZh_ormLA1_RAdPYhjzpEMShbSHhifDsJ7kt8/s1600/gee1.png" width="650px" /></a>

 And if you are more of a visual person, here it is as a screen shot!

    // Step six //Voila! All done! The width of your image will be the correct pixel size, and the height will auto adjust based on whichever width you select. 

 Any questions? Leave me a comment below!
Like this post? 
You might also enjoy these posts about sizing images:How to Remove Extra Space Between Images // Photo Layout Tips Or some of my other posts featuring blog tips and tricksSaturday Sessions