HTML to insert images into your posts!

You know when my bloggy life changed?  The day I realized I should be using html to insert my images into posts. 

I was having some major issues with the insertion of images into my posts.  Whether I used my hosting server (Blogger) or blogging tool (Windows Live Writer), the image quality always suffered.  It used to drive me absolutely bonkers!  There is nothing worse than spending the time to process a beautiful image just to have it be compressed during insertion.  The scary thing?  I was even resizing my images and saving them as maximum quality .jpgs thinking it would make a difference!  You would think resizing them would negate the servers necessity to decrease the image file.  Unfortunately this is not the case and they were still being compressed.  Do you know what happens to an image during compression?  Pixellization (I promise, it’s a word).  In a larger image, the pixels are difficult to see since there are more of them and they are smaller.  With compression, you start to lose pixels and they become larger (and more visible).  This usually results in a block type appearance which can be confused as an out of focus image.  And let’s face it, there is nothing worse than a blurry/fuzzy image especially when your subject is a person.  Is it too much to ask that my blog readers see the beautiful, crisp, un-pixelated (okay, I’m not sure if this one’s a word) images I see in my photo editing software?  I don’t think so.

So here’s my tip for you today!  First, be sure that you are resizing your photos to the width of your blog posting area.  Mine happens to be somewhere around 900 px wide so I resize mine to 850 px to be safe.  If you are using Photoshop, and choose the ‘Save As’ feature under File, an image option box will appear allowing you to increase the quality of your file up to a maximum of 12 which is ALWAYS what I choose.  I recommend doing this. 

Now, all you have to do is find a site that allows you to upload your images that will also produce html code for your posts.  I’m currently using Flickr.  If you do not upgrade, however,  you will only have access to html code for smaller sizes of the images you upload.  It will not produce html for the original size image you upload.  A bummer, I know.  There is an easy but, more importantly, reasonably priced fix for this.  All you have to do is upgrade which I want to say, was under $30 for the year.  I can honestly say it’s the best thing I’ve spent my money on all year!

Anyhow, here is a short video tutorial to show you how to save your images in Photoshop, upload them to Flickr, grab the html code, and insert it into your post. If the video doesn’t work, you just click on the ‘USING HTML TO INSERT IMAGES INTO POSTS’ text below and it will take you directly to YouTube.

My recommendations for viewing this video at it’s maximum quality.

1. Make sure the volume on the video is up (second icon/button from the right at the bottom of the video).
2. Make sure the volume on your computer is up.
3. Be sure to view in 720p HD (second icon/button on the left at the bottom of the video).
4. Viewing it with the large player, instead of full screen, comes in more crisp & clear (fifth icon/button on the left at the bottom of the video).

USING HTML TO INSERT IMAGES INTO POSTS

If you missed my last post 4 FREE Grunge Frames, feel free to check it out!   I also added the Facebook LIKE button to my sidebar.  You know, in case you wanted to LIKE my page or something.  I’m just sayin’.  On a serious note, though, if you do ‘Like’ my page please drop me a comment so that I can like you back!  I have no problem returning the favor!

And if you are feeling VERY generous, I’d really appreciate your vote for Picket Fence Blogs.  All you have to do is click this button.

HAVE AN AWESOME WEEKEND!

 

Technorati Tags: html,tutorial,video,photoshop,resize,pixels,pixellization,flickr,photo challenge,new,alivia,elena,youtube,picket fence blogs,how to