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

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.

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>

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:

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:

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

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.

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: (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:

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:

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.

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.

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.

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 Lynda Giddens

Lynda is a blogger of 12 years and a self-taught amateur photographer living in Fort Worth, Texas with her husband and two young sons. Be inspired to learn more about photography on her blog, Daily Window. Follow her on Twitter, Flickr or Facebook!

Comments

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

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?

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!

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!

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:

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

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.

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.