Let website images load at high speed: The secret of AnQiCMS's lazy loading of images and automatic conversion to WebP

Today, with the increasing richness of digital content, the quality and loading speed of website images directly affect user experience, search engine rankings, and the overall conversion rate of the website.Imagine that if an image on a website loads slowly, visitors are likely to leave before the content is fully displayed.The good news is that AnQiCMS provides us with a set of efficient solutions. Through the two functions of image lazy loading and WebP automatic conversion, the visual content of the website can have lightning-fast loading speed while ensuring quality.

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

Load images only within the visible area of the current screen, and delay the loading of images outside the screen 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,archiveDetailLabels can be displayed to show article, product, or single-page content, and the label'sContentimages embedded in the field can be configured for lazy loading through a simple attribute. You just need to callContent字段时，添加lazy="data-src"这样的参数。AnQiCMS会智能地将内容中所有图片标签的srcattribute in the content withdata-src，这是业界常用的懒加载标记方式。

For example, assume your template has onearchiveContentVariables hold the main content of the article, and you want the images to be lazy-loaded. You can write it like this:

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

This line of code prepares the lazy loading structure for images in AnQiCMS. Next, you still need to introduce a lightweight JavaScript lazy loading library (such aslazysizes.js），and ensure that it can be recognizeddata-srcProperty.When the user browses the page, only the images that enter the visible area will be loaded and displayed by JavaScript, which greatly improves the speed of the first screen load, saves bandwidth, and allows visitors to see the精彩 content first, without having to wait.

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., with the same image quality, sometimes even up to 25%-35% smaller.This means faster loading speed, less bandwidth consumption, and better search engine optimization performance.

Enabling this feature in AnQiCMS is very simple:

All you need to do is enter:the background management interface，found“Global Settings”under'Content Settings'. Here, you will see a feature named“Whether to start the Webp image format”The options. Set it to“Enable”, and then save the settings.

Once enabled, allnewly uploaded JPG, PNG, and other image formats，AnQiCMS will automatically convert it to WebP format for storage and display in the background.The entire conversion process is automated, requiring no manual operation, 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.

Then, what about the images that were uploaded before the WebP conversion was enabled? AnQiCMS has also considered this point. In'Content Settings'pages, it usually provides a“WebP conversion tool”（or a similar name），you can use it to batch automatically convert the existing images on the entire site to WebP format, making your old content also come alive and enjoy the performance benefits brought by WebP.

Two optimizations, a powerful combination: Enhance overall website performance

When the lazy loading of images and the automatic conversion to WebP are combined, they can bring a qualitative leap to the website.Lazy loading ensures the lightness of the page's initial rendering, while WebP guarantees 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 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.Cooperating with its built-in automatic compression for large images (you can set the image to automatically compress to a specified width, such as 800 pixels, to further reduce the volume), as well as support for adaptive templates, AnQiCMS ensures that users can enjoy a **visual and loading experience** regardless of the device they use.

With these fine-tuned 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.

Common Questions (FAQ)

1. Do I need to do anything extra after enabling image lazy loading?Yes, AnQiCMS supportslazy="data-src"The attribute merely prepares the structure required for lazy loading of image tags at the template level. You still need to include a compatible library on the website front end in English.data-srcProperties JavaScript lazy loading library, for examplelazysizes.js. This library will be responsible for detecting whether the image has entered the visible area and will load it at the appropriate time,data-srctosrcProperty, thus triggering the actual loading of the image.

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 formats生效，将其自动转换为WebP格式。For images uploaded before the feature is enabled, they will still maintain their original format.“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 converting to WebP format affect image quality or compatibility?WebP format usually provides smaller file size at the same quality, with better compression efficiency than traditional JPEG and PNG.AnQiCMS in the conversion process will try to maintain the quality of the image.As for compatibility, modern mainstream browsers (such as Chrome, Firefox, Edge, Safari, etc.) all widely support the WebP format.For a small number of older browsers that do not support WebP, AnQiCMS usually built-in a fallback solution, or you can make a judgment through the front-end code to provide the original image format as an alternative.