We all know images maketh the post. Yes, of course content is key but just like that plate of delicious sizzling scrumptiousness we eat with our eyes first.
Pinnable images, branded images, viral images, images that make viewers come over all weak at the knees with that most potent of unions – desire and envy – are what every blogger strives to create.
But once you have that hot image in your hands, what do you save it as? JPEG? PNG? What’s the difference and does it really matter?
JPEG vs PNG – What’s the Difference?
JPEG and PNG are types of formats you can store images in. There are a number of other formats, one you’re most likely to be familiar with is the GIF.
JPEG stands for Joint Photographic Experts Group, named after the group who created this file format for professional photographers.
PNG stands for Portable Network Graphics and was developed as an (open) alternative to GIF.
The two formats compress images in different ways.
JPEG uses lossy compression meaning when images are made smaller some quality is lost as data not readily seen by the human eye is removed. The change is permanent so making a jpeg from a jpeg from a jpeg results in ever-increasing degradation of the image. That’s because the minor details have already been eliminated so more visible elements start being affected.
PNG uses lossless compression so the image is made smaller but with no reduction in its quality.
Each format has its strengths and weaknesses and its up to you to apply them effectively to your blog images.
Which Format Should I Use For My Blog Images?
The answer to that is, it depends.
It depends on what elements you have in your image, whether there’s animation or transparency and even, if you’re getting really technical, the browser.
Let’s look at the basics:
- JPEG has a huge palette of colours and is ideal for blog images based on photos and gradients. JPEG doesn’t deal with transparency. Saving a JPEG from a JPEG can degrade the quality of the image.
- PNG is a superior format for images requiring crisp lines such as logos or pictures with text as well as transparency. PNG files are bigger than JPEGs.
- GIF is best for animation. It has a limited palette of colours.
There are other formats that aren’t accommodated on some browsers so we’ll stick with the main ones for now.
Does Choosing JPEG or PNG Impact My Blog?
I’m afraid it does.
‘Image optimization’ tends to be applied in a couple of ways. Images can be optimized for SEO so they have the best chance of being found on the internet.
What we are talking about here is optimizing images to ensure they aren’t detrimental to your blog’s page speed.
And why does it matter if your page speed slows down?
Because ONE, you’ll lose readers.
How Can I Optimize My Blog Images?
The size of your blog images is a critical part of your optimization. That’s where choosing the right format comes into play.
Your aim is to create the smallest possible image file while retaining a good level of quality. In most instances JPEGs will be the most appropriate choice. If you’re wanting to display fine details, images with transparency or crisp lines, PNG will be your go to. GIFs the pro when it comes to animations.
In the images below, the picture on the left is a PNG (64.3kb) the one on the right is a JPEG (16.2kb) and the third image at the bottom is the 12th JPEG copied from an original JPEG (15.9kb). I made several JPEG copies so you could see the degraded quality.
You can see that the PNG displays the graphic and text more clearly but the lizards in the first two images are pretty similar.
Another key task to optimize your blog images is sizing them as close as possible to how they’ll be displayed. When you have an image that is a different size to what it will be displayed as, the browser needs to scale them, an unnecessary and costly action.
How Can I Test the Load Time For My Blog?
There are a number of free tools available for you to test whether your blog’s a hare or a tortoise.
It’s good practice to test your blog with a few of the tools. They all use different algorithms and you’ll get a more rounded picture that way.
Some I’ve used are:
Your To Dos
What you need to do now is baseline your blog’s page speed. That will give you your starting point.
How did you go? On Google PageSpeed Insights, a score of 85 or above means your blog is performing well.
If you need to, make some adjustments to the image assets you already have loaded onto your site. Test your site again.
Note that while your images while a significant part of why your page speed may be lower than desired they aren’t the only factor – clunky themes, chunky css, plugin bloat, no caching, a maze of redirects and so on can drag your load time down.
Start with the images – just be prepared that if your speed is still a worry, you’ll need to dig a bit deeper.
Knowledge is power, even if it’s the knowledge that your blog is slower than that guy who was driving in front of me this morning. And he was really freaking slow.
– – – – –
For more tips like this and access to an exclusive subscribers bloggy resource library (which includes an Image Optimization Checklist) click on this link (I’m trying to mind-meld with you from the South Pacific):
Image of raspberries CC0 no attrib by Ejaugsburg via Pixabay
Image of woman with camera CC0 no attrib by Stocksnap via Pixabay
I’ve mutilated the above two somewhat.
The other pics are mine thanks love.