How to optimize image display in content lists and detail pages (thumbnails, multiple images, lazy loading)?

In the digital age where content is king, images on websites are not only visual decorations, but also key elements to attract users, convey information, and enhance brand image.However, unoptimized images may also become the culprit for slowing down website loading speed, affecting user experience, and even damaging SEO performance. 幸运的是，AnQiCMS（AnQiCMS）提供了全面而强大的图像优化工具，使得网站在保持视觉吸引力的同时，实现了高性能的加载。

This article will deeply explore how to make full use of the functions of Anqi CMS, how to optimize the display of images in the content list and detail pages, including the refined processing of thumbnails, strategies for multi-image display, and the application of lazy loading technology.

Refined thumbnail, enhancing the attractiveness of the list page

The list page is the first window that users browse the website content, a clear, beautiful, and quickly loaded thumbnail can effectively catch the user's attention, prompting them to click and view the details.The AnQi CMS provides very flexible settings for thumbnail management.

Firstly, in the "Content SettingsThis is the basis for optimizing thumbnails.You can set the width and height of the thumbnail uniformly according to the design requirements of the website.In terms of processing, Anqi CMS provides three modes: "Proportional scaling by the longest side", "Filling by the longest side", and "Truncation by the shortest side".

• The "Scale to fit longest side" option is suitable for those who want to display the image content completely and do not mind the thumbnail size may not be consistent.
• “Fill on the longest side” is suitable for designs that require strict fixed thumbnail sizes and want to retain the integrity of the image, with the insufficient part filled with white.
• “Trim to shortest side” will ensure that the thumbnail fills the entire specified area, but may cut off parts of the image edges.

Choose which way depends on the visual consistency and content display needs of your website list page.

In addition, AnQi CMS also has the feature of 'default thumbnail image'.If you do not manually upload a thumbnail for the content you post, the system will automatically use the default image set here, effectively avoiding the visual blankness caused by missing images.What's even smarter is that when you are editing a document and haven't uploaded a thumbnail, but the document content includes images, Anqie CMS will automatically extract and set a thumbnail, using the first image in the document content as the thumbnail, saving a lot of manual operation troubles.

It is also very convenient to call thumbnails in the template. Whether it is a document listarchiveList) Is it a single-page list (pageList), You can get the thumbnail address through the loop体内的{{item.Thumb}}. For category details,categoryDetaillabel'sname="Thumb"Parameters can directly retrieve the thumbnail of the category. If you need to further process the image address, such as adding a CDN domain or specific parameters, you can usethumbA filter that can generate a corresponding thumbnail address based on the image URL, making image management more flexible.

Multiple image display, enriching the content detail page.

The detail page usually needs to display more images to provide richer content details, such as product multi-angle displays, illustration explanations for articles, etc.The Anqi CMS also considers the management of multiple images thoroughly.

When publishing documents, managing categories, or single pages, you can upload multiple images.For example, the document editor itself supports inserting multiple images into the content.And for categories and single pages, in addition to the main thumbnail, there are usually also provided 'Banner images' or a dedicated 'Images' field, allowing you to upload a set of images for creating a carousel or album.These images will be centrally managed in the "Image Resource Management" backend, making it convenient for you to classify, search, and perform batch operations, greatly enhancing the reuse efficiency of image materials.

In the template to display multiple images, you need to use loop tags. For example, for the document detail page, if you have customized a group image field (such as named ）arcimagesOr used the system default'sImages.