Photography is a powerful tool that can bring a lot of life to your blog posts. Adding just a little style can help keep readers engaged without becoming distracted by your images. You can also draw more relevant readers to your blog by taking advantage of image SEO.
In both cases, we’ll be working directly with the image’s HTML code. Don’t panic! It’s not as cryptic and difficult as it sounds.
This article includes five image tips to help you customize and optimize the images you post to your blog.
Tip #1: Use Your HTML Editor
The first step is being able to find the image HTML code to tweak it. If you’re used to composing your entry via the visual editor, continue to do that and switch to the HTML as needed to style or alter your image’s attributes.
To find your image code once you switch to the HTML editor, look for a word or phrase that exists near the image in your entry. It probably looks something like the code below and may be surrounded by a link tag: <a href=""></a>
<img src="http://url-to-photo.jpg" width="640" height="426" alt="Wet Leaf" title="Wet Leaf" >
Each value inside the tag is an attribute: src, width, height, alt and title. These are variables that will change with each image you share.
Tip #2: Adjust Your Size
Whether you host your images on a site like Flickr or you upload them to your own blog’s dashboard, you probably only have a few sizing options and not all of these may work well for the entry you’re composing.
For example, I use Flickr who automatically sizes their images at 500 pixels and 640 pixels among others. My blog layout only accommodates about 600 pixels in width, but I like displaying photos larger than the 500px resolution.
So what do I do? I get rid of the “height” attribute and change the “width” attribute to 600:
<img src="http://url-to-photo.jpg" width="600" alt="Wet Leaf" title="Wet Leaf" >
I use this method to collage photos directly in the entry while making sure the width and/or height align correctly. I could create a blog collage, but this is much faster and I like having the images separate for SEO and usability.
Below, I have two photos: one landscape with a height of 333 pixels and one portrait orientation with a height of 240 pixels. If I put them side-to-side like this, it would look disorderly so I want to make sure the heights match. So I just change the height for the landscape oriented photo to “240″ and remove the width completely:
Notes about this method:
- Remove or change the other attribute so your image will scale correctly. I’m not good at math so instead of figuring out the correct value for the attribute, I just remove it.
- Only use this to subtract height and width for images. You could increase these values, but it will stretch the photo and make it look weird.
- The starting image resolution should be close to what you’re changing it to. Your readers are still downloading that full sized image! While an extra 100 pixels in resolution doesn’t make much difference in loading time, an extra 500 pixels for each shot will definitely slow down your page loads.
- The absence of either the width or height attribute renders the HTML invalid as both are required attributes. Modern browsers render the image without an issue, so a little invalid HTML doesn’t bother me. I gave up coding for compliance a long time ago; life’s too short!
Tip #3: To the Left, To the Left….
It’s easy to style images to align to the left or right of your text as it is in this paragraph. First, add the photo to the beginning of the paragraph. Then, style it by adding the HTML or CSS code indicated below. Both ways are equally effective. I like the CSS way because I’m usually adding other styles to the image via this method.
HTML Attributes
Here are the attributes you’ll want to add to your img src code:
align="right" vspace="10" hspace="10"
You can align either to the left or right. The other two attributes help pad the image both vertically and horizontally so your words are not touching the image.
CSS Attributes
Here, all we need to do is add a style attribute to the img tag. The style will let us use any CSS we’d like to make the image pretty. Here’s how to accomplish the exact same thing as the above HTML attributes:
style="float: right; margin: 10px;"
Here’s what your complete code might look like:
<img src="http://url-to-photo.jpg" width="171" height="240" title="Flowers - Perspective" alt="Flowers - Perspective" style="float:right; margin:10px;">
Tip #4: Add a Border!
Adding a border around your photo with can draw attention to it and make it look pretty inside your site design. You’ll accomplish this with CSS by adding or appending the style attribute.
Just a Border
Here are the attributes you’ll want to add to your img src code:
style="border: 5px double #e34874;"
NOTE: If your image code already has a style attribute, don’t add another one! Just copy and paste the part within the quotations and place it at the end of what’s there.
The border CSS element has several variables you can customize:
- Width: (5px) – Change this to make your border bigger or smaller.
- Style: (double) – There are a number of different style options outlined here.
- Color: (#e34874) – You can use color names such as “black” and “red”, the RGB values or the Hex Code. I find the hex code to be easiest when you use a color picker.
A Border and Padding
When you get a photograph framed for your home, frequently matting is added to it in order to put some padding between the photo and the frame’s border. This is the same method.
Here’s your code:
style="padding: 10px; background-color: #fef2f4;"
Change the amount of padding and the color value. Use the instructions given for the border color to customize this.
Here’s what your image code might look like with all of the styles above applied:
<img src="http://url-to-photo.jpg" width="240" height="138" alt="Flowers" title="Flowers" style="float: right; margin: 10px; border: 5px double #e34874; padding: 10px; background-color: #fef2f4;">
Tip #5: Optimize Image for SEO
When search engines go through your entries trying to figure out how to rank your article, it looks at specific elements on your page first: your page title, meta keywords and description, link anchor text and images are a couple of examples. That’s right, when your pages are scanned by search engines, the information you have in your image code ranks higher than just a regular old paragraph of text about the topic.
The first thing you want to do is pick keywords for your blog entry you’re hoping people will search for. If you’re writing an article on “Spring Gardening Tips”, this may be a key phrase for you.
When you have your keywords picked, they should appear in three places inside the image code:
- The Filename – If you host your own images, make sure to name them with your target keywords. A picture of a plant that needs indirect sunlight might be named: spring-gardening-tips-indirect-sunlight.jpg.
- The Alt Attribute – The text in this attribute is used as an alternative if the image cannot be displayed. This is important for accessibility as you want those with no or poor eyesight to be able to enjoy your articles. Make sure the text here is descriptive and can completely replace the picture. An example for a keyword rich alt attribute may be, “Spring Gardening Tips: a Peace Lilly needs Indirect Sunlight”
- The Title Attribute – The text in this attribute is used as a “tooltip” if you hover your mouse over the photo. This can be exactly the same as your Alt attribute text or you can try to highlight some different keywords.
Here’s what your image code might look like for this SEO example:
<img src="http://url.com/spring-gardening-tips-indirect-sunlight.jpg" width="240" height="138" alt="Spring Gardening Tips: a Peace Lilly needs Indirect Sunlight" title="Spring Gardening Tips: a peace lilly needs only indirect sunlight to thrive!">
A Blogging Challenge: Add Photos with Style!
Today, try creating a new blog post with these image tips in mind, or try tinkering with an existing blog entry with photos in it. (Make a back-up first! Just copy and paste the HTML from your entry into a notepad in case something goes wrong.)
Try out some of the style suggestions listed above and apply the image SEO rich keywords to the filename, alt and title tags.
If you need any help, please don’t hesitate to ask here or on our forums!
If you have any other image styling or SEO tips, please weigh in or tweet the tips and articles using the #SITSpics hashtag!
Tomorrow we’re going to discuss how to effectively use color and black and white in your photography! If you have any great color or black and white examples, be sure to add them to our Flickr group!
The SITS Spring into Action Photo Challenge is a two week event designed to inspire your photography and help improve your blog with photos. Follow along in our Forums, #SITSPics on Twitter, our Flickr group and Facebook! It’s never too late to jump in!- Introduction: Join the Spring into Action Photo Challenge!
- Day 1: Composition and Perspective Photo Tips
- Day 2: Free Photo Editing and Collage Resources
- Day 3: Lighting Photo Tips
- Day 4: Social Networking Tips
- Day 5: YOUR Photo Tips
- Day 6: Lines and Repetition Photo Tips
- Day 7: Five Image Tips to Improve Your Blog
- Day 8: Color and Contrast Photo Tips
- Day 9: How to Protect Your Photos Online
- Day 10: Spring Into Action Photo Challenge Wrap-Up
Wonderful tips! I didn’t know about most … ok, all … of these things! I’m gonna have some fun playing around with this the next time I’m uploading a blog post!
Jinny recently posted..Calling- Motivation
Thanks for the tips, I use Windows Live Writer which allows me to do all these things in the dashboard, although I am comfortable with HTML sometimes it’s just laziness. At least I know that if I can’t get it to look right I can swap over and work on the source really easily.
The SEO stuff is really insteresting, I try to put in alternative text and a title but sometimes I forget, recently I’ve been pretty good at it though. I didn’t know about the difference between the 3 text parts of the photo that’s really helpful.
Jade @ No Longer 25 recently posted..You’ve Got Mail Niceties Challenge 2
Great tips. I always wondered how other bloggers organize their photos on their pages. I’ll try to use some of these.
Alexandra the Tsaritsa recently posted..DREAMS for sale
I had no idea that how I named my photos would effect my google rank! Thank you!
Miel Abeille recently posted..The Versatile Blogger
So happy that I read this post! I played around with my photos for my morning post. And I did it! Love that I now these things now. Thanks!!!!
LaVonne recently posted..Fraser River Family Fun
So happy that I read this post! I played around with my photos for my morning post. And I did it! Love that I now these things now. Thanks!!!!
LaVonne recently posted..Fraser River Family Fun
Thanks for sharing those simple and helpful tips. I always had some trouble with the images on my blog. Happy Tuesday ladies. Come by my blog to listen to a soulful ballad and *smile*
P.S. A friend’s meet up get together on my blog this coming Thursday. Hope you all make it there. I’ll be looking forward to it
Toodles!
WarmSunshine recently posted..Tunes I Like Tuesday – Smile
Love this article, specially since I’ve been trying to put a nice border on my pictures. I will give this a try for my next post. Hopefully I will not fail
Alexandra Román recently posted..Looking inside my manhole
Twitter: kidsyogateacher
says:
I rarely print out blog posts, but today is different. Thanks.
Young Yoga Masters recently posted..Buy One Get One Free- Marketing Tips for Yoga Teachers
Awesome. I hope it helps!
What a fantastic write up. Thank you for taking the time to address this aspect of posting photos.
Heather Johnson recently posted..FAMILY FUN FRIDAY-Dice 1 to 100
Thank you Heather!
These are great tips – I need to spend a little more time on my photos tags for SEO purposes, so I may come back to this article. Thanks girl!
You’re welcome Ashley!
These are such great tips! I’ve never paid much attention to how I name my photos or the alt tags, so when I write my next post tonight (and all posts going forward!) I will be sure to use relevant key words.
Laura@JourneyChic recently posted..Style Solution- Formal Baby Shower Outfit
Great tips! I knew some of these but I can imagine that a lot of bloggers don’t. I have been blogging almost a year and learned most of what I know from A. Trial and error and B. other bloggers!
Bernice
Living the Balanced Life recently posted..Speeding through life
Trial and Error and Other Bloggers are my favorite ways to learn too!
who doesn’t love tips… thanks so much.. you rock… and i am going to try the border.. I always have trouble with that
lisa fogarty recently posted..Iching
Cant wait to try these out! Have a wonderful day yall!!
Jamie recently posted..Thats What A Weekends For!
Twitter: RachelVoorhees
says:
WOW! I never do any of this! HTML scares me!
Amazing tips, Lynda! Everyone should really bookmark it for reference!
Melissa {adventuroo} recently posted..Untainted by Words
Thanks Melissa!
Excellent tips! We already take advantage of most of these on our Oh, I Love That! blog, but I’ll have to check into the SEO stuff… I’m still not very caught up on that!
Jenny Bunny recently posted..Ray of Sunshine – Antiqued copper and Czech glass bracelet
Twitter: kg_photography
says:
I started using larger images, thanks to Lynda’s advice a while back, and have gotten loads of great feedback. Thanks so much, Lynda, for sharing what you know.
Through the Lens of Kimberly Gauthier, Kimberly Gauthier Photography recently posted..Why I Chose a Sony Alpha DSLR
Thanks Kimberly! I love the larger images on your site!
Twitter: babybabylemon
says:
I’m kind of embarrassed to admit that I know none of this. I have had tons of trouble adjusting the picture size on my blog because of the theme, so this should help out a ton.
Amy recently posted..Project 365 Days 92-98
Love your pictures today, Lynda! The leaf is fantastic! Can I get some help on today’s lesson, I know it’s understandable to Most. Normal. People
but it feels like Calculus to me.
1. Am I “inside” my Blog Edit or Create while doing these things with the pics – or am I somewhere else?
2. If I am in Blog Edit/Create, and have added the pic, do I then go to HTML and work from there? If so, I do not see any of the codes there … so that must not be the place???
Sorry to be so totally beginner, but I’m loving learning and can’t wait to apply what you’re teaching us each day. Thanks!
Hi Mary! Thanks so much about the leaf shot – I took that way back before I knew much about photography!
Make sure you include your blog link when commenting on the site so you’ll get visits from your comments!
As for your questions, the tips describe what to do from “Posting” tab inside Blogger when you’re composing a new entry. I have a test blogger account set up so I can play and I don’t see a “Blog Edit/Create” tab, so I’m not sure what you’re referring to with that.
To see what I mean about the HTML codes, go into edit an entry you’ve already posted and switch to the Edit HTML tab. It should look like this:
I had no idea you could just remove one component of width/heights. All this time I have been doing math to figure out the proper ratio. Love the tips. Thanks!
Anna-Elizabeth recently posted..Sunday Sunday Sunday!
Really, that’s the proper thing to do, or actually resize the photo. I don’t have time for that though!
Thanks for the tips! I can always use more photography tips — it seems like that is how to really entice your readers!
Katie P recently posted..Slow Cooker Asian Pork
Wow – this is a wealth of information!!! Thank you
Renee W. recently posted..The Cleaning Closet
Awesome post– thanks for the tips!!
PeaceLoveTerri recently posted..Real Momma- Real Style A Purple Affair
Twitter: greenearthbazar
says:
Great info.! Now to take the time to implement them… Thanks again Lynda!
Peace.
Michelle recently posted..Spring
I love all the tips!
Kelly recently posted..Weekend Rewind
These are great tips, especially the SEO which I haven’t tried before.
Myne Whitman recently posted..J is for JOY!
That’s really helpful thanks. I can never figure out how to move my pics to the left or the right so this will be fab! x
Emma recently posted..Local discoveries and lots of cake!!
these are really helpful tips. I didn’t know you could just delete one of the height or width thingies either, and I love the idea to do a collage of sorts just be resizing in html…I’m definitely going to try that! I really don’t know ANY-THING about SEO though, so I sort of glossed over that paragraph. Will we be delving a little deeper at all into that concept? Or maybe that’s what BBC is for?
rachel recently posted..shadows and bicycles
I’m just now getting into SEO and it’s rather interesting and not too hard. I was thinking about writing an article either for SITS or my site about it. If I don’t get to an article about it here, I’m sure someone else will!
Twitter: Simplywebly
says:
Great blog I am going to implement the space attributes and the SEO tips on my blog pictures.
Web recently posted..Day 10 HealthMC “Beating Sugar Addiction Part 2”
I cannot possibly tell you how helpful this all has been.
Bethany recently posted..Nothing But Love for Kathryn Stockett and The Help
Great ideas! I’ll need to bookmark this for the next time I’m stumped!
Thank you!
Excellent tips, thanks so much!! I use Windows Live Writer, too and love it because it makes some of this sooooo super easy.
Twitter: teacher_viviene
says:
Great tips! Thanks!
http://www.theblogforbrides.com
http://www.journeyofawoman.wordpress.com
I never even thought of changing the HTML of a photo. Although playing with HTML scares me a little, it seems easier to do this, especially for the collage effect. I am bookmarking this one. Thanks.
Beth recently posted..The Gift of Perspective- Given to Me by a Janitor
Thank you for helping me overcome my irrational fear of HTML codes. Baby steps…
I’m new here! Been hearing about SITS for a long time and finally decided to check it out! Thanks for the editing tips!
~*~*~*~*~
April is Autism Awareness Month. I’m dedicating my blog all month long to Autism.
What great tips! I love photography and am always looking for new ways to improve my photos and their layout on my blog. Thanks!
Great tips…I didn’t know you could just add HTML coding for borders and such…I learned alot. Thanks!
Tammy recently posted..Incentive Based Fundraising!
Lynda, thank you for the awesome tips! I have to be one of the most technically challenged people I know ~If I don’t get something I will spend time I really don’t have trying to find the answers…You explains things in a way that I GET IT! It does not take me forever to comprehend what you are communicating ~thank you! Amy
MOMmetime recently posted..Wordless Wednesday they make me smile!