Google Console is returning an error that "An HTML tag contains the same attribute repeated multiple times." And I agree. It's the tags I'm using for the header image. But if I remove either one, it breaks the site on mobile devices. What am I doing wrong?
<figure class="ampstart-image-fullpage-hero m0 relative mb4">
<amp-img width="404" height="720" alt="Need a roofer" layout="responsive" src="img/need-a-roofer.jpg" alt="Need a Roofer?" media="(max-width: 415px)"></amp-img>
<amp-img** height="720" alt="roofer wichita" layout="fixed-height" src="img/need-a-roofer.jpg" alt="roofer wichita" media="(min-width: 416px)"></amp-img>
<figcaption class="absolute top-0 right-0 bottom-0 left-0">
Your amp-img tags contain two alt attributes. By removing one of the alt attribute from each of the amp-img google-console will stop complaining.
Related
Next.js has an Image component that lazy loads images and also provides a srcset for a given image.
However, sometimes we want to deliver different images for different devices (art redirection).
Mozilla says we should use <picture> element for this purpose, providing different images for different media queries.
I can't find an article (even in next.js official docs) to tell us how can we do that using <Image> component.
Is it possible? How can I use next.js <Image> component and HTML <picture> element together?
I have searched for hundreds of websites, this is the only solution I found which workable on Next.js ( with tailwindcss ).
import Image from 'next/image'
<div>
<div className="md:hidden">
<Image src="Banner-767x500.webp" height={500} width={767} />
</div>
<div className="hidden md:inline-flex lg:hidden">
<Image src="Banner-1023x500.webp" height={500} width={1023} />
</div>
<div className="hidden lg:inline-flex xl:hidden">
<Image src="Banner-1400x500.webp" height={500} width={1400} />
</div>
<div className="hidden xl:inline-flex">
<Image height={500} width={2000} src="Banner-2000x500.webp" />
</div>
</div>
The new version of Next Image component removes a lot of the extraneous HTML and styles and allows full flexibility of the img tag. With that new improvement in the component we can use the picture tag and the image component as normal.
Plus, Web.dev explains the way the picture element works really well: https://web.dev/learn/design/picture-element/
In the same way that srcset builds upon the src attribute, the picture element builds upon the img element. The picture element wraps around an img element.
If there is no img element nested inside the picture element, the picture element won't work.
Like the srcset attribute, the picture element will update the value of the src attribute in that img element. The difference is that where the srcset attribute gives suggestions to the browser, the picture element gives commands. This gives you control.
So, understanding that the picture element is just a wrapper of the img element which the browser still requires, and using the new version of next/image (Nextjs v. 13), you can write it as:
import Image from "next/image";
<picture>
<source srcset=".." media="..."/>
<Image src="..." height="..." width="..." alt="..." />
</picture>
A better approach is to use vanilla HTML as the following example, tested in Next.js 13.
Pros:
Full control of what you're showing and when.
Cons:
Manual optimization of assets.
<picture>
<source srcSet="/portrait/my-dog.webp" media="(orientation: portrait)" />
<img src="/my-dog.webp" alt="A beautiful labrador" loading="lazy" />
</picture>
I don't understand why the layout="fixed" is an disallowed attribute value. Could anyone please help find a solution to this error being shown for several pages across our Magento store?
<amp-img layout="fixed" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazy lazy-loading lazy-blur p1only" name="NewportHotHero" data-src="/images/5b22c63cd95b2.jpg" width="1500" id="NewportHotHero" height="1"></amp-img></a>
The actual content for this category in the Magento Admin is as follows:
<p><img id="NewportHotHero" class="p1only" style="display: none;" src="/images/5b22c63cd95b2.jpg" width="1500" name="NewportHotHero" border="0" /> <a name="pro_d"></a></p>
Your all attribute looks right, except name="NewportHotHero".
The
"name"
attribute is not documented in documentation.
Or you can play your code posted here and see the error.
I have replaced lazy loading with native chrome loading="lazy" attribute but it seems to be not working. I am using Chrome 76 latest version.
I checked my page speed in https://developers.google.com/speed/pagespeed/insights and it still shows to Defer offscreen images!
Not sure what exactly I have missed?
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
I answered a related question some time ago:
After some research I found that I was missing something on my images. Images should include dimension attributes
As mentioned here: https://web.dev/browser-level-image-lazy-loading/#images-should-include-dimension-attributes
While it's not necessary, it is desired or expected to specify the dimension attributes on your images because without dimensions specified, layout shifts can occur. Resulting in unexpected behavior.
The browser needs to know the dimensions of your images to reserve sufficient space on a page for them.
Related question: https://stackoverflow.com/a/64330480/10757314
I have the code below which if I test it on https://search.google.com/structured-data/testing-tool, I get an error
A value for the url field is required.
on the image element.
I tried placing the itemprop='url' attribute on the picture, source and img element but the error remains the same. How can I add the url property so Google accepts the structured data?
<li itemscope itemtype='http://schema.org/LocalBusiness'>
<div>
<div itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
<a href="http://www.example.com/venues/220/studio-54">
<picture>
<source itemprop='url' type='image/webp' data-srcset='/images/venues/medium/220_663_studio-54.webp'>
<img data-src="/images/venues/medium/220_663_studio-54.jpg"/>
</picture>
</a>
</div>
<div>
<h3><a href='http://www.example.com/venues/220/studio-54'>
<span itemprop="name">Studio-54</span></a></h3>
<div itemprop='address' itemscope itemtype='http://schema.org/PostalAddress'>
<a itemprop='addressLocality' href="http://www.example.com/vendors/venues/c/netherlands/north-holland/amsterdam">Amsterdam</a>, <span itemprop='addressRegion'>North-Holland</span>
</div>
</div>
</div>
</li>
See the Values section in the Microdata spec (Working Draft):
When adding the itemprop attribute to an img or source element, Microdata uses the value of the src attribute.
When adding the itemprop attribute to a picture element, Microdata uses the textContent of the element.
In your case, you might want to add a src attribute to the img element (which is required by HTML anyway, in addition to the alt attribute), and move the itemprop from source (which requires a srcset attribute) to img:
<img itemprop="url" src="/images/venues/medium/220_663_studio-54.jpg" data-src="/images/venues/medium/220_663_studio-54.jpg" alt="" />
If you want to keep the attributes like that (e.g., for lazy loading), you could use a link element to provide the URL of the image (browsers don’t load this):
<div itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
<a href='http://www.example.com/venues/220/studio-54'>
<picture>
<source type='image/webp' data-srcset='/images/venues/medium/220_663_studio-54.webp'>
<img data-src='/images/venues/medium/220_663_studio-54.jpg' />
</picture>
</a>
<link itemprop='url' href='/images/venues/medium/220_663_studio-54.webp' />
</div>
I made something with the HTML code and trying to validate it through w3.org website. It was showing the following error:
Error: Saw a start tag image.
From line 15, column 210; to line 15, column 290
="_blank"><image src="http://banglakitab.com/img/img_header.gif" height="48" width="128" /></a>
What could be wrong?
Image tag in html :
<img src="source_of_image" alt="alternate text" />
its not <image />.
Refer : HTML Images
Your image tag is not valid you should use img tag instead of image. And the image tag must have alternate (alt) property/attribute.
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
<img src="http://banglakitab.com/img/img_header.gif" height="48" width="128" alt="banglakitab" />