Concerned what the best image format for your photos should be? Slowing your site down? Looking crappy? After my post last week you should know all about optimizing your images for better SEO. But, you’re probably asking yourself, “should I save my blog images as jpg or png?” Well, I’ll help you out there!
Saving your blog image files should take some consideration for the best viewing experience with your readers online. While there are more formats than this topic covers, I wanted to talk about this in easy-speak. Keeping this limited to the file formats you’ll probably need to use, let’s explain each.
A JPG (or JPEG) is a file extension for a lossy graphics file. JPEG actually stands for Joint Photographic Experts Group (the peeps that named it). Unless you’re shooting in RAW, you’re probably downloading JPG files from your camera after you shoot all of your awesome blog images.
A PNG is a raster graphics file format that supports lossless data compression. PNG was created as an improved, non-patented replacement for Graphics Interchange Format (GIF), and is the most used lossless image compression format on the Internet. (Wikipedia)
The image on the right is of better quality, but may not be worth the file size increase for your blog photos.
So What is a GIF Then?
So, a GIF format would be used for simple graphics like a shape or a logo, items that are solid in color. If you’ve ever loaded some graphics you made in Photoshop to your blog, as a JPG file they probably have some weird graininess around the edges of your file.
The same goes for photos saved as GIF files. GIFS only show 256 colors (what your monitor sees) so your beautiful photograph with millions of colors looks as if there are gradients on it.
Here you can see the difference between a JPG (left) and a GIF (right).
PNG vs. GIF
Now that PNG was created as an improved replacement for GIFS, and is even more lossless in compression, it’s a bit more common to use it. They support more colors than a GIF. When you have a gorgeous graphic that needs a transparent background, use the PNG!
Another reason to use PNG is if your graphic has a gradient from light to dark red. You’ll see the blocks of gradient more predominant if you save those as a JPG. So go for the PNG in that case.
To further complicate, there are two types of PNGs.
PNG-8 – which is just 256 colors like a GIF file.
PNG-24 – which is very similar to JPG and has over 16 million colors.
In some cases, a PNG-24 works great for photos online, like when loading to Facebook. Don’t ask. I can never figure out why Facebook compresses the hell out of images. Bleh.
With this clipart piece. Saving as a transparent PNG on the left looks much better than a .JPG on the right.
Should I Save My Blog Images as JPG or PNG?
And, since you’re asking how you should save your blog images, let’s recap:
JPEG – Photos and Graphics when you want the file size to be small. We’re not talking about print use, but online. You’ll lose a bit of quality when saving for web as a JPG, but it’s probably what you’re saving your high resolution versions of these images from your camera or after editing in Photoshop
PNG – Graphic (and sometimes photos) If you’re saving these from the save for web feature in Photoshop, you’ll probably notice the file size larger than a JPG. It’s really a lot higher quality, and works great for items that need to be transparent in the back.
Again, you may not even notice a difference. So when in doubt, save as a JPG to reduce the file size.
Save for Web
Utilize the Save for Web feature in Photoshop when saving our blog images. It allows you to tweak the quality to get the size reasonable for load times. And, doesn’t hurt your SEO ranking. Check my post from the other day about this.
To find the Save for Web feature: File/Export/Save for Web.
Take careful consideration about the load time of your images on your blog to your readers first. You don’t want to be penalized by Google, and you certainly don’t want your visitors leaving your website because it’s taking too long to load. Let me know if you have any questions!