So Outside Technology Security CMS
AnQiCMS
Online Demonstration

How to correctly display and load images on the front-end page after the website enables Webp image format?

Calendar 👁️ 69

In website operation, image loading speed is crucial for user experience and Search Engine Optimization (SEO).WebP is a modern image format that, with its excellent compression performance, significantly reduces file size while maintaining image quality, thereby greatly improving website loading speed.AnQiCMS (AnQiCMS) fully understands this and has built-in support for the WebP image format in its system, making it easy for users to turn it on and benefit from it.

However, after enabling the WebP feature, many users may be confused: how can the front-end page correctly display and load these WebP images, especially considering the varying degrees of support for the WebP format among different browsers?This article will discuss this issue in detail and provide practical solutions.

Enabling and impact of AnQi CMS background WebP function

First, let's understand how to enable WebP image format in the AnQi CMS background. This setting is located atBackground managementofGlobal Settings.

  1. Access content settings:Log in to the AnQiCMS backend and navigate to后台设置-u003e内容设置.
  2. Enable WebP option:In the "Content Settings" page, you will find an option named "Whether to start Webp image format". Check this option to enable WebP functionality.
  3. Understanding the impact after enabling:
    • Automatically convert new uploaded images:After enabling WebP, all new uploaded images:.jpg/.pngwill be automatically converted to.webpFormat and store. This means that when you insert images into the content, AnQiCMS will automatically reference these WebP formatted images.
    • Old image processing:Images uploaded before enabling the WebP feature will not be automatically converted to WebP. AnQiCMS provides a "WebP conversion tool" or "batch regenerate thumbnails" features (usually in内容设置page or图片资源管理in

Related articles

How does Anqi CMS handle and display external links in content, such as adding the `rel="nofollow"` attribute?

In website operation, the management of external links is an indispensable part of content strategy and search engine optimization (SEO).Especially properties like `rel="nofollow"`, which tell search engines not to pass link weight to the linked page, are crucial for managing the link health of a website and avoiding potential SEO risks.AnQiCMS (AnQiCMS) provides multiple ways to handle and display external links in content, including automatically adding the `rel="nofollow"` attribute

2025-11-09

How to call the backend custom Json-LD structured data in AnQi CMS template and display it?

Today with the rich content on websites, how to make search engines accurately understand web content and display it in a more user-friendly manner has become a key link in website operation.Structured data (usually in Json-LD format) is an important tool to achieve this goal.By embedding Json-LD code in the page, we can provide standardized information for search engines about various content such as articles, products, and reviews, thereby having the opportunity to obtain richer search result displays, which is what we commonly refer to as 'rich snippets' or 'rich results'

2025-11-09

How to implement complex parameter filtering conditions for the dynamic display of the `archiveFilters` tag on the front end?

In website content operation, providing users with flexible and efficient filtering functions is an important factor in improving user experience and helping users quickly locate the information they need.AnQiCMS (AnQiCMS) knows this, making it easy to dynamically display complex parameter filtering conditions on the front end through its powerful template tag system, especially the `archiveFilters` tag.### Core Function and Implementation Principle The core function of the `archiveFilters` tag is to use the custom fields of the content model

2025-11-09

How to implement the sorting display of article list by views (views desc) in AnQi CMS?

How to make a hot article on the website stand out quickly and attract more visitors' attention?This can effectively enhance user experience and is also the key to optimizing content strategy and guiding traffic.For users of AnQiCMS, it is a very practical and easy-to-operate feature to display article lists sorted by page views.The powerful template tag system of AnQi CMS allows you to easily display the most popular content on your website to users.### Core Feature Revelation: Utilize `archiveList`

2025-11-09

What basic conventions should the template files of Anqi CMS follow to correctly display the content structure?

In Anqi CMS, template files are the basis for presenting website content.It is not just a simple HTML file, but a set of blueprints that follow specific conventions and rules. Only by accurately adhering to these conventions can the system correctly parse, render, and display the structure of your website content.Understanding these basic conventions can help you customize and manage your website more efficiently, ensuring that content is presented in the way you expect to visitors.### The storage location and basic format of the template file Firstly, Anqi CMS has clear requirements for the storage location of template files

2025-11-09

How to debug template display issues in AnQi CMS, such as using the `dump` filter to print variables?

Aqy CMS template debugging: Use the `dump` filter to easily locate display problems When building a website with Aqy CMS, we sometimes encounter situations where the template content is not displayed as expected.For example, you expect to display the article title at a certain location, but it turns out to be blank;Or the list data is incomplete, the content of a custom field is always unable to be presented correctly.These issues often confuse people, because it is clear that data has been set in the background, but for some reason the front-end does not display.If one can 'penetrate' the real content of the variables in the template, it will undoubtedly greatly improve the efficiency of solving such problems

2025-11-09

How to display the navigation list configured in AnQi CMS and support multi-level dropdown menus?

The website navigation acts as a 'compass' for users visiting the website, and its clarity and ease of use directly affect user experience and the efficiency of information acquisition.For a corporate website, a well-structured navigation system that supports multi-level dropdowns is essential.AnQiCMS (AnQiCMS) understands this and provides an intuitive and powerful backend configuration function, allowing you to easily build a navigation menu with a sense of hierarchy.Next, we will explore how to configure the navigation list in the Anqi CMS backend and make it perfectly present multi-level dropdown effects on the front end.--- ### Step 1

2025-11-09

How to use the `lorem` tag to generate placeholder text in the early stages of development, and quickly preview the display effect of the template?

At the early stage of website template development, designers and developers often face a common challenge: how to effectively preview and adjust the layout, style, and responsive performance of the template without real content?If each modification requires manual input of a large amount of text to test the effect, it will undoubtedly greatly reduce development efficiency.AnQi CMS knows this pain point and provides a very convenient and efficient built-in tag called `lorem`, which can help us quickly generate placeholder text during the development stage, so that we can focus on the visual presentation of the template itself.### `lorem`

2025-11-09