How to optimize the display and lazy loading of images and videos in document content?

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

Content upload and intelligent optimization: Let multimedia 'take off light'}

When we upload pictures and videos to websites, we often only pay attention to the content itself, but ignore their impact on website performance.AnQi CMS provides multiple intelligent optimization functions at the source of content upload, greatly reducing our workload.

First, the system supportsWebP image format conversion. WebP is a modern image format that can significantly reduce the file size without losing image quality, thereby speeding up the loading of images.We can enable this feature in the background content settings, so that uploaded JPG, PNG, and other images will automatically be 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 that need to be converted, the system even 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, saving storage space and reducing transmission bandwidth, and avoiding page lag caused by large images.

Furthermore, the Anqi CMS is generatingThumbnailIt is also extremely flexible. Whether it is in the article list, product display, or category page, thumbnails are indispensable.The system provides various thumbnail processing methods such as 'Proportional scaling by the longest side', 'Filling by the longest side', and 'Cropping by the shortest side'.We can choose the most suitable processing method and size according to the actual needs of the front-end template to ensure that the picture 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, very thoughtful.

In addition, when editing content, if an external image link is referenced, Anqi CMS also providesWhether to automatically download remote imagesThe options. This helps us better control image resources, to avoid the impact on page display due to external links failing or loading slowly.At the same time, to protect the copyright of original content, the system is built-inImage watermark managementFunction, can automatically add 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 that cause pages to load slowly. At this time,Lazy Load (Lazy Load)It became our 'secret weapon' for optimizing website experience.

The core principle of lazy loading is that the real content of the image or video starts to load only when the user scrolls the page and it enters the visible area.Prior to this, a placeholder or low-quality image will be displayed on the page, or even no image will be loaded, thereby greatly reducing the amount of data loaded during the initial page load, allowing the user to see the main content of the page faster.This not only optimizes the user experience, but is also an important indicator of the performance evaluation of search engine websites.

Implementing lazy loading of images in Anqi CMS is very straightforward. When you go througharchiveDetailto get the document content (ContentField when only in the tag is addedlazy="data-src"Just attributes. 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 the system will render all images in the document content when rendering HTML.srcAttribute (i.e., the actual address of the image) replace withdata-src(or any other attribute you specify, such asdata-original），whilesrcThe property can be left blank or point to a very small placeholder. When the corresponding JavaScript lazy loading library (such as the popularlazysizesor a custom script) and JavaScript will only execute when it detects that an image has entered the user's visible areadata-srcAssign the value againsrcthe image will start loading and displaying.

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

Fine management and continuous optimization

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

Through the backend'sImage Resource ManagementThe function allows us to统一 manage all images and videos on the website.Even if the image needs to be updated, there is no need to worry about the URL changing.On the "Image Resource Management" interface, we can directly perform the "Image Replacement" operation, the system will continue to use 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 to image links, reduces the risk of dead links, and makes it convenient for us to update high-resolution images at any time.

After adjusting the global thumbnail size or WebP conversion settings, you can use “batch regenerate thumbnailstool, one-click update all uploaded image thumbnail versions, ensuring that the website images are presented on the front-end in**size and format.

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

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

Frequently Asked Questions (FAQ)

1. I have alreadyarchiveDetailused in thelazy="data-src"But why do the images still load immediately without lazy loading effect?simply add in the taglazy="data-src"The attribute simply tells the browser where the actual address of the image is located indata-srcthe attribute instead ofsrc.To truly implement lazy loading, the front-end of your website still needs to introduce aJavaScript lazy loading libraryfor examplelazysizes.js/vanilla-lazyload.jsOr a custom script). This JS library is responsible for listening to whether the image enters the visible area and executes actions at the appropriate time.data-srcthe value will be copied back,srcThe attribute triggers the loading of images. Make sure that the corresponding lazy loading script is correctly introduced and initialized in your template file.

2. Does AnQi CMS support automatic lazy loading optimization for videos? I see images havelazyproperties, does video have similar properties?The current Anqi CMSlazyproperties mainly target byarchiveDetailLabel rendering of image content. For video, the system itself does not have a direct built-in tag attribute to implement lazy loading similar to images. But you can use a similar approach to manually load the video'ssrcAddress placeddata-srcIn custom attributes, then combine with frontend JavaScript libraries (such aslazysizesCan also be configured to supportvideoLabel, or a dedicated video player library) to implement video lazy loading.The usual practice is to display the video poster first, and then load the video source when the user clicks play or the video enters the visible area.

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