How to control the automatic compression and thumbnail display of AnQiCMS front-end images after uploading?

During the operation of a website, the management and optimization of image content is a key factor in improving user experience, accelerating website loading speed, and even affecting search engine rankings.AnQiCMS fully considered these needs, providing a flexible image processing mechanism, allowing us to easily control the automatic compression and thumbnail display of images uploaded to the front end.

Content settings: The core hub of image processing

We need to go to the 'Background Settings' menu first in the background to manage the pictures on the AnQiCMS website accurately, then click the 'Content Settings' option.Here is a comprehensive collection of core configurations related to content images, allowing us to have a full control over the way images are processed.

1. Remote Image Download: Master the Source of Image OriginIn the "Content Settings", you can decide whether to download remote images.If your article content references images from external links, enabling this option will cause AnQiCMS to automatically download these images to your server, achieving localized storage.This can increase image loading speed in some cases, especially when the external image server is unstable.But if you are using a professional image hosting service (CDN), it is usually not necessary to enable this feature, keeping the images on your CDN can actually achieve better acceleration effects.

2. WebP Format: The Future of Image OptimizationWhether to enable the Webp image format is a very practical feature.WebP is a modern image format that can significantly reduce file size while maintaining image quality, thus greatly enhancing page loading speed.If you enable this option, AnQiCMS will automatically convert the uploaded JPG, PNG, and other images to WebP format after you upload them.For images that have been uploaded but not yet converted to WebP, the system also provides a convenient 'WebP conversion tool' that can batch automatically convert all the images on the site, allowing your website to fully enjoy the performance improvement brought by WebP.

3. Automatic Large Image Compression: Balancing Quality and SpeedThe "Auto-compress large images" feature helps us avoid uploading very large images, which can cause the page to load slowly.When you enable this feature, AnQiCMS will automatically compress images that exceed certain standards (default is 800 pixels in width).You can also customize the maximum width of the image in the 'Auto Compress to Specified Width' box, based on the actual needs of the website.For example, if most of the image display area on your website is about 1000 pixels, you can set it to 1000. The system will intelligently compress images wider than this width, thereby saving storage space and speeding up loading.

4. Thumbnail Processing Method: Refining Your Image DisplayThis is the core of controlling the front-end display effect of images. AnQiCMS provides three different thumbnail processing methods to meet diverse design needs:

   • Scale proportionally to the longest side:This method ensures that the image maintains its original proportion and scales based on the longest side to display the image completely.This means that the thumbnail width or height may adjust according to the original image ratio, commonly used in scenarios where it is necessary to fully display the image content without strictly requiring a fixed size.
   • Pad to the longest edge:If you need a thumbnail to have a fixed width and height while also displaying the entire image content, 'pad to the longest edge' is a good choice.The image will be centered, and the parts that are not the preset size will be automatically filled with white blocks, ensuring uniformity in size and avoiding information loss caused by cropping.
   • Trim to the shortest edge:When you have strict size requirements for thumbnails and the image content allows for central cropping, you can choose this method.AnQiCMS will crop the image to the center to match the preset size on the shortest side, thus generating a thumbnail of exactly the same size.It should be noted that this method may result in part of the image edges being clipped.

5. Thumbnail size: Custom display sizeAfter selecting the thumbnail processing method, the 'thumbnail size' becomes particularly important.You can accurately set the width and height of the thumbnail according to the design requirements of the front-end page.Setting a reasonable size not only optimizes the image volume, reduces the transmission bandwidth, but also improves the page loading speed and brings a smoother user experience.

6. Default thumbnail: Display elegantly even without an imageSometimes, an article or product may not have a separately set thumbnail.This is when the 'default thumbnail' comes into play. After uploading a general image here, when the system needs to display a thumbnail but cannot find a specific image, it will automatically call this default image for display, ensuring the uniformity and aesthetics of the website interface.

7. Batch regenerate: One-click update all thumbnailsWhen you modify any of the above thumbnail processing settings (such as thumbnail size or processing method) after, you may want to regenerate all previously uploaded images according to the new rules.At this time, there is no need to manually operate one by one, the 'Batch Regenerate Thumbnails' feature can help you update the thumbnails of the entire site with one click, greatly improving operational efficiency.

Image call and display in front-end template

In AnQiCMS front-end template, we call and display optimized images through built-in tags set up by the backend.No matter whether the image has undergone WebP conversion, large image compression, or specific thumbnail processing, the front-end template can easily obtain the link to the processed image.

• Document, category, and single page thumbnail:In the details or list pages of documents (archive), categories (category), and single pages (page), we usually use{{item.Logo}}Get the main image (usually the first uploaded image or cover), as well as{{item.Thumb}}Get the thumbnail set by the backend. For example:

  <img src="{{archive.Thumb}}" alt="{{archive.Title}}" />
  

  This will display the thumbnail image processed by the background settings of the current article.

• Display of the picture group:For some fields that contain multiple images, such as the 'Document Images' (Images) or 'Banner Images' of categories, we can display them by looping:

  {% archiveDetail archiveImages with name="Images" %}
  {% for imgUrl in archiveImages %}
      <img src="{{imgUrl}}" alt="文章图片" />
  {% endfor %}
  {% endarchiveDetail %}
  

  HereimgUrlEach image obtained will also be affected by global settings such as 'WebP image format' and 'auto-compress large images'.

• Manually obtain thumbnail:If you have an original image URL in the template and want it to also follow the thumbnail settings in the background, you can usethumbFilter:

  <img src="{{ imageOriginalUrl|thumb }}" alt="描述" />
  

  This filter will return the thumbnail URL corresponding to the original image based on the configuration of 'thumbnail processing method' and 'thumbnail size' in the background.

Summary

AnQiCMS provides powerful and flexible control capabilities in image management, from automatically compressing large images, converting to WebP format, to various thumbnail processing methods. Every detail aims to help users optimize website performance and content display.By reasonably utilizing the various functions in the "Content Settings" and combining the call of the front-end template, we can not only make the website load faster and improve the user experience, but also ensure that the image content is presented in the most aesthetic and suitable way to the visitors, thereby enhancing the overall competitiveness of the website.

Frequently Asked Questions (FAQ)

1. Why does my image still look large after uploading, without being compressed?This is usually due to the 'Content Settings' in the background not enabling the option to 'Automatically compress large images' or setting the width value for 'Automatically compress to specified width' too large, so that the image does not reach the compression trigger condition.Please check and adjust these settings to ensure they meet your expectations.

2. I changed the thumbnail processing method or size, but the image on the front end did not change, what should I do?When you adjust the thumbnail-related settings, the system will not automatically update the thumbnails of the uploaded images.You need to go back to the "Background Settings" -> "Content Settings" page, find the "Batch regenerate thumbnails" button, click it to let AnQiCMS regenerate all image thumbnails according to the new rules.Moreover, to ensure you see the latest effects, don't forget to clear your browser cache.

3. How to ensure that my website images are clear and load quickly?To achieve clear images and fast loading, it is recommended to enable both the 'Whether to start Webp image format' and 'Whether to automatically compress large images' functions.WebP can effectively reduce file size, while large image compression controls the maximum physical size of the image.In the 'Thumbnail Size' settings, set an appropriate and not too large size based on the main display area of your website images, and make sure to call it in the template.{{item.Thumb}}or use|thumbFilter to get these optimized thumbnails.