It’s nearly impossible to design a website without involving images. Image is the element you need to make the website you create looks appealing to visitors. Even so, image also has major negative impact. It can make your website slower to load. Elementor has some built-in features you can make use of to optimize images on your website. In this post, we will dive more into them.
First thing fist, to figure out how good your website is in term of performance, you can use tools like Google PageSpeed Insights and GTmetrix. These are free tools widely used by web developers and designers to test the performance of the websites they created. Google PageSpeed Insights and GTmetrix (and the similar tools) will provide several metrics related to your website performance such as Largest Contentful Paint (LCP), First Contentful Paint (FCP), and Time to First Byte (TTFB), and so on. While your web hosting has a big role in determining these metrics, you can optimize your site content to make the metrics better.
Pre-Optimization: Use the Right Image Format
Planning is a crucial part in web creation. If you want to create a fast website, one of the things you need to plan before you start the web creation process is to choose the image format. There are three image formats you can use on your website:
- JPEG
- PNG
- WebP
WebP is the image format recommended the most when you want to create a faster website. The format has smallest file size than other formats — with the same image quality (learn more). So, before uploading an image to your website, you can convert it to WebP first. Most image editing tools, including Photoshop, have the ability to save an image into WebP format.
What if the images are already uploaded? You can install the Performance Lab plugin. It will automatically convert images on your WordPress website, including the ones already uploaded, into WebP. Some premium WordPress hosting services, including Kinsta, have a built-in feature to automatically convert images into WebP without needing to install an extra plugin.
3 Ways to Optimize Images in Elementor
1. Use Image Size According to Image Context
Elementor has several widgets aimed at adding images to your website. There is the Image widget to add a single image, the Gallery widget to add image gallery, the Featured Image widget to display the featured image of a blog post, and so on. In addition, there are also several other widgets that contain image elements. For instance, the Posts widget that contains post thumbnails.
For every widget that contains image element, Elementor offers built-in setting option to set the image size. You can find the setting option under the Content tab on the settings panel.
You can find the setting option above on the following widgets:
- Image
- Posts
- Portfolio
- Gallery
- Basic Gallery
- Hotspot
- Call to Action
- Image Carousel
- Featured Image
You can use the built-in setting above to set the image size according to the image context. For instance, for post thumbnails (on the Posts widget), you can use a smaller size as thumbnails typically have a smaller dimension. This setting (image size) is crucial when it comes to site optimization as it will be used by your server to serve the size of the image according to the request.
If you set the image size to Large for instance, your server will serve the image in a large size (1024×1024). The larger the size, the longer it takes to load the image as well.
The built-in setting to set image size is especially useful for dynamic images whereby you can use different sizes for the same image on different image contexts. For instance, you can use different size for featured image on blog post and thumbnail on post feed.
2. Enable Lazy Load on Background Images
Did you know that Elementor has a built-in feature to lazy load background images?
Lazy load is a technique to load content only in the viewport (the visible part of the page). In other words, the entire content on the page is not loaded at the same time when the page is visited via a browser. Instead, the content is loaded per viewport. This technique can help a page to load faster as the content is loaded part by part according to the visible area.
Enabling lazy load on background images can improve the LCP score of your website as background images usually have larger file size than other image types on a website due to their large dimensions.
To enable lazy load on background images in Elementor, go to Elementor -> Settings on your WordPress dashboard. On the Settings page, open the Features tab and scroll down to the Lazy Load Background Images option and enable/activate it.
When you enable this option, Elementor will lazy load all background images on your website, except the first image on each page. In other words, images on the hero sections will not be lazy loaded.
Please note that the Elementor lazy load feature is currently still in Alpha phase so it might still unstable.
3. Preload Static Images
Another technique you can apply to improve the LCP score is by preloading static images. Especially images that have large size. You can use this technique as an alternative to lazy load above.
What is preload?
Preload is an HTML attribute that enables a website to provide a hint to web browsers about how the media should be loaded. When you apply this attribute to images, your website will notify your visitors’ web browser the images should be loaded first before the other content on the page is loaded. As a result, your website will load faster as images usually takes longer to load.
There are several ways to preload images in WordPress, depending on the editor/builder you use. In Elementor, you can preload images using the Custom Code feature. First, go to Elementor -> Custom Code on your WordPress dashboard. Add a new custom code by clicking the ADD NEW button.
Give your custom code a name and set the location to <head>. Leave the priority to default (1 ). Paste the following line to the editor field and click the Publish button.
<link rel="preload" href="your-image-url" as="image">
Replace your-image-url with the actual URL of the image you want to preload. To preload multiple images, you can copy and paste the above code into new lines and tailor the image URL.
The Bottom Line
Elementor is the most popular page builder plugin for WordPress that has tons of features, including built-in features to optimize images. You can make use of these features to optimize images on your website without installing an extra plugin. By optimizing images, you can improve some metrics related to site performance, especially LCP. As a result, your website will be faster to load.
It’s crucial to note that optimizing a site performance as a whole should be start from choosing a proper hosting. You can’t expect more on performance if you use a traditional shared hosting (cPanel-based). Instead, use at least a managed WordPress hosting. The following hosting services are highly recommended in terms of performance:
- Kinsta
- Rocket.net
- Cloudways
If you think the prices offered by the above services are too expensive, you can try some more affordable services like SiteGround and DreamPress. Or you can try the official Elementor Hosting service which starts from $15 per month.
