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.
Blog Sections Custom Modules
https://developers.hubspot.com/docs/cms/building-blocks/modules/using-modules-in-templatesHas to be in the theme to use that specific path.
Relative Path
../modules/Test Module
We have serverless and Lambda functions on Enterprise, that allows you to do serverside calls.
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.
Wordpress can also be set to programmatically resize or crop images on this site so I just need to ensure the maximums are loaded in the media folder.
What you're about to see is not best practice. I have intentionally left images unoptimised. Which will restrict the value of this page and site. I'm ok with that. But If I was an. agency or company I can assure you. I wouldn't be ok with that. The enormous images below are not optimised. One has a CSS class added to it to reduce its size to fit the window.
The second image (evidently) does not
As far as Google is concerned, both of these images are the same size. The other drawback is that it will trigger a user experience error in Google Search Console.
Despite the class being applied, CSS does not optimise and resize the image. Right click on it, download it and open it up and you’ll see the difference. So how do you fix it on a Wordpress site?
Resize the image so that it fits the screen
SMUSH is an image API plugin that compresses images further but it also creates new formats of your images and helps load the correct image for the correct browser, if an image is not supported, it falls back to the next available image and manages all of the difficult page load tasks.
These new formats are called WEBP and JPG2000. They have significantly reduced file sizes and load at lightening speed. That’s good for content editors, search engine optimisers, system administrators, developers and most importantly the users.
You’ve learned about the various types of image file formats, what they are and how and when to use them.
You’ve learned why incorrectly size images impact developers, editors and most importantly the user.
You’ve learned about image compression, new age formats, responsive design and how to make sure you don’t trigger any image optimisation warnings in Googles Page Speed Insights.