In website operation, images are an important element to attract visitors and convey information.However, large, unoptimized images often become the "killer" of website loading speed, not only affecting user experience but also potentially dragging down search engine rankings.It is fortunate that AnQiCMS provides very intelligent and practical features in image processing, which can help us easily cope with these challenges and make images clear and fast when displayed on the front end.

Intelligent compression, say goodbye to the trouble of manually adjusting large images

Have you also encountered such a situation: uploaded large-sized images from cameras or designers directly to maintain image quality, only to find that the website page loads slowly as a snail?The AnQi CMS is very considerate in dealing with this issue.它内置了自动压缩大图的功能，能将我们上传的图片在后台进行优化，而不影响前端展示效果。

To enable this feature, we just need to go to the backend, find“Global Settings”under'Content Settings'. Here, you will find a named“Whether to automatically compress large images”option. After checking it, you can further set“Compress automatically to the specified width”. For example, if you set the width to800像素, then all uploaded images, as long as the width exceeds 800 pixels, the system will adjust the width to 800 pixels while ensuring the image quality, and accordingly shrink it proportionally, thereby greatly reducing the image size.

This means that even if you upload a large image with thousands of pixels in width, the system will quietly process it into a size more suitable for web display in the background, without the need for you to manually adjust it using tools like Photoshop.This not only saves server storage space, but also significantly improves the page loading speed, allowing visitors to see exquisite image content without a long wait.

Flexible thumbnail generation and management

In addition to the automatic compression of large images, the security CMS also handles thumbnails very professionally. In the same'Content Settings'page, you will see"Thumbnail processing method"and. "Thumbnail Size"These settings allow us to flexibly generate and call different-sized images according to the needs of different areas of the website.

The CMS provides three thumbnail processing methods to meet various design needs:

  • Scale proportionally by the longest sideThis method will maintain the original aspect ratio of the image, scaling the longest side to the specified size, and the other side will be scaled proportionally. This is the most commonly used method and can preserve the image content to the greatest extent.
  • Scale proportionally by the longest side with paddingIf you need a fixed-size thumbnail but also want to display the entire image content, you can choose this method.The system will resize the image proportionally to fit the size, and the insufficient part will be filled with white (or a configurable color) to center the image.
  • [en] : Crop to the shortest edge.When you want to ensure that the image fills the entire area in a list or grid, this method is very practical.The system will use the center of the image as a reference, crop the shortest side to the specified length, and may crop off part of the image edge.

After defining these rules, when calling images in the front-end template, the system can intelligently generate and display corresponding thumbnail images. For example, you may need to call thumbnails in article lists or product display pages, simply by using something like{{ item.Logo|thumb }}Such template tags, or directly call such as{{ archive.Thumb }}Such fields, the system will automatically output the processed image address according to the rules you set.

In addition, if your website needs a unified style, or if some images do not have a separate thumbnail set,. "Default Thumbnail"Functionality can be used, making all missing thumbnail positions have a unified placeholder. If you adjust the thumbnail settings halfway through,"Batch regenerate thumbnails"Function can help you update thumbnails of all existing images with one click, saving a lot of repetitive operations.

Upgrade experience: WebP image format

Do you want to load images faster while not losing too much quality?WebP is the ideal choice.WebP is an image format developed by Google, which is usually smaller than JPG or PNG image files, but can maintain similar or even better visual quality.

In'Content Settings'In it, you can enable“Whether to start the Webp image format”.Enable this option to automatically convert newly uploaded JPG, PNG, and other image formats to WebP for storage and display.This means that your website images will load with a smaller size, further enhancing the website's response speed and user experience.

In general, the security CMS provides a smooth workflow for image optimization.You just need to make simple settings in the background, then upload images as usual, and the system will automatically complete subsequent tasks such as compression, cropping, and format conversion, making the image display on the front end of the website fast and beautiful. This provides visitors with a better browsing experience and indirectly helps the website's SEO performance.

Common Questions and Answers (FAQ)

Q1：I upload the pictures to the AnQi CMS, will they be automatically compressed?A1：Not all pictures will necessarily be compressed. If the original width of your picture exceeds the one you set in'Content Settings'the one you set in“Compress automatically to the specified width”, and you have checked to enable it“Whether to automatically compress large images”, the system will automatically compress. In addition, whether the original large image is compressed or not, the system will always compress according to the settings you have made. "Thumbnail Size"and"Thumbnail processing method"，English generates thumbnails of different sizes for front-end use.

Q2：How do I display images of different sizes on the front-end page or call compressed images?A2：In the template, you can directly call such as{{archive.Logo}}or{{item.Logo}}Retrieve the original image address (if automatic compression is enabled, this will be the compressed address). To call a specific thumbnail size, please use{{item.Logo|thumb}}Such a filter. The system will automatically select'Content Settings'Configured thumbnail rules, automatically generated and provides the corresponding image address in size.Thus, you can flexibly display images of different sizes in different scenarios such as article detail pages, list pages, special topic pages, etc.

Q3: After enabling the WebP image format, will the existing images on the website also be automatically converted to WebP?A3：Enable WebP format after you新上传The image will be automatically converted to WebP format.For images that have already been uploaded, they will retain their original format.“WebP conversion tool”(Available on the "Content Settings" page, or accessible through other paths), you can use this tool to batch convert the entire site's images to WebP format.