A few years ago, I brought on a new client with an existing WordPress website. They were looking for content updates, performance improvements, and monthly website care support.
When I audited their home page, I learned it took over 30 seconds for the page to display.
And I quickly discovered one of the reasons why: photo images on the home page were saved in PNG format.
Which isn’t optimized for displaying photographs.
Home page images were two to five times larger than they needed to be for good quality.
And definitely not good for web performance.
What I Learned
When I audited other pages on the site, I discovered it was consistent: images were named with a file extension of PNG rather than JPG (WebP format was not natively supported in WordPress at that time).
I asked my client if they knew how the images were created, but they had no history to share with me.
An agency created their website, and they no longer had contact with anyone at the agency.
Which meant I needed to do some research.
Based on my experience with getting images from clients, I knew I needed to confirm whether the PNG files were indeed PNG files.
Or if someone had simply renamed the file extension to PNG.
Which is the equivalent of labeling sugar as salt in your kitchen.
And only discovering it after you’ve added two teaspoons of salt in your coffee in the morning.
Probably not the experience you want from drinking a cup of coffee in the morning.
How to Check the File Format of an Image File
While there are many libraries and apps (like fileor ImageMagick) you can use to uncover the format of an image file, the method I prefer is an application almost everyone has on their digital device: a text editor.
Open the file in your text editor.
Check the first line.
If the first line contains %PNG, the file is a PNG file. If it has JFIF, it’s a JPG file.
And if the file has WEBPVP8 in the first line, it’s a WEBP file.
Close the file in your text editor (make sure you don’t save it).
Wrapping Up
When you want to check the format of an image file, the method I recommend is to open the file in a text editor to confirm the format.
If you’re curious about my client’s images: I confirmed all photographs were in PNG file format. After several discussions with my client, I was able to find the original image files.
I resized, optimized, and renamed the files from names like DSC_08722.png to more meaningful file names. And managed to get their home page to display in less than 3 seconds.
My client was happy with the results!
Excellent post, dear Deborah!
I also enjoy your photos of the week, thanks for all of them.
Alejandro