Image File Types: How to Win at JPG, GIF and PNG

Want your images to look better, but your website to load faster?

You must master image file types!

Learn why and when to use JPG, GIF, and PNG files.

Use the wrong file type and you may have:

• Blurry images that make you look like an amateur.
• A slow-loading web page that has viewers clicking away.
• A logo in an ugly box over your carefully-crafted background.

Big file sizes slow your web site load time. Statistics prove that this impacts your bottom line. But you can’t just compress all your files; you also want to maintain image quality.

Read on to learn what to do!

Which File Type Should I Use on My Website?

There are several types of images you can upload to your website. Here’s a summary of which is best for your purpose:

• Use JPG for website graphics that have many shades of colors and need to load fast.
• Use GIF for animations.
• Use PNG-8 for images with a few flat tones when you want a small file size.
• Use PNG-24 when you want top quality and size isn’t an issue.

Read on to learn how to save them and compress them so your site can load at its fastest speed.

NOTE: Links below may be affiliate links, which means that if you make a purchase, I may earn a referral fee. Thanks for your support of my blog and the free info I provide!

How to Save Image File Types

Most image editors will give you at least a choice of saving as JPG or PNG – or they may define it as small or large file types.

If not specified, PNG is the large file type (PNG-24). These are fine (and often preferable) to save for social media, but will slow down your website loading. You might want to save images both ways. Or you could save the large file and use an online image optimizer before uploading to your website. One good option: compressor.io.

PNG-24 is the optimal format to save for Facebook if you want top quality. JPGs look pretty bad on Facebook. Read more on optimizing photos for Facebook.

Be sure to check out PNG-8 though! For images with flat tones, it can be the winner.

The file types infographic at the end of this article was originally a 1.8MB JPG that I re-saved as a PNG-8 in Photoshop. Now it’s 459KB with no discernible loss of quality – because it consists of a few flat (not shaded) colors.

Most online tools won’t offer PNG-8, but you’ll definitely find it in Photoshop.

How to Save Images in PicMonkey

 

PicMonkey is the top online photo editor. To save your PicMonkey creations, you need a PicMonkey membership.

To sign up, either start a 7-day free trial or upgrade to PicMonkey Premium.

Once you have an account, you can click Export in the top toolbar, then save to your computer from the Export page.

Clicking Save instead will save your image to your Hub, not your computer.

You can do the following things on the Export screen:

• Change your file name. Give your image file a new name by typing it in the File name box.
• Choose your file type. The box to the right of the file name box lets you choose between .png and .jpg. Click the arrow in the box to change your file type.
• Specify quality level. If you’re saving your image as a .jpg, you’ll have three options under “Quality,” which offer different balances between resolution and file size. Click an option to see its description, and choose the one that best suits your needs.
• Change your image dimensions. If you’d like your image to be a specific size, put the width and height (in pixels) in the boxes under Dimensions. You can also click the caret in the box to the right of the dimensions boxes to adjust your image using percentages instead of pixels.
• Note your file size. The file size of your image displays above the green Save to my computer button. If you change your quality level or dimensions, the file size display will adjust accordingly.

The image dimensions feature is so handy! Save files for your website at the exact dimension you want them to appear on your site. That in itself can save you a load of bandwidth.

If you’re ready to save your image, click the green Export to computer button. If you’d like to continue editing, click Cancel or the X in the upper-right hand corner.

Then you can go back and export your original image in a larger file size for social media.

Check out the optimal social media sizes here.

Try PicMonkey here.

How to Save Images in Photoshop

 

Online photo editors don’t give you a ton of control over file size when saving your images. For that you need Photoshop!

• You can use the optimization features in the Save For Web & Devices dialog box to preview optimized images in different file formats, and with different file attributes.
• You can view multiple versions of an image simultaneously and modify optimization settings as you preview the image. In this way, you can select the best combination of settings for your needs.
• You can also specify transparency and matting, select options to control dithering, and resize the image to specified pixel dimensions or percentage of the original size.

This gives you optimum control over both file size and how your image appears online.

If you don’t have Photoshop – it’s not as expensive as you think! You get Photoshop CC plus Lightroom for desktop, mobile, and web for only $9.99/mo. You can pay the year in advance, or over 12 months!

Click here to try Photoshop.

Optimize Images Message from Google

This rule triggers when PageSpeed Insights detects that the images on the page can be optimized to reduce their file size without significantly impacting their visual quality.

For GIF and PNG, Google says that PNG achieves better compression ratio with better visual quality.

• Always convert GIF to PNG unless the original is animated or tiny (less than a few hundred bytes).
• For both GIF and PNG, remove alpha channel if all of the pixels are opaque.

As I mentioned above, JPGs give the best results for images with shaded tones.

Optimizing images can often yield some of the largest byte savings and performance improvements! Get all the suggestions from Google here.

Image File Types Conclusion

We reviewed when to use JPG, GIF, PNG-8, and PNG-24.

We covered how to save your image file types in PicMonkey and Photoshop.

And I gave you a hint of how much Google loves it when you optimize your image file sizes.

So do it!

Let me know in a comment: Which method will you use?

Be sure to pin the infographic from WhoIsHostingThis so you can always pick the right image file types for your photos and graphics.