{"id":160,"date":"2019-08-03T23:38:19","date_gmt":"2019-08-03T20:38:19","guid":{"rendered":"https:\/\/lyubomir-angelov.com\/?p=160"},"modified":"2020-02-12T22:15:44","modified_gmt":"2020-02-12T20:15:44","slug":"the-dimensions-of-an-img-tag","status":"publish","type":"post","link":"https:\/\/lyubomir-angelov.com\/blog\/the-dimensions-of-an-img-tag\/","title":{"rendered":"The dimensions of an img tag"},"content":{"rendered":"\n
\"\"<\/figure><\/div>\n\n\n\n

The other day in the team we were playing with one simple bug.\nThe bug was why the Intersection Observer is loading almost all images on the page which are not in the viewport?<\/p>\n\n

It was simple, the src<\/strong> attribute was empty:<\/p>\n\n

<img src="" data-src="" class="lazy-load" alt="Some title" \/>\n<\/code><\/pre>\n\n
This was making all images on the page to render close one to another with the size of the defined line-height. So almost all images were initially in the viewport when the Intersection Observer was triggered.<\/p>\n\n
Ok, we got the issue, so let’s define some dimensions to the img tags:<\/p>\n\n
<img src="" data-src="https:\/\/URL_TO_IMAGE" class="lazy-load" height="200" width="200" alt="Some title" \/>\n<\/code><\/pre>\n\n
Ahh, still the images are only with the size of the line-height and still almost all are visible…<\/p>\n\n
Then after adding some CSS to try to set the size “min-height” and etc. we were not able to set the proper dimensions.<\/p>\n\n
Suddenly someone remembers it if you don’t have some URL to image in the src<\/strong> attribute, the Width and Height<\/strong> won’t be used and the tag won’t be that size.<\/p>\n\n
The simple solution was:<\/p>\n\n
<img src="https:\/\/URL_TO_1x1_PIXEL_IMAGE" data-src="https:\/\/URL_TO_REAL_IMAGE" class="lazy-load" height="200" width="200" alt="Some title" \/>\n<\/code><\/pre>\n\n
Yes, if you set 1×1 image in the src, the height and width will be applied and the Intersection Observer will do his job properly.<\/p>\n\n
Most of the articles for Image lazy loading are not mentioning that you need src attribute filled, it is better for UI and for the lazy load.<\/p><\/p>\n","protected":false},"excerpt":{"rendered":"
The other day in the team we were playing with one simple bug. The bug was why the Intersection Observer is loading almost all images on the page which are not in the viewport?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[30,31,32],"class_list":["post-160","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-html","tag-html-parsing","tag-img-tag"],"yoast_head":"\nThe dimensions of an img tag - Lyubomir Angelov<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/lyubomir-angelov.com\/blog\/the-dimensions-of-an-img-tag\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The dimensions of an img tag - Lyubomir Angelov\" \/>\n<meta property=\"og:description\" content=\"The other day in the team we were playing with one simple bug. The bug was why the Intersection Observer is loading almost all images on the page which are not in the viewport?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/lyubomir-angelov.com\/blog\/the-dimensions-of-an-img-tag\/\" \/>\n<meta property=\"og:site_name\" content=\"Lyubomir Angelov\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-03T20:38:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-02-12T20:15:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/lyubomir-angelov.com\/blog\/wp-content\/uploads\/2019\/08\/image-tag-dimensions.jpg\" \/>\n<meta name=\"author\" content=\"Lyubomir\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@angelovcode\" \/>\n<meta name=\"twitter:site\" content=\"@angelovcode\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lyubomir\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/lyubomir-angelov.com\/blog\/the-dimensions-of-an-img-tag\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/lyubomir-angelov.com\/blog\/the-dimensions-of-an-img-tag\/\"},\"author\":{\"name\":\"Lyubomir\",\"@id\":\"https:\/\/lyubomir-angelov.com\/blog\/#\/schema\/person\/5e091f5c2fa79f57d30d482a7ef8cd92\"},\"headline\":\"The dimensions of an img tag\",\"datePublished\":\"2019-08-03T20:38:19+00:00\",\"dateModified\":\"2020-02-12T20:15:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/lyubomir-angelov.com\/blog\/the-dimensions-of-an-img-tag\/\"},\"wordCount\":229,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/lyubomir-angelov.com\/blog\/#\/schema\/person\/5e091f5c2fa79f57d30d482a7ef8cd92\"},\"keywords\":[\"html\",\"html parsing\",\"img tag\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/lyubomir-angelov.com\/blog\/the-dimensions-of-an-img-tag\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/lyubomir-angelov.com\/blog\/the-dimensions-of-an-img-tag\/\",\"url\":\"https:\/\/lyubomir-angelov.com\/blog\/the-dimensions-of-an-img-tag\/\",\"name\":\"The dimensions of an img tag - Lyubomir Angelov\",\"isPartOf\":{\"@id\":\"https:\/\/lyubomir-angelov.com\/blog\/#website\"},\"datePublished\":\"2019-08-03T20:38:19+00:00\",\"dateModified\":\"2020-02-12T20:15:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/lyubomir-angelov.com\/blog\/the-dimensions-of-an-img-tag\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/lyubomir-angelov.com\/blog\/the-dimensions-of-an-img-tag\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/lyubomir-angelov.com\/blog\/the-dimensions-of-an-img-tag\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/lyubomir-angelov.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The dimensions of an img tag\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/lyubomir-angelov.com\/blog\/#website\",\"url\":\"https:\/\/lyubomir-angelov.com\/blog\/\",\"name\":\"Lyubomir Angelov\",\"description\":\"The life of a Manager\",\"publisher\":{\"@id\":\"https:\/\/lyubomir-angelov.com\/blog\/#\/schema\/person\/5e091f5c2fa79f57d30d482a7ef8cd92\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/lyubomir-angelov.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/lyubomir-angelov.com\/blog\/#\/schema\/person\/5e091f5c2fa79f57d30d482a7ef8cd92\",\"name\":\"Lyubomir\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/lyubomir-angelov.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f6b8c15868355fa857fad18647aeadd07814e3d9baa72a1c92e718056684fec7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f6b8c15868355fa857fad18647aeadd07814e3d9baa72a1c92e718056684fec7?s=96&d=mm&r=g\",\"caption\":\"Lyubomir\"},\"logo\":{\"@id\":\"https:\/\/lyubomir-angelov.com\/blog\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/twitter.com\/angelovcode\"],\"url\":\"https:\/\/lyubomir-angelov.com\/blog\/author\/superfly\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The dimensions of an img tag - Lyubomir Angelov","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/lyubomir-angelov.com\/blog\/the-dimensions-of-an-img-tag\/","og_locale":"en_US","og_type":"article","og_title":"The dimensions of an img tag - Lyubomir Angelov","og_description":"The other day in the team we were playing with one simple bug. The bug was why the Intersection Observer is loading almost all images on the page which are not in the viewport?","og_url":"https:\/\/lyubomir-angelov.com\/blog\/the-dimensions-of-an-img-tag\/","og_site_name":"Lyubomir Angelov","article_published_time":"2019-08-03T20:38:19+00:00","article_modified_time":"2020-02-12T20:15:44+00:00","og_image":[{"url":"https:\/\/lyubomir-angelov.com\/blog\/wp-content\/uploads\/2019\/08\/image-tag-dimensions.jpg"}],"author":"Lyubomir","twitter_card":"summary_large_image","twitter_creator":"@angelovcode","twitter_site":"@angelovcode","twitter_misc":{"Written by":"Lyubomir","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/lyubomir-angelov.com\/blog\/the-dimensions-of-an-img-tag\/#article","isPartOf":{"@id":"https:\/\/lyubomir-angelov.com\/blog\/the-dimensions-of-an-img-tag\/"},"author":{"name":"Lyubomir","@id":"https:\/\/lyubomir-angelov.com\/blog\/#\/schema\/person\/5e091f5c2fa79f57d30d482a7ef8cd92"},"headline":"The dimensions of an img tag","datePublished":"2019-08-03T20:38:19+00:00","dateModified":"2020-02-12T20:15:44+00:00","mainEntityOfPage":{"@id":"https:\/\/lyubomir-angelov.com\/blog\/the-dimensions-of-an-img-tag\/"},"wordCount":229,"commentCount":0,"publisher":{"@id":"https:\/\/lyubomir-angelov.com\/blog\/#\/schema\/person\/5e091f5c2fa79f57d30d482a7ef8cd92"},"keywords":["html","html parsing","img tag"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/lyubomir-angelov.com\/blog\/the-dimensions-of-an-img-tag\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/lyubomir-angelov.com\/blog\/the-dimensions-of-an-img-tag\/","url":"https:\/\/lyubomir-angelov.com\/blog\/the-dimensions-of-an-img-tag\/","name":"The dimensions of an img tag - Lyubomir Angelov","isPartOf":{"@id":"https:\/\/lyubomir-angelov.com\/blog\/#website"},"datePublished":"2019-08-03T20:38:19+00:00","dateModified":"2020-02-12T20:15:44+00:00","breadcrumb":{"@id":"https:\/\/lyubomir-angelov.com\/blog\/the-dimensions-of-an-img-tag\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/lyubomir-angelov.com\/blog\/the-dimensions-of-an-img-tag\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/lyubomir-angelov.com\/blog\/the-dimensions-of-an-img-tag\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/lyubomir-angelov.com\/blog\/"},{"@type":"ListItem","position":2,"name":"The dimensions of an img tag"}]},{"@type":"WebSite","@id":"https:\/\/lyubomir-angelov.com\/blog\/#website","url":"https:\/\/lyubomir-angelov.com\/blog\/","name":"Lyubomir Angelov","description":"The life of a Manager","publisher":{"@id":"https:\/\/lyubomir-angelov.com\/blog\/#\/schema\/person\/5e091f5c2fa79f57d30d482a7ef8cd92"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/lyubomir-angelov.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/lyubomir-angelov.com\/blog\/#\/schema\/person\/5e091f5c2fa79f57d30d482a7ef8cd92","name":"Lyubomir","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/lyubomir-angelov.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f6b8c15868355fa857fad18647aeadd07814e3d9baa72a1c92e718056684fec7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f6b8c15868355fa857fad18647aeadd07814e3d9baa72a1c92e718056684fec7?s=96&d=mm&r=g","caption":"Lyubomir"},"logo":{"@id":"https:\/\/lyubomir-angelov.com\/blog\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/twitter.com\/angelovcode"],"url":"https:\/\/lyubomir-angelov.com\/blog\/author\/superfly\/"}]}},"_links":{"self":[{"href":"https:\/\/lyubomir-angelov.com\/blog\/wp-json\/wp\/v2\/posts\/160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lyubomir-angelov.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lyubomir-angelov.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lyubomir-angelov.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lyubomir-angelov.com\/blog\/wp-json\/wp\/v2\/comments?post=160"}],"version-history":[{"count":11,"href":"https:\/\/lyubomir-angelov.com\/blog\/wp-json\/wp\/v2\/posts\/160\/revisions"}],"predecessor-version":[{"id":193,"href":"https:\/\/lyubomir-angelov.com\/blog\/wp-json\/wp\/v2\/posts\/160\/revisions\/193"}],"wp:attachment":[{"href":"https:\/\/lyubomir-angelov.com\/blog\/wp-json\/wp\/v2\/media?parent=160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lyubomir-angelov.com\/blog\/wp-json\/wp\/v2\/categories?post=160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lyubomir-angelov.com\/blog\/wp-json\/wp\/v2\/tags?post=160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}