How to implement lazy loading of images and automatically convert them to WebP format to optimize display performance in AnQi CMS?

Load website images quickly: The secret of AnQiCMS's lazy loading of images and automatic conversion to WebP

On a day when digital content is increasingly abundant, the quality and loading speed of website images directly affect user experience, search engine rankings, and even the overall conversion rate of the website.Imagine if a website's images load slowly, visitors are likely to leave before the content is fully displayed.The good news is that AnQiCMS has provided us with a set of efficient solutions, through features such as lazy loading of images and automatic conversion to WebP, which allow the visual content of the website to have lightning-fast loading speeds while ensuring quality.

Say goodbye to long waiting: The magic of lazy loading images

We all know that when there are a lot of images on a webpage, if all the images are loaded at once, it will significantly slow down the page loading speed.The image lazy loading (Lazy Load) technology is born to solve this problem.The core idea is very simple:Only load images within the visible area of the screen, and delay loading images outside the content until the user scrolls near them.

AnQiCMS provides very convenient support for lazy loading of images at the content template level. When you use it in the content template,archiveDetailTags to display articles, products, or single-page content, the tag'sContentfield embedded images can be configured for lazy loading with a simple attribute. You just need to callContentWhen adding a fieldlazy="data-src"such parameters. AnQiCMS will intelligently add all image tags in the contentsrcattribute is replaced withdata-srcThis is a commonly used lazy loading tag in the industry.

For example, suppose there is one in your templatearchiveContentThe variable carries the main content of the article, and you want to implement lazy loading for the images in it, you can write it like this:

<div>
    {%- archiveDetail archiveContent with name="Content" lazy="data-src" %}
    {{archiveContent|safe}}
</div>

By this line of code, AnQiCMS has prepared the lazy loading structure for images. Next, you still need to introduce a lightweight JavaScript lazy loading library (such aslazysizes.jsMake sure it can recognizedata-srcProperty. When the user browses the page, only the images that enter the visible area will be loaded and displayed by JavaScript, thereby greatly improving the speed of the first screen load, saving bandwidth, and allowing visitors to see the精彩 content first without waiting.

Smaller, faster, clearer: automatic conversion of WebP image format

In addition to lazy loading, AnQiCMS also brings us another powerful image optimization feature:Automatically convert uploaded images to WebP format.WebP is a modern image format developed by Google, which can be smaller than traditional formats such as JPEG, PNG, etc. in the same image quality, sometimes even up to 25%-35% smaller in volume.This means faster loading speed, less bandwidth consumption, and better search engine optimization performance.

It is very simple to enable this feature in AnQiCMS:

You just need to enterBackground management interface, find“Global Settings”below"Content Settings". Here, you will see an option namedWhether to enable Webp image format. Set it to“Enable”and then save the settings.

Once enabled, allNewly uploaded JPG, PNG, and other image formatsComma AnQiCMS will automatically convert it to WebP format for storage and display in the background.The entire conversion process is automated, no manual operation is required, which greatly reduces the workload of content operators.This is like giving your image a high-efficiency slimming, which does not affect the visual quality and can greatly reduce the burden on the website.

What about those images that were uploaded before enabling the WebP conversion? AnQiCMS also considered this point. In"Content Settings"The page usually provides a“WebP conversion tool”(or a similar name), you can use it to batch automatically convert all the existing images on the site to WebP format, allowing your old content to be reborn and enjoy the performance benefits brought by WebP.

Two optimizations, strong cooperation: improve the overall performance of the website

When image lazy loading and automatic WebP conversion are used together, they can bring a qualitative leap to the website.Lazy loading ensures the lightness of the page's initial rendering, while WebP ensures the loading efficiency of each image.This dual optimization mechanism not only greatly improves the loading speed of the website, reduces the traffic consumption of the server and the user's end, but also brings a smooth user experience and a friendly search engine crawling environment.

AnQiCMS as a high-performance, SEO-friendly content management system, its Go language's high-concurrency features provide a solid foundation for these optimizations.With its built-in automatic large image compression feature (you can set the image to automatically compress to a specified width, such as 800 pixels, to further reduce the volume), and support for adaptive templates, AnQiCMS ensures that users can enjoy** visual and loading experience regardless of the device they access.

Through these meticulous image optimization features, AnQiCMS truly helps us achieve a perfect balance between content richness and website performance, allowing our website to stand out in the fierce internet competition.

Frequently Asked Questions (FAQ)

1. After enabling image lazy loading, do I need to do anything else?Yes, AnQiCMS'lazy="data-src"The attribute only prepares the structure required for lazy loading of image tags on the template level. You also need to introduce a compatible one on the website front-end.data-srcA JavaScript lazy loading library for properties, such aslazysizes.js. This library will be responsible for detecting whether images enter the visible area and at the appropriate time todata-srcthe value tosrcAttribute, thus triggering the actual loading of the image.

2. After the WebP image format conversion feature is turned on, will all the images on my website automatically become WebP?By default, the WebP conversion feature will only target youNewly uploaded JPG, PNG, and other image formatsActivated, it will be automatically converted to WebP format. Images uploaded before the feature was enabled will remain in their original format.However, you can find and use the provided on the "Content Settings" page“WebP conversion tool”To batch convert the existing images on the website, so that they can also enjoy the optimization effects of WebP.

3. Will automatic conversion to WebP format affect image quality or compatibility?The WebP format usually provides smaller file sizes at the same quality, with better compression efficiency than traditional JPEG and PNG.AnQiCMS converts images while trying to maintain image quality.Regarding compatibility, modern mainstream browsers (such as Chrome, Firefox, Edge, Safari, etc.) all widely support the WebP format.For a very few browsers that do not support WebP, AnQiCMS usually has built-in fallback solutions, or you can judge through front-end code to provide original format images as alternatives.