If you’re browser managed to load this behemoth of a a bad practice blog then send you ISP a thank you card. You can zoom out on this page and see why. (Try it!) What you’re about to see is a master class in how not to load images on a page.
You’ve all heard the old saying that a picture says 1000 words. But as an SEO and content editor you have to think beyond that. If you’re not careful, it can hold you’re your content back by slowing down pages or knock out your design, both of these can mean less organic traffic, a poor user experience and reduced revenue. With that in mind it’s important to know how and when to use the myriad of image types.
JPEG format is a method of lossy compression for digital images. The simple way to think about this is digital photographs. Loss compression is a type of processing (data encoding) that makes closely resembles the image before the image is process. Two important things to note though, it degrades every time you save it so always keep a copy of your original jpeg. Secondly, JPEGs can’t use transparent backgrounds.
Use it when you have photographs of people or the real world, natural photos.
Portable Network Graphics or PNGs were created as a response to GIFs. In 1987. Company called CompuServe owned the rights to the GIF format and charged a license fee for its use. PNGs are one of the two most popular web formats on the web, they have superior compression so they don’t bloat your page load and can support transparency. However, when you use a natural photograph as a PNG that has vibrant colours in it the file size increases exponentially so use a jpeg instead.
Use it when you have a line drawing or a natural photo heavily edited with text. The image on the thumbnail of the drummer is
SVG stands for scalable vector graphics. Two things to know about this you can code this type image in the browser and it can scale up infinitely. SVG is also great for animations.
It’s perfect for drawn images and is often used in logos in navigations, infographics and complex embedded images.
Bonus tip: If you’ve been on the homepage of this site you’ll have noticed the icons. These are SVGs called from a free version of font-awesome, a popular font and icon service. Font-awesome allows access to a variety of pre-designed fonts & icons that are known as glyphs that you can size and colour with CSS. They can save you hours of design time.
Tiff is used in the publishing industry and print. They are usually enormous files and take forever to load on a web page.
In nearly 8 years of working on the web I have never seen a case for using a tiff over jpegs for natural photos or PNGs for drawings and still animations.
Let’s be honest, everyone’s favourite format, the humble gif, now freed from the shackles of CompuServe’s license is open for all to use. But I’ve got some bad news. They load very slowly when they are animated.
This 2MB Gif animation can take as much as 9 seconds to load on a slower mobile phone. Considering that the average smart phone costs 200 USD and 3g is widely in use. This could cost your users time and your company money.
For animations, my advice is don’t. You can use better video formats that achieve the same thing. It is called ffmpeg and is recommended by Google in Lighthouse reports and page speed reports. You can download software , use a range of online converters or use the command line (Homebrew FFMPEG formula on Mac) to do the conversion.
Now that you know the type of image and the use case. You are probably wondering what size image should I use.
The short answer is, it depends.
For example, this site uses a few different image sizes to match different layouts. Before we jump in you need to know that images are measured width multiplied by length in pixels.
You can also measure the image sizes yourself by using the your browsers developer tools in Chrome or Firefox.
These are the maximum sizes. Thanks to responsive design they resize as we need them. But is that the best solution?
No, for one simple reason.
If an image that is 1440px wide is scaled down the image file size does not reduce with it. That’s why I’ve got some cool features on WordPress to help with image compression. As a content editor all you need to do is input images based on the specifications above. You are playing your part in ensuring you have the fastest site possible. And fast sites have higher rankings and achieve their goals.