How to manage image resources and control their display in content (such as Webp, automatic compression, thumbnails)?

In website operation, images are indispensable elements that attract users and convey information.However, managing and optimizing these image resources is often a headache, as it directly affects the website's loading speed, user experience, and even the SEO effect. 幸运的是，AnQiCMS provides a series of powerful and flexible features for image management, allowing you to easily meet these challenges.

Why is image management so important?

Imagine, the user opens your website, but because the images load slowly, they may not see the full content and might choose to leave.Large, unoptimized images not only consume valuable bandwidth resources, increase server costs, but also slow down page loading speed, leading to a decline in user experience.In search engine optimization, loading speed is one of the important ranking factors, and modern image formats like WebP can also bring extra points to the website.Therefore, efficient management and optimization of image resources is a skill that every website operator must master.

AnQiCMS Overview of Core Image Processing Features

AnQiCMS centralizes the core image processing settings in the backgroundContent settingsHere is the starting point for optimizing the performance of your website images.

1. Advantages and activation of the modern image format WebPWebP is a modern image format that can significantly reduce file size while maintaining image quality, thereby greatly enhancing page loading speed. In the content settings of AnQiCMS, you will find that theWhether to enable Webp image format”Option. Once enabled, the system will automatically convert JPG, PNG, and other image formats to WebP when you upload them.This is very effective for new uploaded images. If the images already on your website need to be converted to WebP, AnQiCMS also provides a convenient batch conversion tool to optimize all site image resources with one click.

2. Intelligent compression: Optimize image size, accelerate website loadingTo further reduce the impact of images on website performance, AnQiCMS provides the “Whether to automatically compress large images”Function. When you upload images of larger size, the system can automatically compress them. You can also use “Automatically compress to a specified widthSet a maximum width, such as 800 pixels, so that all images wider than this value will be scaled proportionally, ensuring a balance between visual effects and file size and avoiding unnecessary resource waste.

3. Flexible thumbnail mechanism: fine control of image displayIn different scenarios, images need to be displayed in different sizes and forms, such as thumbnails in article lists, icons on category pages, etc. AnQiCMS provides three types of “Thumbnail Processing MethodMeet your diverse needs:

   • Scale proportionally to the longest sideEnsure the image is displayed completely while maintaining the original aspect ratio and the longest side reaches the specified size.
   • Fill the longest side: Fixed thumbnail width and height, image centered, fill with white for parts that are not enough, suitable for containers that need fixed dimensions.
   • Trim according to the shortest edgeThe image will be cropped to the center, with the shortest edge fully displayed and the longest edge cropped based on the shortest edge, suitable for emphasizing the main part of the image.配合 “Thumbnail sizeOption, you can set a * thumbnail size based on your website layout and design, making the image display more standardized and faster to load.

4. Default thumbnail and batch operation: effortlessIn order to deal with the situation where some content does not upload a thumbnail, AnQiCMS allows you to set up aDefault thumbnailThis way, when content does not specify a thumbnail, the system will automatically use the default image for display, ensuring the uniformity of the website's visual style.Moreover, if you adjust the thumbnail size or processing method, there is no need to manually process them one by one, AnQiCMS'batch regenerate thumbnailsThis feature can help you update all thumbnail images with one click, saving time and effort.

5. Remote image processing strategyIn the content settings, you can also choose “Whether to download remote imagesIf you reference images from external websites in your article, enabling this feature will download these images to your server, ensuring the long-term availability and controllability of image resources.

Daily management of image resources

In addition to the automated image processing features, AnQiCMS also provides a convenient image resource management interface to organize your image assets neatly.

1. Unified Management: Image Resource CenterUnder the "Page Resources" menu in the background, there is a special "Image Resource ManagementPage. Here, all the images and video resources on your website are collected, and you can clearly see the original large image, filename, file type, upload time, file size, image resolution, and access address of each picture in detail.

2. Categorization and Bulk Operations: Efficient OrganizationTo manage a large number of images conveniently, you can categorize them by project, theme, or usage.On the image resource management interface, you can easily create, edit different categories, and classify images into the corresponding categories.It is more efficient that AnQiCMS supports batch selection of images for deletion or transfer to a specified category, which greatly enhances your daily organization efficiency.

3. Replace Image: The convenience of a static URLWhen you need to update a picture, AnQiCMS provides a very practical "Image Replacement Operation。You can replace the old image with a new one without changing the image URL.This means you do not need to modify any articles or templates that refer to this image, avoiding the issue of link failure due to image updates, which greatly facilitates website maintenance work.

How to accurately call and display images in the content?

In the AnQiCMS template, you can flexibly call and display image resources according to your needs.

1. LogowithThumb: Quickly call the main image and thumbnailIn the details of the content model (such as articles, products, single pages), there is usually a setting for the main image or thumbnail. When calling the template, you can useLogoThe field retrieves the main image that is set, whileThumbThe field is used to retrieve the system-generated thumbnail. For example, on the article list page, to ensure loading speed and page layout, it is usually called{{ item.Thumb }}To display thumbnails; on the article detail page, it may be necessary to display clearer{{ item.Logo }}.

2. Images: Show multi-image carousel or galleryIf your content includes a set of images (such as product detail page sliders or image galleries), AnQiCMS'ImagesThe field can be used. This field usually returns an array of images, and you can create a beautiful image gallery or carousel by iterating over this array in the template.

3. thumbFilter: Dynamically generate thumbnailsIn addition to direct callingLogoorThumbField, AnQiCMS also provides a powerfulthumbFilter. You can process any image URL through this filter, which will dynamically generate and return the thumbnail address of the image based on the thumbnail size and processing method you set in the background "Content Settings".For example, if you want to use the first image in the article content as a thumbnail for the list page, you can do so by{{ articleContentFirstImage|thumb }}method to implement, very flexible.

Through the above features, AnQiCMS provides a complete image resource management solution, from automatic optimization during image upload (WebP conversion, intelligent compression), to convenient management on the back end (classification, batch operations, image replacement), to the front-end template.