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

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

Say goodbye to slow image loading: Start with background settings

In AnQiCMS, all the core image processing settings are concentrated in the background.You just need to log in to your AnQiCMS backend, find the "Global Settings" in the left menu, then click "Content Settings", and you will see a series of options related to image processing.This is the first stop to optimize the display effect of the images on your website.

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

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

  • Whether to automatically compress large images:Enable this option and AnQiCMS will automatically compress images exceeding the set width during image upload.This is like slimming down your image file, without affecting the visual perception and can greatly reduce the file size.
  • Automatically compress to a specified width: After 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 to 960 will ensure that the large image uploaded will not waste additional bandwidth while maintaining the visual effect.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: exquisite carving, presenting **effect

Thumbnails are everywhere on the website, in article lists, product displays, album covers... They are the 'face' of the content. AnQiCMS provides three refined thumbnail processing methods to meet the display needs of different scenarios:

  • Scale proportionally to the longest side:This is the most common processing method. The system will scale the image proportionally to the thumbnail size you set, based on the longest side (it could be width or height).The benefit of this method is that it can perfectly preserve the original proportion and all content of the image, the image will not deform, and it is the preferred choice for pursuing the integrity of the image.

  • Pad to the longest edge:If you have strict requirements for the display size of thumbnails (such as they must be square 100x100 pixels), but do not want to crop the image content, then 'fill to the longest edge' is the ideal choice.The system will first resize the image proportionally to the longest side, then center the resized image within the fixed size area you set, and fill the insufficient part with white (or other preset colors).This way, all thumbnails will be of the same size, visually very neat, but there may be white edges.

  • Trim to the shortest edge:When you need a thumbnail of a fixed size and want the image to fill the area as much as possible, you can choose "Crop to shortest side".The system will crop the image centered from the shortest edge to get a thumbnail of a fixed size.This method ensures that the thumbnail is filled out completely, commonly used in scenarios such as user avatars, product lists, and others that require strong visual impact.But the drawback is that some of the content at the edges of the image may be cut off.

  • Thumbnail size:This directly determines the final pixel size of the thumbnail automatically generated for you by AnQiCMS, for example, 200x150.Suggest setting one or several commonly used thumbnail sizes based on your website design.The appropriate size not only accelerates page loading, but also makes the image clearer when displayed on the front end, avoiding blur caused by the browser's second scaling.

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

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

The choice of image format is also crucial, besides size and compression.AnQiCMS supports enabling WebP image format.WebP is a new generation image format, usually smaller in file size than traditional JPG and PNG at the same quality.After enabling this feature, new images uploaded will be automatically converted to WebP format, and old images uploaded previously can also be batch converted using the WebP conversion tool next to "Batch regenerate thumbnails", further improving website performance.

How do these settings affect image display on the front end?

The background image processing settings will directly affect the actual effect when your website's front-end calls images.

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

  • Original large image:Even if you turn on the large image automatic compression, if your front-end template directly calls the original large image URL (such as the complete image address in the editor), then 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}}):Thumbnail of document or category is usually called at positions such as article list, product list, category page, etc. In AnQiCMS template tags,{{item.Thumb}}Used to obtain thumbnail images while{{item.Logo}}May be used to obtain the main image or the first image. The images output by these tags are generated based on the 'thumbnail processing method' and 'thumbnail size' defined in the 'content settings' on the backend.
  • FlexiblethumbFilter:Even if the background has already generated a default thumbnail, you can still control the image display more flexibly in the template. For example, if you want to display a certain image in a specific size, you can use{{ image_url|thumb }}Filter. Although it is not directly stated in the documentthumbThe filter supports passing in size parameters, but it will utilize the built-in image processing capabilities of AnQiCMS to return a URL suitable for a thumbnail based on the image address.This means that your image is still affected by the background global thumbnail settings when called in the front-end, ensuring a unified optimization standard.

Practical suggestions

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

  1. Set the size according to the design drawing:When designing a website, it should be planned in advance to have standard image sizes for different locations.Then based on these standards, set the appropriate "auto-compress to specified width" and "thumbnail size" in the AnQiCMS background.
  2. Choose the appropriate thumbnail processing method:Choose the most suitable thumbnail processing method for different modules.For example, a product list may require "trimming to the shortest edge" to ensure uniformity, while an article list may prefer "proportional scaling to the longest edge" to maintain image integrity.
  3. Regularly clean 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 AnQiCMS's powerful image processing capabilities, you can easily manage every image on the website, making them contribute to both visual experience and website loading speed.

Frequently Asked Questions (FAQ)

Why did I set automatic compression for large images and thumbnail sizes, but some images still look large or have inconsistent sizes on the front end?

This could be