When talking about image optimization, several key aspects are usually involved: image format, file size compression, and size adaptation in different scenarios.AnQiCMS provides flexible and practical solutions in these aspects.

Firstly,Enable WebP image format

Secondly,Automatic image compression featureIt is crucial for handling large original images.很多时候，我们上传的图片来自高像素相机或设计师制作的源文件，它们的分辨率和文件大小远超网站实际所需。AnQiCMS provides the setting for 'Whether to automatically compress large images'.When we enable this feature, the system will intelligently judge and compress images that are too large.To better control the compression effect, we can also customize 'Auto compress to specified width'.For example, if we set the width to 800 pixels, all large images wider than 800 pixels will be proportionally compressed to ensure that the images are clear when displayed on the front end and do not consume too much bandwidth, thus improving the page loading speed.

Besides WebP conversion and automatic compression, AnQiCMS inThumbnail managementAlso performs well, which is especially critical for scenarios that require small image display, such as list pages and recommended positions.In the "Content Settings

  • Scale proportionally by the longest sideThis method will retain all the content of the image, and scale the longest side of the image proportionally according to the set size, ensuring that the image does not distort.
  • Scale proportionally by the longest side with paddingThis method ensures that the thumbnail size completely matches the width and height we set. If the original image ratio does not match the setting, the system will add white**area to the edges of the image to fill in, making the image centered.
  • [en] : Crop to the shortest edge.This method also fixes the thumbnail size, but it will crop based on the shortest side, preserving the central part of the image, which is very effective for highlighting the main subject, but may cut off some edge information.

We can also set a "default thumbnail", which the system will automatically use for display when there is no separate thumbnail uploaded for the article or product, to avoid blank or disharmonious display.If we adjusted the thumbnail size or processing method during the operation, don't worry about the old images not fitting, AnQiCMS also provides the 'batch regenerate thumbnails' feature, allowing us to quickly update all thumbnails according to the new configuration.

Lazy Load (Lazy Load). By adding specific attributes to images in the template,lazy="data-src"The image begins to load only when it enters the user's visible area, which can significantly reduce the initial loading time for pages containing a large number of images, further optimizing the user experience.

Common Questions (FAQ)

  1. 问：After enabling WebP conversion and image compression, why haven't my old images changed?

  2. 问：AnQiCMS will automatically generate thumbnails for all images in all content? I want different sizes of images to be displayed in different lists.答：AnQiCMS in the "Content Settings" provides a thumbnail processing feature that is designed to uniformly process images uploaded to designated thumbnail fields (such as "Document Image") for articles, products, and other content.When you insert an image into the document content editor, if no additional specification is made, the system may take the first image in the content as the thumbnail.item.Logo/item.Thumb) orthumbFilter, combined with CSS styles to adapt to display.If you need more precise control, you can consider adding a custom image field in the content model, and upload images of different sizes, and call them as needed in the template.

  3. 问：我可以在前端模板中控制图片进行懒加载吗？AnQiCMS是否内置了懒加载功能？English答：是的，AnQiCMS在前端模板中支持图片的懒加载。在文档内容字段（例如Content）的标签调用中，您可以添加lazy="data-src"For example:{% archiveDetail archiveContent with name="Content" lazy="data-src" %}{{archiveContent|safe}}. Thus, when generating HTML, the image tag will be automatically addeddata-src属性，配合前端的JavaScript库（通常需要您自行引入或模板已集成），就能实现图片懒加载，减少页面初始加载时间。