In AnQiCMS content settings, how to finely control the display of images (such as WebP, automatic compression, thumbnails)?

Calendar 👁️ 57

In website operation, images are important elements to attract users and convey information.However, unoptimized images may also be the culprit behind slow website loading, which can further affect user experience and search engine rankings.AnQi CMS knows the importance of image optimization, and therefore provides a variety of refined image control functions to help you achieve a perfect balance between website performance and visual effects.

One, WebP: The intelligent choice for lightweight and fast image acceleration

WebP is a modern image format that is typically 25-34% smaller than JPEG and 26% smaller than PNG in terms of file size while maintaining the same visual quality.This means faster loading speed and less bandwidth consumption.

In AnQi CMS, enabling the WebP feature is very convenient.You just need to go to the 'Content Settings' page in the website backend, find the 'Enable Webp Image Format' option, and set it to 'Enabled'.From now on, every time you upload JPG, PNG and other image formats, the system will automatically convert them to WebP format, achieving automatic format upgrade for new content.

For existing images on the website, Anqi CMS also provides a solution.In the "Content Settings", you can find the "WebP Conversion Tool", which can be used to batch convert all non-WebP format images uploaded to the website, so that all images on the entire website can enjoy the optimization benefits brought by WebP.

Two, Automatic large image compression: Say goodbye to redundancy and save resources

Many times, the resolution of the images we upload is much higher than the actual display requirements of the website, which not only occupies valuable server storage space but also increases the user's traffic burden.The automatic compression function of AnQi CMS can effectively solve this problem.

In the "Content Settings" page, check the "Whether to automatically compress large images" to enable this feature.The system will automatically compress images larger than the set size to a width of 800 pixels.Of course, you can customize this value according to the specific requirements of the website design in the 'Auto-compress to specified width' input box.For example, if the maximum display width of your article content area is 1200 pixels, you can set this value to 1200.This feature mainly compresses the image based on its width, significantly reduces file size without affecting the visual presentation of the image, thereby saving storage space and further accelerating page loading.

Three, Thumbnail: Fine control, multi-scene adaptation

The thumbnail is an essential element in website content lists, recommendation spots, and other scenarios, as it allows for a quick preview of the image content and optimizes page layout.The Anqi CMS provides a variety of thumbnail generation and management features to meet different display needs.

In the "Content Settings", you can choose the "thumbnail processing method" that best fits your website design style:

  • Scale proportionally to the longest side:This method will resize the image proportionally based on the longest side size you set, ensuring that the image is displayed completely without distortion.The thumbnail width or height will be fixed, and the other side will be adjusted proportionally.
  • Pad to the longest edge:If you need a thumbnail with a fixed aspect ratio and do not want any part to be cropped, this method is very suitable.The image will be centered, and the insufficient area will be filled with white to make the thumbnail reach the specified precise size.
  • Trim to the shortest edge:When you have strict requirements for the thumbnail size, this method can crop the image to the center.The shortest side will be displayed completely, while the longest side will be cropped to match the shortest side, which may result in the loss of original image edges.

After selecting the appropriate processing method, you can enter the required width and height in the 'thumbnail size', for example, set to300x200Pixel. Precise size settings help maintain the consistency of page layout and improve loading efficiency.

Moreover, AnQi CMS also allows you to set a 'default thumbnail'.When the content does not specify a thumbnail, the system will automatically use this default image for display, which is very helpful for maintaining the consistency of the website's overall visual style.

If you adjust the thumbnail size or processing method, the existing thumbnails will not be updated immediately.At this time, you can use the 'Batch Regenerate Thumbnails' feature.This feature will update all thumbnails of the images generated on the entire site according to your latest settings, saving the麻烦 of manual operation.

It is also very convenient to call thumbnails in front-end templates. Usually, you can{{ item.Thumb }}or{{ item.Logo }}Directly obtain the thumbnail address of the article or category. For more flexible scenarios, it can also be combinedthumba filter such as{{ item.Logo|thumb }}to further process and display the image address.

Through these fine-grained image control features, AnQi CMS can not only help you efficiently manage and optimize website image resources, but also significantly improve the user experience, page loading speed of the website, and lay a solid foundation for search engine optimization.Make good use of these tools to make your website both engaging and efficient.


Frequently Asked Questions (FAQ)

  1. Ask: Will the images I uploaded before be automatically converted to WebP after enabling the WebP format?Answer: No. After enabling the WebP feature, only newly uploaded images will be automatically converted to WebP format.For the images already existing on your website, you need to manually go to the background "Content Settings" and the "WebP Conversion Tool" for batch conversion.

  2. Ask: When setting the image to automatically compress the width to 800 pixels, will it only compress the width or will it also proportionally shrink the height?Answer: When you turn on automatic compression of large images and set a specified width (such as 800 pixels), the system will resize the image proportionally based on this width.This means that if the original image width is greater than 800 pixels, it will be resized to 800 pixels wide, and the height of the image will also be reduced in proportion to the original aspect ratio to maintain the visual proportions without distortion.

  3. What is the reason why the thumbnail size I modified in the background did not change on the website front end?Answer: After changing the thumbnail size or processing method settings in Anqi CMS, the thumbnails that have already been generated will not update automatically.You need to go to the "Content Settings" page, find the "Batch Regenerate Thumbnails" feature and click to execute, then the system will regenerate all thumbnails according to your new settings and update them to the website front end.

