How to automatically compress large images in AnQiCMS and set thumbnail processing methods?

As a website operator who is well-versed in the operation of AnQiCMS, I fully understand that image optimization is a key link in improving website performance and user experience in daily content management.Especially for websites with a large number of images, properly handling the compression of large images and the generation of thumbnails can not only effectively save server storage space and bandwidth, but also significantly speed up page loading, thus improving SEO performance and retaining visitors.AnQiCMS provides powerful and flexible built-in features for image processing, allowing us to easily achieve these goals.

Optimize image performance: automatic compression of large images in AnQiCMS

In AnQiCMS, the system provides an automatic compression feature for large-sized images uploaded, which is crucial for controlling the size of image files and improving the loading speed of the website.When the size of the image uploaded by the user exceeds the preset standard, the system can automatically shrink it to the specified width to balance the image quality and file size.

Enable this feature is very simple.You need to access the AnQiCMS backend management interface, find "Background Settings" in the sidebar, and then click "Content Settings".In the content settings page, you will see an option named "whether to automatically compress large images".By default, this feature is turned off.Enable this option, and all newly uploaded images will be compressed during processing.

Below the option 'Compress Large Image Automatically', there is the setting item 'Compress to Specified Width'.Here you can define the maximum width of the compressed image, the default value is usually 800 pixels.You can adjust this value according to the actual design requirements and content display habits of the website.For example, if the width of the main content area of your article is 700 pixels, setting the compression width to 700 or slightly higher is a wise choice, as it ensures the clarity of the image while avoiding unnecessary size waste.Please note that the compression judgment here is only based on the width of the image, and the system will adjust the height proportionally.

Flexible and diverse thumbnail processing methods

The thumbnail is an indispensable element in scenarios such as content list pages, recommended positions, etc., which can quickly attract users to click and preview the content.AnQiCMS offers various thumbnail generation and processing methods to meet the needs of different website layouts and design styles.

In the "Content Settings", you can find the option for "thumbnail processing method". The system has three main processing modes:

One isScale proportionally to the longest side.This method maintains the original aspect ratio of the image, scaling it based on the longest side to ensure the integrity of the thumbnail.When you want the image not to be cropped in the thumbnail and to adapt to certain size limits, this option is very practical.For example, if you set the thumbnail size to 200x200, a 400x600 image may be scaled to 133x200, ensuring that the width is displayed completely.

The second isFill the longest side.If you need all thumbnails to maintain strictly consistent dimensions (for example, the list page needs square image placeholders), but do not want to crop the image content, then this method is an ideal choice.The system will resize the image proportionally to fit the longest side according to the thumbnail size you set, and then fill the insufficient part with a white background.This will display all thumbnails in a uniform size while keeping the content intact.

The third isTrim according to the shortest edge.This method is suitable for those who pursue visual uniformity and do not mind the edges of the image being cropped.The system will crop the image based on the shortest side and display it centered.For example, if a 400x600 image is resized to 200x200, it may crop the middle 200x200 part.This method ensures that accurate thumbnail sizes are generated, but it may result in the loss of some image information.

After selecting the appropriate thumbnail processing method, you need to set specific width and height values in the 'Thumbnail Size'.Reasonably set these dimensions, not only can it optimize image loading, but also improve the overall beauty of the page.Default thumbnailWhen the content does not upload a specified thumbnail, the system will automatically use this default image to fill in, ensuring consistency in the display of the website. If the website layout or design changes, you need to adjust the size of all thumbnails generated, you can usebatch regenerate thumbnailsFunction, the system will process the uploaded images in batches according to the new settings, greatly simplifying maintenance work.

Further image format optimization: WebP support

In addition to size compression and thumbnail processing, AnQiCMS also supports converting uploaded images to WebP format.WebP is a modern image format developed by Google, which provides smaller file sizes than JPEG and PNG at the same image quality, thereby further accelerating web page loading.

In the "Content Settings" page, you can find the option to enable the Webp image format.Once this feature is enabled, all images in JPG, PNG, and other formats uploaded from that point will be automatically converted to WebP format.This is an important step for a website to accumulate performance advantages over the long term.If you want to convert non-WebP images that were uploaded before enabling, AnQiCMS also provides a dedicated WebP conversion tool for batch processing.

Flexibly call images and thumbnails in the template

In AnQiCMS template design, it is very convenient to call optimized images and thumbnails. For example, when displaying article details or lists, you can use such asarchiveDetail/categoryDetail/pageDetailUse tags to obtain the image URL.

Generally,{{item.Logo}}Used to call the first image or main image of the picture (after large image compression), and{{item.Thumb}}It is used to call the thumbnail processed image. In cases where the content contains multiple images, you can use{{item.Images}}Retrieve image list for looping display. These tags will automatically reference the optimized image paths set in the background, ensuring that the images displayed on the front end are in **performance status.**

By means of these detailed configurations, AnQiCMS allows website operators to easily handle the challenge of image optimization and provide users with a faster and smoother browsing experience.

Frequently Asked Questions

Does AnQiCMS automatically compress all uploaded images?AnQiCMS by default will not automatically compress all images.You need to manually enable the "Auto-compress large images" feature in the "Content Settings" backend, and set the "Auto-compress to specified width".Enable this, all subsequent uploaded images will be compressed according to these settings.

Will the thumbnail be updated immediately after modifying the thumbnail size?It will not be updated immediately.When you modify the "thumbnail size" in the "Content Settings", it will only affect the thumbnails generated for new uploaded images.To update the thumbnail of the uploaded images, you need to use the "Batch regenerate thumbnails" feature below this page, the system will regenerate thumbnails for all images according to the new settings.

What if I enabled WebP conversion but my browser does not support WebP?AnQiCMS when converting images and providing services considers compatibility.In most cases, WebP image format is provided preferentially to browsers that support it.For browsers that do not support the WebP format, the system or web server (such as through appropriate configuration) may automatically fallback to provide the original image format (such as JPEG or PNG) to ensure that all users can view the image normally.However, due to the high popularity of WebP, most modern browsers already support it.