Blogging 101: A Picture is Worth a Thousand Words

An age old adage that isn’t entirely true. As a writer, you really do try to paint something that can be expressed just as well in words as in visuals, but like I said earlier, media in blog posts can be your friend. Why? Again, it help breaks up large blocks of text, and especially when reviewing dramas and movies, it’s helpful for people to see some key scenes or favorites along the way.

The thing to note about pictures is file type and file size. I don’t know about every platform, but most free blogging platforms only allow you so much space for media. Once you hit that limit, you generally have to shell out some money to increase your storage space. It’s also good to note that pictures can also help increase bandwidth which isn’t a good thing either, but the main worry for that is on self-hosted blogs & websites, so nothing I’m covering in the 101 series.

It’s also good to note that the more media you have on a page, the longer it can take to load, which is not a good thing in this day and age where people are very instantaneous creatures and despise waiting for even a second, let alone any longer times that having too much media content on a page can bring. And, of course, the larger the file size of your picture, the worse off on the load time. I mean, usually platforms do have something in place to help with loading—such as lazy load which means media doesn’t load until it’s scrolled to.

st-e07-00005So…pictures. For the most part, I use my own. I take screenshots from MVs, dramas, and movies, and official websites. If you’re not using your own, you had better make sure you get permission to use others, use free stock images, or you give credit to the place you found the original. Oh…and don’t hotlink. It’s not nice. It’s part of the bandwidth issue (on the original hoster’s servers), which can also play hobnob with having externally stored photos vs. internally stored photos. And…I think they say technically hosting images externally can drive up page load times, but given storage constraints, you can’t always put everything on your own blog.

So some nitty gritty basics. When using media for a blog you want to use JPEG, PNG, or GIF. These are the three standard types that most browsers will support.

JPEG is best for photographs when you want small file sizes. Do note that JPEGs are lossy which means the smaller the file size, generally the cruddier the quality of the picture. JPEGs are also supported by all web browsers, which is really great. This file type is not, however, good for images with text, large blocks of color, or shapes due to the lossiness which makes lines blur and colors change.

PNG is ideal for smaller file sizes with no loss in quality. However, I think they are still larger in size than most standard JPEGs depending on the complexity of the images. PNGs are also ideal if you want to transparencies for some cool effects or headers/logos. Transparency is not supported at all with JPEGs. PNGs do come in two distinct flavors PNG-8 and PNG-24. For transparencies, use 24. For standard images, use 8. Do note that PNG-8 does have limitations when it comes to colors.

GIF files are generally the best for graphics with limited colors, buttons, cartoons, and animations. I think that’s really the only image file type that supports animation. Flash is an entirely different monster that I don’t know how to use at all and not every browser supports flash without the help of a plugin.

B.A.P Youngjae

GIF goodness! Too many of these on a page is a no-no. Major load time issues.

A good baseline for saving images is to make sure you get them under 1MB. Images will load the fastest if you can keep them under 500kb if at all possible. The larger the file size, the longer the load time and the more storage space you have to worry about taking up. There are ways to cut down on file sizes. I’m sure there’s some free compression websites out there. RIOT is a great program that allows you to compress images with limited loss and is free. Photoshop allows you to play and tweak stuff and get the file size down, but we all know Adobe software is hella expensive. I’ve heard some good things about free software Gimp, but have no experience with that at all.

I could talk about pixels and the best size for web viewing, but I won’t really do that. You really kind of have to understand your platform, your theme, and a bit more about that stuff. It could be best practice to save the images at about 1024 pixels in width and then upload it to use at whatever size you want.

If you are worried about storage limitations on your blog, you do also have to worry about storage limitations on other sites as well. Photobucket, Flickr, etc, do have bandwidth limitations for free accounts. Oh, and of course there’s file storage size limitations as well. A lot of places have increased their storage capacity for free, but there are still many that offer a small amount of storage and bandwidth to make you pay them money. Beware. People who store images on Photobucket have those lovely placeholder images when bandwidth quotas have been met. You don’t want stuff like that to happen. It is best practice to put as many images on your own blogging platform as possible.

cake

photo – Cadbury Cake by Don Ramsey

If you can’t do that, I do recommend Google’s Picasa which has now turned into like Google+ pictures or something like that. You can download the free software, do some basic editing an make some really cool, fast collages and then upload them straight to your Google+ profile. You can choose to make the pictures public or private or share them with a small circle of people. You can then link to those pictures on your own site. Getting the correct URL for the images is a tad tricky, but I haven’t had any problems with bandwidth issues as of yet with Google. I do believe the only supported formats are JPEGs, so anything else will be converted before it can be uploaded. Oh, and you want to make sure the auto enhance feature is off because that can make darker images upload totally ugly and grainy. Let’s see. I’ve also used SkyDrive (which is now OneDrive), Flickr, and DropBox for hosting external pictures. The DropBox one only works if it’s in your public folder.

I compose the majority of my posts in the now deprecated Windows Live Writer. A good thing to note is that if you don’t want to mess with uploading images directly to your site, you can put them in your Live Writer post which will publish the images up for you. Do note that even if you choose to have the pictures inherit your blog styles, you can get some wonky formatting. I also noticed that Live Writer uploaded both a thumbnail image and the original image, so I wasn’t really happy with that. But, it does save a few steps.

So, to summarize, the best image file type to use depending on what kind of image you’re working with is a JPEG. You do want to keep file sizes under 1MB. It’s best to host internally vs. externally, but do be careful if you can’t do that so you’re not exceeding your own bandwidth limitations on the external site. Give credit where it is due, just like when reblogging other people’s posts if you’re not using your own images. Don’t hotlink to other people’s images which means you take the link to their photo and embed it into your site.

And…always feel free to re-use images you already have available as long as they pertain to whatever it is you’re posting about. This cuts down on storage worries.

Oh, and an aside. I really like to stagger images from left to right to center so it’s not all the same. You do have to be aware of text wrapping and padding, but that’s usually backed into your platform and theme.

Wanna share your thoughts?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s