In website operation, we often encounter the need to display images in fixed sizes, such as in product lists, article summaries, or Banner areas. In order to maintain the neatness of the page layout and visual consistency, images usually need to be displayed strictly according to the set width and height.AnQiCMS (AnQiCMS) provides two thumbnail processing methods in the content settings, 'Trim to shortest side' and 'Pad to longest side', aimed at helping us meet this challenge.So, faced with a fixed-size display scenario, how should we make a choice?

First, let's understand the characteristics of these two processing methods.

Trim according to the shortest edge: pursue filling, accept abandonment

When we choose to "crop by the shortest edge", Anqi CMS will crop the image centrally.This means it will ensure that the thumbnail completely fills the fixed size area you set, leaving no blank space.In particular, the system will use the shorter side of the image as a baseline, stretching or shrinking it to match the shorter side of the fixed size, and then center-cropping the longer side to match the fixed size's length.

This method has the advantage of making your image look fuller and more striking within a fixed area, visually filling the entire space.For those scenes where the subject of the image is centered and the surrounding background information is not as important, such as showing product close-ups, portraits, etc., cropping can bring a good visual unity.However, its disadvantages are also very obvious: the content at the edges of the image may be cropped and lost.If your image contains a lot of information, or the main content is close to the edge, important details may be mercilessly discarded during cropping.

Fill according to the longest edge: guard integrity, allow for white space

And 'filling along the longest side' adopts another strategy.In this mode, AnQi CMS will also generate thumbnails with fixed width and height, ensuring that all edges of the image are displayed completely, without cutting off any part.When the original aspect ratio of the image does not match the fixed size set, the image will be centered in the thumbnail area, and the insufficient part of the image will be filled with white blocks until it reaches the thumbnail size you specify.

The advantages of this method are self-evident: it can retain the integrity of the image content to the greatest extent possible.For images that carry important information in every inch, such as design works, artistic photography, charts with text, etc., blanking can avoid the risk of information loss.Although there may be 'white**blocks' around the image, the image itself is complete.The drawback is that these blanks may affect the overall aesthetic of the page, especially when there is a large difference between the image and the background color, or when the size of the image is greatly different, causing the blank area to be too large, which may appear rough or inconsistent.

How to make wise choices?

Under the scenario of displaying in a fixed size, both 'cropping by the shortest edge' and 'filling by the longest edge' have their respective applications.The key to making a choice lies in the characteristics of your website's content, design style, and the priority of completeness of image information.

  1. Consider the importance of content:

    • If the integrity of the image is crucial, no part should be lost.(For example, product detail images, promotional images with important text information, group photos of people, etc.), then “Fill the longest sideis a safer choice. Even if there is blank space, it is better than losing information.
    • If the main subject of the image is clear and centered, the edge information is not important, or you value the visual uniformity of the image filling area more(For example, a pure background image, the main product image with the product centered in the frame), then “Trim according to the shortest edge”can provide a more compact and seamless visual experience.

  2. Consider the design style and user experience:

    • If your website design aims for simplicity and modernity, you do not want any unnecessary whitespace, or you need a seamless image splicing visual effectthenTrim according to the shortest edgeIt may better suit your aesthetic. But make sure the main subject of the uploaded image can tolerate cropping.
    • If your website emphasizes the presentation and delicacy of content, or you want images to have a 'gallery' effect framedthenFill the longest sideCombining with appropriate background design, it can create a more professional atmosphere.You can use front-end CSS to set a background color that matches the website style for these blank areas, and even add borders to integrate them into the overall design.

  3. Practice makes perfect:It is recommended to conduct a small-scale test in the Anqi CMS backend content settings first, regardless of the method chosen.You can upload several images of different ratios, apply two processing methods, and adjust the preview effect of the "thumbnail size".The "Batch regenerate thumbnails" feature provided by Anqi CMS also allows you to quickly update thumbnails of all uploaded images after modifying the settings, making it convenient for iteration and optimization.

In general, these two thumbnail processing methods are not exclusive but complementary tools.As website operators, we need to flexibly use them according to specific content needs and design goals, so that images can convey effective information in fixed-size displays while also enhancing user experience.

Frequently Asked Questions (FAQ)

Q1: I selected '裁剪 according to the shortest edge', but found that the cropping effect of some images is not ideal. Is there a way to remedy it?A1: If you find the cropping effect is not ideal, first try adjusting the 'thumbnail size' settings to see if you can improve the cropping area by changing the target size.If the main subject of the image is indeed very close to the edge and important, and cannot be cropped, you may need to re-upload a pre-processed image (such as manually adjusting the size of the image or adding blank space around the image to protect the subject), or consider changing the thumbnail processing method to "pad to the longest side" to ensure the integrity of the image.

Q2: Is the thumbnail processing method of Anqi CMS a global setting? What if different areas of the website need different processing methods?A2: Yes, the 'thumbnail processing method' of AnQi CMS is a global setting that will be applied to all thumbnails automatically generated by the system. If you want different areas to have different display effects, such as the homepage banner needing to be cropped and the article list thumbnails needing to be padded, then you may need to weigh and operate in the following aspects:

  1. Select the main thumbnail strategy as the global setting.
  2. Manually upload pre-processed images for special areas that require different effects.This means that the thumbnails of these images will no longer be generated automatically by the system, but will be the final display images you upload.
  3. Adjustable flexibly through frontend CSS styles.For example, even if the system generates a 'filler' image, you can use CSS properties to fill and crop the image within the container, or useobject-fit: cover;attributes to fill and crop the image within the container, or usebackground-size: cover;To simulate the cropping effect, use the image as the background.In the same vein, if the system generates a "cropped" image, you can try to display it completely using some front-end technologies, but this will usually introduce additional whitespace or change the layout.

Q3: Besides cropping and padding, the document also mentions 'scaling proportionally by the longest side', what scenarios is this method applicable to?A3: 'Scaling by the longest side' is another common thumbnail processing method. It displays all sides of the image completely, while maintaining the original aspect ratio of the image and ensuring that it is the most