How does AnQiCMS handle images in document content to optimize front-end display (e.g., Webp, compression)?

Images are an essential part of a website's content, making the page more attractive and conveying richer information.However, if the image is not optimized, the large file size often leads to slow website loading, seriously affecting user experience and search engine rankings.It's good that AnQiCMS provides a series of powerful optimization features when processing images in document content, which helps us easily cope with these challenges and ensures that the front-end display is both beautiful and efficient.

When we talk about image optimization, it usually involves several key aspects: image format, file size compression, and size adaptation in different scenarios.AnQiCMS provides flexible and practical solutions in these aspects.

first, Enable WebP image formatIs a highlight of AnQiCMS image optimization. WebP is a modern image format developed by Google, which can significantly reduce file size while ensuring image quality, usually 25-34% smaller than JPEG images of the same quality, and 26% smaller than PNG images.In AnQiCMS, we can find the option 'Whether to enable Webp image format' under 'Content Settings' in the 'Background Settings'.Once we choose to enable, the system will automatically convert JPG or PNG images to WebP format when uploading them.This means that we don't need to manually convert, and new uploaded images can automatically enjoy the volume advantages brought by WebP.For those old images that have already been uploaded to the website but have not yet been converted to WebP, AnQiCMS also provides a "Webp conversion tool" for us to conveniently batch convert with one click, so that all the images on the entire website can be upgraded quickly.

secondly,Automatic image compression functionIt is crucial for handling large original images. Often, the images we upload come from high-pixel cameras or source files made by designers, which have resolutions and file sizes far beyond what the website actually needs.AnQiCMS provides the setting for 'Whether to automatically compress large images'.When we turn on 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 a specified width'.For example, if we set the width to 800 pixels, all large images with a width greater than 800 pixels will be proportionally compressed to ensure that the images are displayed clearly on the front end without using too much bandwidth, thereby improving the page loading speed.

In addition to WebP conversion and automatic compression, AnQiCMS is inthumbnail managementIt also performs well, which is especially critical for scenarios that require small image display on list pages, recommendation positions, and so on.In the 'Content Settings', we can configure the 'thumbnail processing method' and 'thumbnail size'.The system provides three thumbnail processing methods to meet different design requirements:

• Scale proportionally to the longest sideThis method retains all the content of the image and scales the longest side of the image proportionally according to the set size to ensure that the image does not deform.
• Fill the longest sideThis method will make the thumbnail size completely match the width and height we set. If the original image ratio does not match the setting, the system will add a white**area to the edges of the image to fill in, making the image centered.
• Trim according to the shortest edgeThis method also fixes the thumbnail size, but it cuts based on the shortest edge, preserving the central part of the image, which is very effective for highlighting the subject, but may cut off some edge information.

We can also set a "default thumbnail", when the article or product does not upload a separate thumbnail, the system will automatically use this default image for display to avoid blank or inconsistent display.If we adjust the thumbnail size or processing method during the operation, don't worry about the incompatibility of old images, AnQiCMS also provides the 'batch regenerate thumbnails' feature, allowing us to quickly update all thumbnails according to the new configuration.

In addition, AnQiCMS also considers the details of content publishing.For example, when we write documents, upload images, or reference images from external sources, the system provides the option to 'download remote images'.If you choose to download, all referenced external images will be downloaded to our server, which not only avoids the problem of broken external links, but also integrates these images into the optimization management system of AnQiCMS.On the front-end template level, AnQiCMS also supports imagesLazy Load (Lazy Load). By adding specific attributes to the image in the template, such aslazy="data-src"Images only start loading when they enter the user's visible area, which can significantly reduce the initial loading time for pages with a large number of images, further optimizing the user experience.

In summary, AnQiCMS provides a series of functions such as WebP format conversion, automatic image compression, flexible thumbnail generation and management, and remote image localization, thereby building an efficient and intelligent image optimization workflow for us.These settings can be easily configured in the "Content Settings" backend, without the need for complex coding knowledge, allowing the website images to be presented to users in the most optimized state while ensuring quality.

Frequently Asked Questions (FAQ)

1. Ask: Why do my old images not change after enabling WebP conversion and image compression?Answer: AnQiCMS's WebP conversion and automatic compression feature is mainly aimed at new uploaded images after the feature is turned on.For existing old images on your website, the system will not process them automatically.If you want to apply these optimizations to old images as well, you can find features like 'Webp conversion tool' and 'batch regenerate thumbnails' in the 'Content Settings', and perform manual batch conversion and regeneration, or re-upload these images.

2. Ask: Does AnQiCMS automatically generate thumbnails for all images in the content? I want different lists to display images of different sizes.Answer: The thumbnail processing provided by AnQiCMS in the "Content Settings" is for uniformly processing images uploaded to specified thumbnail fields (such as "Document Image") for articles, products, and other content.When you insert an image into the document content editor, if it is not specified separately, the system may use the first image in the content as a thumbnail.If you need to display images of different sizes in different front-end lists, you can use AnQiCMS template tags (such asitem.Logo/item.ThumborthumbFilter, combined with CSS styles to adapt to display. If finer control is needed, consider adding a custom image field in the content model, and upload images of different sizes to be called as needed in the template.

3. Ask: Can I control the lazy loading of images in the front-end template? Does AnQiCMS have built-in lazy loading functionality?Answer: Yes, AnQiCMS supports lazy loading of images in the front-end template. In the document content field (for exampleContent), you can addlazy="data-src"attributes. For example:{% archiveDetail archiveContent with name="Content" lazy="data-src" %}{{archiveContent|safe}}. So, when generating HTML, the image tag will be automatically addeddata-srcA property, combined with a front-end JavaScript library (usually you need to import it yourself or it is integrated into the template), can enable lazy loading of images, reducing the initial loading time of the page.