Add loading="lazy" only to images with width and height attributes

ckeditor · Dec 12, 2024 · 35192d0 · 35192d0
1 parent 8099d92
commit 35192d0
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git a/packages/ckeditor5-image/src/image/utils.ts b/packages/ckeditor5-image/src/image/utils.ts
@@ -34,7 +34,7 @@ import type ImageUtils from '../imageutils.js';
  */
 export function createInlineImageViewElement( writer: DowncastWriter ): ViewContainerElement {
 	return writer.createContainerElement( 'span', { class: 'image-inline' },
-		writer.createEmptyElement( 'img', { loading: 'lazy' } )
+		writer.createEmptyElement( 'img' )
 	);
 }
 
@@ -51,7 +51,7 @@ export function createInlineImageViewElement( writer: DowncastWriter ): ViewCont
  */
 export function createBlockImageViewElement( writer: DowncastWriter ): ViewContainerElement {
 	return writer.createContainerElement( 'figure', { class: 'image' }, [
-		writer.createEmptyElement( 'img', { loading: 'lazy' } ),
+		writer.createEmptyElement( 'img' ),
 		writer.createSlot( 'children' )
 	] );
 }

diff --git a/packages/ckeditor5-image/src/imagesizeattributes.ts b/packages/ckeditor5-image/src/imagesizeattributes.ts
@@ -168,6 +168,7 @@ export default class ImageSizeAttributes extends Plugin {
 
 				if ( width && height ) {
 					viewWriter.setStyle( 'aspect-ratio', `${ width }/${ height }`, img );
+					viewWriter.setAttribute( 'loading', 'lazy', img );
 				}
 			} );
 		}

diff --git a/tests/_data/data-sets/ghs.js b/tests/_data/data-sets/ghs.js
@@ -21,19 +21,19 @@ const initialData =
 				<div class="columns" style="gap:10px">
 					<div class="column" style="border: 1px solid orange">
 						<figure class="image">
-							<img src="/ckeditor5/tests/manual/sample.jpg"/>
+							<img src="/ckeditor5/tests/manual/sample.jpg" width="826" height="388"/>
 							<figcaption><abbr title="HyperText Markup Language">HTML</abbr></figcaption>
 						</figure>
 					</div>
 					<div class="column" style="border: 1px dotted blue">
 						<figure class="image">
-							<img src="/ckeditor5/tests/manual/sample.jpg"/>
+							<img src="/ckeditor5/tests/manual/sample.jpg" width="826" height="388"/>
 							<figcaption><abbr title="Cascading Style Sheets">CSS</abbr></figcaption>
 						</figure>
 					</div>
 					<div class="column" style="border: 1px dashed olive">
 						<figure class="image">
-							<img src="/ckeditor5/tests/manual/sample.jpg"/>
+							<img src="/ckeditor5/tests/manual/sample.jpg" width="826" height="388"/>
 							<figcaption><abbr title="JavaScript">JS</abbr></figcaption>
 						</figure>
 					</div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -168,6 +168,7 @@ export default class ImageSizeAttributes extends Plugin { @@
     				if ( width && height ) {
     					viewWriter.setStyle( 'aspect-ratio', `${ width }/${ height }`, img );
+    					viewWriter.setAttribute( 'loading', 'lazy', img );
     				}
     			} );
     		}
@@ Expand Down @@