How to choose an image type for your blog, and why size matters

You’ve just finished writing the perfect post for your blog. You’re excited and you’re ready to hit publish, but it looks a little…well, boring. So what can you do?

Great content is key to a successful blog, but words aren’t enough.

If you want to spruce up the post a bit, a great image will do the trick. Graphics will add a level of complexity to an article — images invoke emotion, they add color to an otherwise plain site design, and they appeal to readers who like visual content.

So today I’m going to cover a few things:

1. The difference between various image formats
2. Image resolution, and why size matters)
3. What you need to know about licensing

Some image formats you can choose from:

Images come in different formats so that we can optimize their use for various purposes. The most common image formats you’re most likely to see are .jpg, png, and .gif. 

GIF files are great for creating low resolution files, and they can have transparency. Transparency allows you to place the image over something, like a colored background or photo, and if it’s a circle, for example, the area outside of the circle can be transparent. GIF files are simple, so they usually have a small file size. It’s important to note that GIF files are best used for symbols, not for photos. They also support animation, but there are better ways to accomplish animation that we won’t get into in this article.

JPG files are a more popular option. JPGs are extremely versatile, and can still have a fairly small file size. They support up to 16.7 million colors, so JPGs are perfect for photographs and more complex graphics. JPGs do not support transparency, so the circle image would display as a white square with the circle in the middle. The edges would not be transparent.

PNG files are sort of a mix between GIFs and JPGs. They support transparency, but also can handle lots of colors. In this case, the circle image would display with transparent corners, like the GIF, but you could also choose different levels of transparency, which you can’t with a GIF. A PNG’s file size is larger than JPGs because they’re more complex, but you can still use them on the web if they’re configured correctly.

There are also other files, such as .ai, .pdf, .eps and .tiff, to name a few. These files are vector files, which means that you can enlarge them to any size, from a tiny thumbnail graphic to a logo on the side of an airplane (or even larger), and they will look crisp and clear. JPGs, PNGs and GIFS will look distorted and pixely when enlarged. Vectors are great for print design because of their flexibility and the resolution.

What is image resolution?

Resolution refers to the density of an image. So, for example, an image that is 300 DPI (dots per inch) may look the same as an image that is 72 DPI, but the file size is going to be different, due to the density. 300 DPI images, otherwise known as high-resolution images, are used for print projects, and 72 DPI (or low-resolution) images are used for the web. You technically can use a high-resolution image for the web, but it will make your website pages load very slowly, so always use low-resolution images on your website. As you can see, size matters.

What you need to know about licensing

Unless you’re using photographs that you took yourself, or artwork that you created, you need to pay attention to licensing guidelines. If you purchase an image from a site like iStockPhoto.com, you are paying for the rights to use that image. There will be information about what you can and can’t do with that image. Can you use it on more than one project? Can you alter it? Can you alter it and resell it? Can you use it in an ebook that you then sell? Those are very important questions to get answered.

If you find an image on a website that provides free stock images, those images are usually free to use, but you still need to pay attention to the license. Sites like compfight.com will allow you to filter out images based on the license you need. For example, if you want to use the image on your website or promotional materials, you need to look at images that have a commercial creative commons license. 

But can’t I just use an image that I found on Google?

No, no, no! If you find an image on another website, unless it’s a website that provides royalty-free stock photos in the public domain, you absolutely need to obey the license. The image doesn’t belong to you, and if you use it, you are stealing. If you get caught, you could face hefty fines and even have your website taken down. 

So do your due diligence and make sure you are using your images legally.

Be careful not to make this mistake

Once you have your image, and you have set it to the right resolution, it’s also important to be sure that the dimensions are correct for your website. So when we talk about image size, we’re talking about the file size, but also about the dimensions of the image. 

For example, if your page allows for an image that is 400px wide, but the image you upload to your website is 1000px wide, one of two things will happen: Either the image will display at its full-size and look silly because it’s too big for the page, or it will be displayed at the 400px size the page is asking for, so it will look like it’s right, but it’s still too big — in which case it will slow down the loading speed, just like a high-resolution image would.

So before you upload your images, take a few minutes to resize them to the appropriate dimensions. You can do this using image editing tools that come with your computer, or you can download an app, or even use an online tool like picmonkey.com to resize your images. The extra time it takes will be worth it.

So to recap…

  • Be sure you’re using the best image type for the job — JPG, PNG or GIF.
  • Make sure your images are set to 72 DPI for web use, or 300 DPI for print.
  • Take a few minutes to resize your image to the correct dimensions for your blog post or web page.
  • Pay attention to the license for the image you want to use, so you’re only using images you have legal authority to use.

Back to you

What are you doing to create and choose great images for your own website and blog posts? Share below.