\"\"

The SITS Girls

The Secret to Success is Support

HTML and CSS Photo Basics: Learn How to Style Your Blog Photos

·

This post may contain affiliate links which may give us a commission at no additional cost to you. As an Amazon Associate we earn from qualifying purchases.

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, you make find yourself wondering how to manipulate an image’s HTML code. Don’t panic! It’s not as cryptic and difficult as it sounds.

Blogging Tip: You can use simple html and css to make the pictures on your blog display exactly as you want them to be viewed. This simple and easy html tutorial will help you get control of your images.

Here are five tips to help you customize your blog images:

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="Pink Rose" title="Pink Rose" >

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: Resize Your Photos

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 post you’re creating.

For example, I use Flickr, which automatically sizes images at 500 pixels and 640 pixels. 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" >

Style images by changing height or width attributes

I use this method to create a collage, while making sure the width and/or height align correctly. I could create a photo 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. To do this, I just change the height for the landscape oriented photo to “240” and remove the width completely:

Image Tips: Change height/width attributes to fit your blog Image Tips: Change height/width attributes to fit your blog

Tip #3: Position Your Photos to the Left {Or the Right}

Image Tips: Align images to the left or right of text.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.

Adding Only 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) – Looking for different dashed or dotted options? Then check out various border styles.
  • 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. You can do the same with the photos for your blog!

Here’s the code you need:

style="padding: 10px; background-color: #fef2f4;"

Keep in mind you can change the amount of padding and the color value. Just use the instructions given above.

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 Images for SEO

When search engines go through your site trying to figure out how to rank your blog post, it looks at specific elements on your page first: your page title, meta keywords and description, 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 a topic.

When it comes to keywords, the first thing you want to do is choose phrases people are searching for. If you’re writing an post on “Spring Gardening Tips”, this may be a key phrase for you.

Once you’ve chosen your keywords, they should appear in three places inside the image code:

  1. 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.
  2. 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 Alt Text you assign to your photo will also be the description that automatically populates when someone pins your image on Pinterest. Make sure you are using this opportunity to add in exactly what you would like people to say if they pin your pictures.
  3. 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 highlight 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!">

Photo Challenge: Add Photos with Style!

Try creating a new blog post with the above image tips in mind, or try tinkering with an existing blog entry that includes photos. (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.

About Tracie Nall

Tracie lives in Arizona with her husband, teen daughter, and more books than her shelves will hold. She spends her days writing and editing. Many of her words end up on her blog, From Tracie. Find Tracie on Twitter @FromTracie and on Instagram where she takes pictures of things that are yellow.

Reader Interactions

Comments

  1. Lauren says

    If you want to use somebody else’s photo, how is the proper way to cite them as a source under the photo? Will a name suffice?

  2. MOMmetime says

    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

  4. Leah says

    What great tips! I love photography and am always looking for new ways to improve my photos and their layout on my blog. Thanks!

  5. Barbara Manatee says

    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.

  7. Beth says

    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.

  9. PatriciaD says

    Excellent tips, thanks so much!! I use Windows Live Writer, too and love it because it makes some of this sooooo super easy.

  13. rachel says

    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?

    • Lynda says

      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!

    • Fazan says

      Just stumbled upon your site lnooikg for an apple cranberry crisp recipe. I loved your idea for the roasted cauliflower, prosciutto, peas with oricchiete in fact, just thinking about it makes me hungry! I look forward to reading your blog!

  14. Emma says

    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

  20. Katie P says

    Thanks for the tips! I can always use more photography tips — it seems like that is how to really entice your readers!

  21. Anna-Elizabeth says

    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!

    • Lynda says

      Really, that’s the proper thing to do, or actually resize the photo. I don’t have time for that though! 🙂

  22. Mary @ Redo 101 says

    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!

    • Lynda says

      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:

      blogger

  23. Amy 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.

  25. Jenny Bunny says

    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! 😀

  30. Living the Balanced Life says

    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

  31. [email protected] says

    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.

  32. Ashley Sisk says

    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!

  35. Alexandra Román says

    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 😉

  36. WarmSunshine says

    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!

  37. LaVonne says

    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!!!!

  38. LaVonne says

    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!!!!

  41. Jade @ No Longer 25 says

    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.

  42. Jinny says

    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!