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.
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!
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.
Mary S. says
Hi Louise ,
Thanks for the detailed post! I think everybody should use some sort of lossy algorithm based compression on their images regardless of which type they use. As you said, choosing the right file type (JPG, PNG, GIF…etc) can also save a lot of file size=bandwdith = user experience.
I usually run my site images through imageresize.org/compress-images
If I am uploading to my blog there are a lot of WP plugin which I can use.
I wanted to add one more resource for anyone who wants to convert between these image file types. freeconvert.com/image-converter. Just choose any of the target image formats and voilà, you’ve got your images in a new format. Hope this is helpful.
As always love the effort you put into all your posts.
Louise Myers says
Thanks for the tips, Mary!
Lori English says
This is a great article and just what I was looking for. It really explains the differnces in posting with Jpeg and file types.
Lori English, LSW
Louise Myers says
Awesome, Lori, I’m so glad it was helpful!
This is really useful infographics, you have explained thoroughly about the image file types.
Photoshop is my favorite image editing program.
Louise Myers says
Photoshop is great!
Have this guys stolen your post?
Louise Myers says
Thanks for the heads up, Maria. Infographics creators tend to contact multiple sites to ask them to post their graphics with a link back. So it was actually WhoIsHostingThis’s graphic… but I appreciate your concern!
Here’s a nice online tool to compress images for web: autocompress.com
Louise Myers says
Thanks for the tip!