Crisp images without sacrificing loading speed? You're living the dream.
Two of the most common file types for images on websites are .png and .jpg. So which one should you use?
The quick answer is: .jpg, unless you have a website background color that's not white.
Okay, but why?
In general, jpg images have a smaller file size. I just made two 3D book cover images for a client's site. They're identically sized at 841x1190. The jpg is 276k and the png is 904k. In other words, the png is three times larger.
We want your site to load lickety-split. So The smaller file size is crucial.
So, then, why do pngs even exist, you might ask? Two reasons. First, a png can handle a transparent background. If you float a png over a colored background, it will look great. If you want to try to match an irregularly bordered jpg to a website background, it's tricky and it will probably look poor when you're done.
The second reason is clarity. Png is the crisper file type. You know when you're scrolling through Facebook and you see hazy parts of an image? That's poor jpg compression.
I used to use png files all the time because I was overly worried about that. But if you're exporting jpgs from a good piece of software (like Photoshop or even PicMonkey) you can control the quality of your jpg. The highest quality jpg file will look great and will always be smaller than a png.
You have a need for speed, trust me. There's nothing that looks more amateurish than a website which makes its readers wait. Don't be that author. There is data to show that slow-loading websites have higher bounce rates. We don't want that.
How low can we go?
If you're worried about loading time, you can use a sneaky tool called JPGmini. It's a piece of software that, through voodoo I can't explain to you because I don't know how it works, makes the file size of a high quality jpg even smaller. Give it a try! And keep those loading times fast.
EDIT TO ADD: Now there’s a tool called Squoosh! It also makes photos smaller, and it’s free at the time of this writing. Squoosh offers even more control over quality factors than JPGmini. It’s quite amazing.