tutorial // how to resize blog photos

Tuesday, February 05, 2013 Veronica Joyce 1 Comments

a friend recently asked me about how to re-size blog photos and i thought the best way to explain the process to him is through this post. i used to re-size my photos using online photo editing tools like picmonkey, but i remember getting frustrated a few times because it was so laborious, especially when i wanted to make adjustments. 

so, here's a quicker way of resizing photos that i got to learn, adjust to, and prefer over time. 

first, host your images in your preferred site. i upload mine in photobucket. you need to sign up in order to do so, but it doesn't take much time. after uploading your images, click on a specific image and you'll see image links, like the html link.

 photo sample1_zps63dd8fd8.jpg

then paste the code on your blog post's html editor. see image below.

 photo sample2_zps3f889b0c.jpg
you can do the adjustments within the html editor. to re-size your photo, enter the code width="size" right before the code "border="0" as shown below. you may also add codes to center your photo (text in green), if you don't want it centered, leave it out. 

<center><a href="http://s1102.beta.photobucket.com/user/nicajoice/media/sample2_zps3f889b0c.jpg.html" target="_blank"><img src="http://i1102.photobucket.com/albums/g456/nicajoice/sample2_zps3f889b0c.jpg" width="665" border="0" alt=" photo sample2_zps3f889b0c.jpg"/></a></center>

adjusting the width of your image automatically adjusts its height too so you need not worry about it. it also makes sure that the photo remains in perfect proportion.

this process comes in handy when you want all your photos to have the same sizes, especially the width, without ever having to use a separate tool to resize and save them individually.  or if you don't want your images (embedded videos) to extend beyond the borders of your posts area.
 photo Picture552_zpsb8ce7d38.jpg
 photo Picture551_zps7355bbaf.jpg

there, hope this helps! :)


1 comment: