When we are optimizing our blog, images are one of the last things we worry about. The problem with not worrying about images is that they affect website load time and disk space. When people want to visit your blog and it takes longer than ten seconds to load, they will often click the back button and go elsewhere.

In modern web design, we normally talk about two different types of images – JPG and PNG. I never use GIFs for anything except animations due to their low quality.

Blog Title

PNG

PNG Logo

When you are designing anything with transparency, always use a PNG. This will allow the background to shine through, making the title look like text instead of an image.

JPG

JPG Logo

If you use a JPG title, the background will be white and will not allow the blog background to shine through. This looks unprofessional and makes the blog look choppy at the top.

Screenshots

PNG

PNG Screenshot

JPG

JPG Screenshot

It doesn’t matter whether you are using a Windows, Mac, or Linux computer, the majority of screenshot programs automatically save screenshots as PNG. If you study the two screenshots above, the PNG has a slightly better color to it, while the JPG screenshot seems to be washed out. However, if you didn’t compare the PNG to the JPG side by side, you would never notice the difference. It is a vary small difference in color and can only be noticed on high-quality monitors.

The reason I would suggest using JPGs for screenshots is that they are smaller in size and are of the same quality as PNGs. This helps website load time and saves space on your server for more content. The two images shown above are the exact same dimensions, but the PNG is 344 KB while the JPG is 324 KB. While this is barely a difference for these small images, it makes a bigger difference with larger screenshots (I’ve had some PNGs be 1 MB and the JPG be 500 KB), and over time, that saved space will eventually add up.

Photographs / Images

PNG

July 4 Cake

JPG

July 4 Cake

Just like the screenshots I mentioned earlier, these two images are both the exact same dimensions. The PNG is 5.7 MB, but the JPG is 2.6 MB. This is a significant difference and will increase load time and save a lot of space on your web server. Normally, all cameras save images as JPG, so you don’t have to worry about converting anything here.

email