In today's content-driven internet environment, images and videos have become key elements to attract users and enhance page interactivity.However, they are also often the 'culprits' that lead to slow website loading and a decline in user experience.As an AnQi CMS user, we are fortunate to have a powerful and flexible system that not only manages content efficiently but also includes many functions to help us cleverly optimize the display of images and videos, and achieve intelligent lazy loading, making content 'fly' while ensuring visual effects.

Content upload and intelligent optimization: Let multimedia 'carry light'

When we upload images and videos to the website, we often only focus on the content itself, but ignore their impact on website performance.The Anqi CMS provides multiple intelligent optimization functions at the source of content upload, greatly reducing our workload.

Firstly, the system supportsWebP image format conversion.WebP is a modern image format that can significantly reduce file size without losing image quality, thereby speeding up image loading.We can enable this feature in the background content settings, so that uploaded JPG, PNG and other images will be automatically converted to WebP format, which is very helpful for improving the overall performance of the website.If you have a large number of historical images to convert, the system also provides a batch conversion tool, saving the trouble of manual processing.

Secondly, for images that are too large, the Anqi CMS can performAutomatic compression.You can set a maximum width in the background. After the image is uploaded, if it exceeds this width, the system will automatically shrink it proportionally. This saves storage space, reduces transmission bandwidth, and avoids page lag caused by large images.

Furthermore, the Anqi CMS in generatingThumbnailAlso extremely flexible.No matter in the article list, product display, or category page, thumbnails are indispensable.System provides various thumbnail processing methods such as "Proportional scaling by the longest side", "Padding by the longest side", and "Trimming by the shortest side".We can choose the most suitable processing method and size based on the actual requirements of the front-end template to ensure that the image can be perfectly presented in different scenarios while controlling the file size.Even if we do not manually upload a thumbnail, the system will intelligently extract the first image from the document content as the default thumbnail, which is very thoughtful.

In addition, when editing content, if an external image link is referenced, the Safe CMS also providesWhether to automatically download remote imagesThe option.This helps us better control image resources, avoiding the impact on page display due to the failure or slow loading of external links.Image Watermark ManagementFunction, automatically adds watermarks to uploaded images, effectively preventing content from being misused.

The core weapon to improve page loading speed - lazy loading

Images and videos can enrich content, but they are often the main factors causing pages to load slowly. At this time,Lazy Load (Lazy Load)it becomes our 'secret weapon' for optimizing website experience.

The core principle of lazy loading is that the actual content of images or videos starts to load only when they enter the visible area of the page as the user scrolls.The page will display a placeholder or a low-quality image before this, or even not load any images at all, thereby significantly reducing the amount of data loaded during the initial page load, allowing users to see the main content of the page faster.This not only optimizes user experience, but is also one of the important indicators for evaluating website performance of search engines.

Implementing lazy loading of images in AnQi CMS is very direct. When you access the document content througharchiveDetailtagsContentfields"), just addlazy="data-src"Attribute. For example:

{# 假设我们正在文档详情页，需要显示文章内容并实现图片懒加载 #}
<div>文档内容：{% archiveDetail articleContent with name="Content" lazy="data-src" %}{{articleContent|safe}}</div>

Thislazy="data-src"The attribute is a clever convention. This means that when the system renders HTML, it will replace all images in the document content with thesrcattribute (which is the actual address of the image) withdata-srcautodata-original), whilesrcautolazysizesor custom script) and detects when the image enters the user's visible area, JavaScript will only be executed.data-srcthe value to reassign tosrc, the image will begin to load and display.

Although for video content,lazyProperties mainly target<img>Tags, but the ideas are interconnected. We can also store the video'ssrcProperties temporarily.data-srcIn custom attributes,配合前端JavaScript to implement lazy loading. For example, you can first display the poster image of the video (posterWhen the user clicks play or the video enters the visible area, the real source file of the video is dynamically loaded.

Fine management and continuous optimization

The optimization of website content is not a one-time task, it is a continuous process. AnQi CMS provides a series of tools to help us with fine-grained management and continuous improvement.

Through the background'sImage Resource ManagementFunction, we can manage all images and videos on the website uniformly.Even if the image needs to be updated, there is no need to worry about the URL changing.In the "Image Resource Management" interface, we can directly perform the "Image Replacement" operation, and the system will retain the original address, but the content will be replaced with the newly uploaded image.This is very beneficial for SEO maintenance, as it avoids changes in image links, reduces the risk of dead links, and makes it convenient for us to update high-resolution images at any time.

After we adjusted the global thumbnail size or WebP conversion settings, we can make use of the “Batch regenerate thumbnailsTools, one-click update the thumbnail versions of all uploaded images, ensuring that the website images are presented on the frontend in **size and format**.

Finally, after making any content or setting changes, do it promptlyClear system cacheThis is a critical step to ensure that the front-end content is displayed in the latest state. It allows the latest optimization settings and lazy loading configurations to take effect immediately, ensuring that users see the fastest and most fluid website experience.

Through these thoughtful designs and practical functions, Anqi CMS not only simplifies content management, but also empowers us to efficiently display rich multimedia content without sacrificing user experience and SEO effects, allowing our website to find the perfect balance between speed and beauty.

Common Questions (FAQ)

1. I have alreadyarchiveDetailThe label used containslazy="data-src", but why do the images still load immediately without lazy loading effect?simply addlazy="data-src"attribute, which just tells the browser that the actual address of the image isdata-srcinto the attribute, notsrcTo truly implement lazy loading, your website front-end also needs to introduce aJavaScript lazy loading library[for example]lazysizes.js/vanilla-lazyload.jsor custom script). This JS library is responsible for listening to whether the image enters the visible area and performs actions at the appropriate time.data-srccopy the value backsrcProperties, thus triggering the image loading. Make sure that the corresponding lazy loading script is correctly introduced and initialized in your template file.

2. Does the SecureCMS support automatic lazy loading optimization for videos? I see pictures havelazyproperties, do videos have similar[Currently] the 安企CMS[AnQi CMS]lazyproperties mainly target byarchiveDetailThe image content of the label rendering. For video, the system does not have a direct built-in tag attribute to implement lazy loading similar to images. But you can take a similar approach, manually loading the video'ssrcAddress placeddata-srcin custom properties, then combine with frontend JavaScript libraries (such aslazysizesand can also be configured to supportvideoTags, or a dedicated video player library) to implement lazy loading of videos.The usual practice is to first display the video poster, and then load the video source when the user clicks play or the video enters the visible area.

**3. I want different pages to display different image sizes, such as small thumbnails on the article list page, details