WordPress 6.7 introduces a new feature – automatic image resizing for lazy-loaded images. This feature is based on the new features in the HTML specification. Which allows the browser srcsetto use the actual rendered width of the image when selecting. The image source in the list. This improvement allows lazy-loaded images to be resized more accurately when they are loaded after the layout is determined.
Background
As early as WordPress version 4.4, responsive image WordPress 6.7 new features properties srcsetand sizeswere introduced. According to the official developer notes:
To help the browser select the most appropriate iran whatsapp number data image from a list of sources, WordPress provides a default WordPress 6.7 new features sizesproperty set to (max-width: {{image-width}}px) 100vw, {{image-width}}px. While this default is suitable for most sites, theme developers can wp_calculate_image_sizescustomize sizesthe property to suit specific needs using filters.
Setting a reasonable sizesvalue is crucial when choosing srcsetthe right image in , as it tells the browser the expected layout of the image before the layout is loaded. If this value is not set, the browser will use 100vwas the default value, assuming that the image should fill the entire viewport width, which may cause unnecessary redundant data to be loaded.
Over the years
WordPress’s default values have been optimized to WordPress 6.7 new features limit image. Layouts to widththe range of its property, thereby reducing data waste. However, for some situations where the layout is limited by content width or nested blocks, the accuracy of the default value still needs to be improved.
While theme developers are encouraged. To whatsapp 2024: is your phone already obsolete? use wp_calculate_image_sizesto. Provide more precise sizesvalues, this can be challenging to implement in practice. Today, browsers automatically apply the correct rendered layout width to lazy-loaded images, ensuring that sizesthe value exactly matches the layout, significantly reducing unnecessary data usage.
Implementation details
According to the HTML specification, lazy loading images can be done by omitting sizesthe attribute. Or setting it sizes=”auto”, or “auto,”a string starting with. Followed by a list of valid source sizes. As a progressive enhancement for browsers that india phone list support this feature. WordPress will add the prefix to the content image’s attribute wp_filter_content_tags()in the function, or wp_get_attachment_image()in image tags generated by . This ensures that browsers that do not support the value will fall back to the original list of , thus maintaining compatibility.
