The quality of website content is often not only reflected in text, but images as visual elements also play a crucial role.How to efficiently handle images in website operation, ensuring that images are clear and beautiful while also considering loading speed, which is the core value of AnQiCMS image processing function.

Today, let's delve into how AnQiCMS helps us manage the automatic compression of large images and the processing of thumbnails, as well as how these settings affect the display effect of images on the website's frontend.

Say goodbye to slow image loading: Start from background settings

In AnQiCMS, all image processing core settings are concentrated in the background.You only need to log in to your AnQiCMS backend, find the "Global SettingsThis is the first stop to optimize the display effect of your website images.

1. Smart compression of large images, save space and traffic

Imagine that you might have directly uploaded a high-definition image of several MB, with thousands of pixels, taken by a digital camera.If the website directly loads this original image, it not only occupies a large amount of server space, but also makes the user wait for a long loading time.AnQiCMS kindly provides the "Whether to automatically compress large images" feature.

  • Whether to automatically compress large images:Enable this option and AnQiCMS will automatically compress images larger than the set width when uploading images.This is like slimming down your image file, without affecting the visual appeal and greatly reducing the file size.
  • Automatically compress to the specified width:When you turn on large image compression, there will be a default 800 pixel width setting here.You can adjust this value according to the overall layout of the website and the maximum width of the image display.For example, if the maximum width of your article content area is 960 pixels, setting it here will ensure that the large image uploaded does not waste additional bandwidth while maintaining visual effects.It should be noted that the image will only be compressed based on width, and the height will be scaled proportionally.

2. Thumbnail processing method: Delicately crafted, present **effect

缩略图在网站中无处不在，文章列表、产品展示、图集封面……它们是内容的“门面”。AnQiCMS提供了三种精细的缩略图处理方式，以满足不同场景的显示需求：English

  • Scale proportionally by the longest edge:This is the most common way to handle.The system will resize the image based on its longest edge (either width or height) and scale it proportionally to the thumbnail size you set.The advantage of this method is that it can completely retain the original aspect ratio and all content of the image, the image will not be distorted, and it is the preferred choice for pursuing the integrity of the image.

  • Pad by the longest edge:If you have strict requirements for the thumbnail display size (such as it must be a square of 100x100 pixels), but do not want to crop the image content, then 'pad to the longest side' is the ideal choice.The system will first resize the image proportionally by its longest edge, then center the resized image within the fixed size area you set, and the insufficient part will be filled with white (or other preset color).Thus, all thumbnails will be of uniform size, visually very neat, but white edges may appear.

  • Crop by the shortest edge:When you need a fixed-size thumbnail and want the image to fill the area as much as possible, you can choose 'Crop to shortest side'.The system will center crop based on the shortest edge of the image to obtain a thumbnail of a fixed size.This method ensures that the thumbnail is fully filled, often used in scenes that require strong visual impact, such as user portraits, product lists, etc.But the drawback is that part of the content at the edge of the image may be cut off.

  • Thumbnail size: Here directly determines the final pixel size of the thumbnail generated by AnQiCMS for you automatically, for example, 200x150.Suggest setting one or several commonly used thumbnail sizes according to your website design.The appropriate size not only speeds up page loading, but also makes images appear clearer on the front end, avoiding blurring caused by browser resizing.

  • Default thumbnail:When your document (article, product, etc.) does not have a manually uploaded thumbnail and there are no images available to extract from the content, this 'default thumbnail' will be displayed as a backup.It can avoid page blank or layout chaos caused by the lack of images, maintaining the visual consistency of the website.

3. Image format optimization: WebP brings lighter and faster performance

The choice of image format is also crucial, besides size and compression.AnQiCMS supports enabling the WebP image format.WebP is a new generation image format, usually smaller than traditional JPG and PNG files in terms of image quality.Enable this feature, and new uploaded images will be automatically converted to WebP format. The old images uploaded previously can also be batch converted to WebP using the batch thumbnail regeneration tool next to the WebP conversion tool, further enhancing website performance.

How do these settings affect the front-end display of images?

The background image processing settings will directly affect the actual effect of the image when your website calls the image on the front end.

When you upload an image, AnQiCMS has already processed and saved copies of images in different sizes and processing methods in the background according to your settings. In the front-end template, these images are usually called through different tags:

  • Original large image:Even if you turn on the large image auto-compression, if your front-end template directly calls the original large image URL (such as the complete image address in the editor), the image will still display according to the compressed maximum width and will not be the size of the original uploaded file.This ensures that there is also an optimized version when a clear large image is needed.
  • Thumbnail ({{item.Thumb}}or{{item.Logo}}):In the article list, product list, category page, and other locations, thumbnails of documents or categories are usually called. In the template tags of AnQiCMS,{{item.Thumb}}Generally used to obtain thumbnails of images{{item.Logo}}May be used to get the main image or the first picture.These tags output images, which are generated based on the 'thumbnail processing method' and 'thumbnail size' defined in the 'content settings' on the backend.
  • FlexiblethumbFilter:Even if the default thumbnail has already been generated in the background, you can still control the image display more flexibly in the template. For example, if you want to display a picture in a specific size, you can use{{ image_url|thumb }}Filter. Although the document does not directly statethumbThe filter supports passing in size parameters, but it will utilize the built-in image processing capabilities of AnQiCMS, and return a URL suitable as a thumbnail based on the image address.This means that when your image is called from the front end, it is still affected by the background global thumbnail setting, ensuring a unified optimization standard.

Practical Tips

To achieve the desired image display effect and website performance, here are some suggestions:

  1. Set the size according to the design draft:When designing a website, it should be planned to standardize the size of images at different positions.Then set the appropriate 'auto compress to specified width' and 'thumbnail size' in the AnQiCMS background according to these standards.
  2. Select the appropriate thumbnail processing method:For different modules, choose the most suitable thumbnail processing method.For example, the product list may require 'trimming to the shortest edge' to ensure uniformity, while the article list may prefer 'proportional scaling to the longest edge' to preserve the integrity of the images.
  3. Regularly clean up and rebuild:If you change the background image processing settings, don't forget to use the 'Batch regenerate thumbnails' feature.This ensures that all old images are also processed according to the new rules, keeping the website images in the latest optimized state.

Through the powerful image processing capabilities of AnQiCMS, you can easily manage every image on the website, making them contribute to both visual experience and the website's loading speed.

Common Questions (FAQ)

问1：为什么我设置了自动压缩大图和缩略图尺寸，但有些图片在前端看起来还是很大或者尺寸不一致？

答：这可能有