Choosing the Best Image File Type and Format
For more detailed show notes, visit https://www.skyrocketradio.com/blog/c....
We’re visual by nature and visually driven. We perceive pictures faster than words, so images are scanned first, before the text. It’s important to include images on your station website. Unfortunately, one of the most proven ways to slow down your website (especially on mobile) is to use images that are not sized and compressed properly for online use. This can vary depending on the file format.
Images on the web come in many file formats, such as JPEGs, GIFs, PNGs, and many others. Understanding the basics will give you confidence in being able to decide what format is best in every situation.
Why Do Image File Formats Matter?
Every graphic you see online is an image file. Depending on the file type, they render in different ways and have different file sizes. Each type is intended for a specific use and matters when it comes to appearance, performance, and scalability.
Appearance: Some image formats include more detail and are of higher quality than others.
Performance: Some image files take up more space than others which will affect your site load time.
Scalability: When you stretch or shrink an image too much, its quality will suffer. How much leeway you have depends on the image format you use. This affects your site’s ability to look good on both large and small screens.
The key is to incorporate all three of these and include files on your station website that are small in file size for fast-loading (performance) and without a loss of quality (appearance and scalability). Your goal should always be to have a superlight website that loads quickly on any device and looks amazing at the same time.
So, which format do you choose for daily use?
Choosing the best image file format depends on the type of image and your end goal.
Let’s start at the top of your site with your station logo. You will probably have a background in your header that you want to show through the logo, so the logo has to be transparent. That rules out JPEG because JPEG images cannot be transparent. That leaves PNG, GIF, and SVG. A GIF file might work if your logo only has a few colors but it will not be as sharp as the other options. That leaves you with PNG and SVG. If your content management system allows it, choose SVG because the small file size will load much quicker. If it doesn’t support SVG, choose PNG.
Featured image photos that accompany blog/news posts should use a JPEG file. For now, do not use WebP images as “featured images” because in our testing we’ve found those not able to be sharable within Facebook and other social media channels. When you share your news article to Facebook, you’ll want the image to accompany it. If your featured image is in the WebP format, it will not appear on the Facebook share. I’m sure this will change in the near future though.
Banner ads, event images, contest images all fall under needing JPEG also but play around with other formats.
Conclusion
You have a lot of options when it comes to what types of images you can use on your website. Pick whichever format enables you to display high-quality images without slowing down your site significantly. Before you upload every image to your station website, ensure the image is sized for the specific application and optimized to its smallest file size without degrading quality.
Optimizing photos for your site isn’t always easy and will likely take some experimentation and testing. But once you get your image optimization process down, your website’s speed will improve as well as your overall user experience.