Whoda Thunk? Tips Just For My Fellow Bloggers

Disclosure: this post may contain affiliate links, which means I may make a commission if you decide to make a purchase through one of my links, at no cost to you.

Not everyone who visits my site has a blog, but I thought this little tidbit would be interesting for bloggers and blogees (it’s fun to make up words) alike.

Has anyone else experienced this? You create an image or logo using the graphic imaging software of your choice (I use Paint.NET, the red-headed stepchild of Photoshop). You save it as a JPEG, happily upload the crisp image to a web site… and the lines appear ever-so-slightly blurry. How in the world did that happen?

To be honest, I know next to nothing when it comes to coding. Even though professionally I’m in IT/Analytics, I never took the time to learn HTML/CSS until it became a hobby. Now that I have the blog, I’m constantly learning new and different things to enhance reader experience when they visit. And so far, I’m loving it. Googling my little booty off, searching for ideas.

But, back to the blurry image. What to do? The answer, though it’s taken me until now to figure it out (this is what happens when you’re self-taught:  you learn how to create a three-column footer before learning the difference between image file types) is simple:  If the image is blurry, use a different file type.

The first time I saw a blurry image on my blog, I invented my own fix. I just made the jpeg file bigger and shrunk it down to the size I wanted using my budding HTML skillz (with a Z). No more blur. But then, something else happened:  my page took longer to load. Darn.

Eventually, through the million posts and pages there are that describe the differences of image file types (such as here and here), I figured out that I was making a rookie mistake.

I could repeat the same info as the two links above (as well as all of the other pages I found when Googling), but I’d rather boil it down to two statements that I found the most helpful:

Continue using JPEG for photos.

Use GIF or PNG files if you don’t want blurry logos, buttons, headers and other such things.

The only downside to PNG is that older browsers don’t really support it. So in other words, if you visit a site and you see images blanking, it may be your browser’s way of telling you that you should update it to the most recent version.

So, there you have it. Is anyone out there now planning on tuning up their site like I am? Or am I the only one out there in the blog world that didn’t know?