I'm trying to show several images into my website in a lazy way, and I tried two options:
OPTION 1:
<img class="lazyload" loading="lazy" data-src="myimage" width="250" height="225" title="This is an image">
OPTION 2:
<img class="lazyload" loading="lazy" src="fuzzy.jpg" data-src="myimage.jpg" width="250" height="225" title="This is an image">
Both works ok, and 'myimage.jpg' takes a bit to be loaded. However, with the first one the browser shows, before the definitive loading, the ugly "no images" icon. And with the second one, I spend resources loading 'fuzzy.jpg' image. Yes it's just 5-kb size, but I wondered if there was a SEO-friendly method to show just (e.g) a 'light blue' rectangle created by the browser with a sort of CSS background-color property.
You can inline SVG images without the need for a request. Meaning they will be loaded with initial HTML and don't take up extra resources. You can make it even more complex if you wish (in terms of what is shown), as SVG is extremely lightweight. How to inline SVG in the image, and other stuff
Edit: You can inline regular images as well with Data URLs if you wish. But it is not generally practiced.
Related
What is meant by Images must have alternate text: Element has no title attribute
I had created img tag but developer tools gives me a warning but i can't understand what that means.
Affected resources
<img src="./img/twitter.png">
This has to do with screen readers. Screen readers have no way of translating an image into words that gets read to the user, even if the image only consists of text. As a result, it's necessary for images to have short, descriptive alt text so screen reader users clearly understand the image's contents and purpose.
There are 3 ways to give an image alternate text:
Using an alt attribute i.e. <img alt="drawing of a cat" src="...">
Using an aria-label i.e. <img aria-label="drawing of a cat" src="...">
Using an aria-labelledby attribute i.e. <img arialabelledby="someID" src="..."
The alt attribute is needed when the picture is not available or the user turned all pictures off in his/her browser. It's necessary to include this attribute to your img elements.
<img src=".." alt="Alternative text" width="200" height="100" aria-label="For screen readers" />
Use alternate txt for img tag like this : <img src="./img/twitter.png" alt="tweetImg"> .
As it is important, if there is slow connection the alternate txt will be visible or due to some error your image don't show up .
The HTMLImageElement property alt provides fallback (alternate) text to display when the image specified by the element is not loaded.
This may be the case because of an error, because the user has disabled the loading of images, or because the image hasn't finished loading yet.
See this to read more about alt
I'm trying to update my company's website to be more ADA friendly by ensuring all images have alt-text assigned. However, when I add alt text on the Wordpress CMS, I'm not able to view it in the HTML.
Please see attached screenshots for reference.
I would greatly appreciate any help that any one can give me on where to look on the server and what to add to ensure that my alt-text will be displayed.
This is the code snippet for the icon I reference in the screenshot:
<img data-src="https://applecareurgentcare.com/wp-content/uploads/2020/04/apple-care-laptop.png" class=" lazyloaded" src="https://applecareurgentcare.com/wp-content/uploads/2020/04/apple-care-laptop.png">
Screen shot of alt text added in wordpress media library
Well there are two ways of doing this, when you have the attachment ID. I am going to answer with the best and recommended way.
Use the function wp_get_attachment_image from WordPress core.
You can use it in this way.
echo wp_get_attachment_image( 49, 'thumbnail' );
Where 49 is the id of the image and and thumbnail is the size.
Output:
<img width="150"
height="150"
src="http://checkout.io/wp-content/uploads/2021/06/profile-150x150.jpg"
class="attachment-thumbnail size-thumbnail"
alt="Test Alt Text"
loading="lazy"
srcset="http://checkout.io/wp-content/uploads/2021/06/profile-150x150.jpg 150w, http://checkout.io/wp-content/uploads/2021/06/profile-300x300.jpg 300w, http://checkout.io/wp-content/uploads/2021/06/profile-60x60.jpg 60w, http://checkout.io/wp-content/uploads/2021/06/profile-110x110.jpg 110w, http://checkout.io/wp-content/uploads/2021/06/profile-100x100.jpg 100w, http://checkout.io/wp-content/uploads/2021/06/profile.jpg 538w"
sizes="(max-width: 150px) 100vw, 150px">
Benefits of it.
You get your alt text for your attachment.
You get loading="lazy" which is a recent update in WordPress.
You get srcset.
As this is a WordPress core function you will be automatically be compatible with all the image feature updates that comes, be it a SEO or a performance update.
Updating code and optimizing site speed so trying to change this simple html rollover effect:
<img src="img1.jpg" onmouseover="this.src='img2.jpg'" onmouseout="this.src='img1.jpg'">
To something along the lines of this:
<picture>
<source srcset="img1.webp" type="image/webp" onmouseover="this.src='img2.webp'" onmouseout="this.src='img1.webp'">
<source srcset="img1.jpg" type="image/jpeg" onmouseover="this.src='img2.jpg'" onmouseout="this.src='img1.jpg'">
<img src="img1.jpg" onmouseover="this.src='img2.jpg'" onmouseout="this.src='img1.jpg'">
</picture>
I didn't really expect the latter to work, but am mentally blocked as to the correct approach for this basic effect so the browser will access the appropriate image format.
Assuming one is already using Modernizr js, here is one possible solution using CSS & HTML:
.webp .rollover{
background:url("/img3/img1.webp")
}
.webp .rollover:hover{
background:url("/img3/img2.webp")
}
.no-webp .rollover{
background:url("/img3/img1.jpg")
}
.no-webp .rollover:hover{
background:url("/img3/img2.jpg")
}
<div class="rollover"></div>
I know there are other solutions as well, but this one worked for me.
One downside of this approach is there is a lag while img2.xxx is loaded 'onHover'. However, this also means img2 is not explicitly 'preloaded', hence speeding up overall page download time. (One could finesse this too).
I have a basic custom Pin it button. This picks up images inline to the page, but it's not picking up images using the HTML5 picture element with srcset.
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png" />
Here's an example of the picture element in use, where the button is not working:
<picture>
<img srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/coffee5.jpg">
</picture>
A very stripped down demo to play with that illustrates the problem: http://codepen.io/michaelpumo/pen/eZyddp
Any ideas?
Update: I might actually have to add that my usecase is a bit more complicated than this. The above is a simplified / stripped down version to illustrate the point. I'm lazy loading these too you see.
Please use the following. It works.
<picture>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/coffee5.jpg" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/coffee5.jpg" data-pin-description="Hello World">
</picture>
I thought src and description should be there for Pinterest.
I have a product page that uses Microdata. At the moment the itemprop="image" attribute is specified on the first thumbnail from my thumbnail gallery. What I'd like to do is specify it for the high-res image I have.
The trouble is, that's not actually displayed on the page, it's loaded via JavaScript using a lighbox. I know I can do something like:
<img itemprop="image" src="/img/high-res.jp" style="display:none" />
and the image won't show and it's tagged as the product image. But, of course the image is still download.
Any way I can specify itemprop="image" on an image but not actually download the image?
I tried changing <img> to <span> but the testing tool didn't recognise it.
Perhaps the link element would be useful here - it's not displayed in the rendered HTML, but it is available in the HTML source and therefore available to JavaScript:
<link itemprop="image" href="/img/high-res.jpg">