Related articles

How does AnQiCMS support Markdown content editing and correctly render mathematical formulas and flowcharts on the front end?

AnQiCMS understands the desire of content creators for efficient and flexible editing tools.The new version introduces Markdown editor, greatly enhancing the convenience of content publishing.It is even more surprising that AnQiCMS not only supports basic Markdown syntax but also allows complex mathematical formulas and flowcharts to be elegantly presented on your website front-end through simple configuration.This is undoubtedly a powerful boost for websites that need to display professional knowledge, technical documentation, or educational content.### Enable Markdown Editing Feature First

2025-11-08

How to build and display the navigation path of the current page in the website using the `breadcrumb` tag?

In website construction and operation, user experience (UX) is always at the core.When visitors delve deeper into your website, a clear navigation path can effectively prevent them from getting lost and quickly understand their current location.This is the value of the 'Breadcrumb Navigation'.It not only enhances user experience, but is also an important part of Search Engine Optimization (SEO), helping search engines understand the hierarchy of your website structure.AnQi CMS knows this and therefore provides a convenient and easy-to-use `breadcrumb` tag

2025-11-08

How to retrieve and display the global configuration and SEO information of the website using `system`, `contact`, and `tdk` tags?

In the daily operation of AnQiCMS (AnQiCMS), accurately displaying global configuration information, contact information, and carefully optimized SEO elements on the website front end is the key to improving user experience and search engine visibility.Fortunately, AnQiCMS provides several intuitive and powerful template tags that allow users to easily access this important data.This article will delve into the three core tags `system`, `contact`, and `tdk`, helping you seamlessly integrate the background configuration into various pages of the website.Get the global configuration of the website

2025-11-08

How to format a timestamp with the `stampToDate` tag to display the date and time in a user-friendly manner?

In the daily content operation of Anqi CMS, we often need to present the original timestamp data such as publish time and update time in a way that is more accustomed to and easier to read for users.The original timestamp, such as `1609470335` such a pure number sequence, has no meaning to ordinary users.To solve this problem, AnQi CMS provides a very practical template tag——`stampToDate`, which can help us convert these numeric timestamps into a clear and user-friendly date and time display.###

2025-11-08

How does AnQiCMS handle the display of external links in documents, does it automatically add the `nofollow` attribute?

In website operation, the management of external links is an important task, which not only relates to user experience, but also has a direct impact on search engine optimization (SEO).The use of the `nofollow` attribute can help website managers control the transmission of link weight more accurately, avoiding unnecessary risks.For users of AnQiCMS, understanding how the system handles external links in documents and whether it automatically adds the `nofollow` attribute is crucial for efficient website operation.AnQiCMS provides a clear and flexible strategy for handling external links

2025-11-08

How does AnQiCMS support multi-level menus and custom navigation categories to optimize the display of the website structure?

In website operations, a clear and effective navigation system is the key to user experience and search engine optimization.It not only guides visitors to find the information they need quickly, but also shows the structure and relevance of the website's content to search engines.AnQiCMS (AnQiCMS) has fully considered the actual needs of operators in website navigation settings, providing flexible multi-level menus and customizable navigation category functions to help users easily build a well-organized website structure.### Core Advantage: Flexibility and Structure The navigation feature of Anqi CMS aims to provide high customization and convenient management

2025-11-08

How to flexibly set the display name, subtitle, and description of navigation links to enrich the navigation display of the website?

The website's navigation system is like the table of contents of a book, guiding readers to the chapters they are interested in and subtly shaping their overall perception of the website's content.A well-designed, informative navigation that can significantly improve user experience, help visitors quickly find the information they need, and also bring a positive impact on search engine optimization (SEO).The Anqi CMS provides detailed and powerful navigation management features, allowing you to go beyond simple link text and create more expressive and practical website menus.Why is navigation not just links? In the digital age

2025-11-08

How to precisely control the display summary of the homepage TDK settings of AnQiCMS in the search engine results page?

In website operation, the homepage of a website is like a digital facade of a company, and its display quality on the search engine results page (SERP) directly affects the visitor's willingness to click.Precisely controlling this facade, which is what we commonly refer to as TDK (Title, Description, Keywords) settings, is a crucial step in achieving efficient search engine optimization.AnQiCMS as a content management system focused on providing an intuitive and powerful home page TDK setting feature, helps users accurately control the display summary of the home page in search engines.###

2025-11-08