Venus Trapped in Mars Sports and Lifestyle Blog Dallas

23 March 2015

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 tricks
Saturday Sessions


description

19 comments :

  1. This is genius!!! I'm very basic and usually use picmonkey, which is good sometimes if I want to touch it up, but not if I just want to resize. This will save me SO much time!

    ReplyDelete
    Replies
    1. I agree I am super basic when it comes to this stuff and use picmonkey as well lol. This is a life saver!

      Delete
  2. this is super handy. also such a "duh I can't believe I didn't think of that" moment....

    ReplyDelete
  3. well i love this post. pinning! awesome tip!

    ReplyDelete
  4. Whoa! So awesome and useful, especially for someone like me ;)

    ReplyDelete
  5. This is GOLD! Thank you! I was doing the large or xlarge thing and it annoyed me greatly that vertical pics weren't the same width!

    ReplyDelete
  6. Awesome tip! Do you find when you upload your photos that aren't already sized down, they take forever? I find it takes almost 3 times as long, but maybe my internet just sucks?

    ReplyDelete
  7. This is AWESOME - thanks so much for the tip!!

    ReplyDelete
  8. I would have never thought of that in a million years, but it makes so much sense. Thank you, Jedi Master.

    ReplyDelete
  9. One of my next projects is to figure out what size mine need to be... GRRR. I always feel like an idiot. Thanks for posting this because it gives me a starting point :)

    ReplyDelete
  10. Ah great tips! Pictures always overwhelm me so I often just don't include them!

    ReplyDelete
  11. just in time.... great post and thanks so much :D

    ReplyDelete
  12. I love this! I was so excited, I started editing my pictures as I was reading this lol. This will save me so much time. I always wondered how people got their pictures to look so big without using extra large. Thanks for this. How do you get your comments to look so cool? I love it!!

    XOXO
    Alethea
    http://thepowerofthepretty.blogspot.com/

    ReplyDelete
  13. Love your blogging tips! I'm new to blogging and still trying to figure things out.

    Since you are talking about resizing pictures, maybe you can help me with this.

    The profile photo on my blog is smushed. The photo links to my blogger profile so whatever is on there is on here. It looks fine on my profile but is smushed on my blog. Any thoughts on how to fix this?

    ReplyDelete
  14. I am the X-Large type and pretty much have no idea if the above thing you mentioned is possible. You just gimme a new horizon! Yay! Thank you so much for sharing. Can't wait to try!

    ReplyDelete
  15. I would likewise persuade pretty much every individual to spare this website page for any most loved help to help posted the appearance. business card

    ReplyDelete
  16. To create quality photos for your blog want advice you to use https://macphun.com/ photo editing app for MAC, this my favorite photo editing app. Try to and I'm sure you'll like it. Hope it will be useful for you. Good luck.

    ReplyDelete

Comments make my heart go boom boom.

I respond to all comments, if you are leaving me comments and not getting a reply, you may be a no-reply blogger. Fix it HERE!