After i add images in the gallery section, my web page became heavy
and the effect in others sections refuse to apply
i tried to resize the images but Nothing has changed
One solution could be to use lazy loading. With lazy loading the images will only load when they are in the viewport, so even if you have a lot of them they won't load immediately all at once.
To use it, just add the loading="lazy" attribute to an image element.
<img loading="lazy" src="" alt="">
Related
I have a website where images are loaded through <img src="..." />
One of these images is RSM's logo, however on the webpage it displays as this:
<img src="https://assets.clicksminuteper.net/bots/rsm/normal.svg" />
This happens for almost all SVGs on the page, except for simple, single path shapes.
What causes this, and what ways can I fix it?
Update: This bug only appears to happen on chromium based browsers. Those show 2 of the grey bars and not the third, as well as not rendering the background.
I'm using Thickbox to display videos on a website and the youtube video seems to be too large for the thickbox frame. I've tried decreasing the youtube video size but the thick box seems to follow the size of the video because no matter what I adjust the size to I always have this:
http://imgur.com/KJ2kJYr
Notice in the bottom right corner, the video goes outside the frame. Any suggestions are welcome.
Here is the html code for the video. Personal info has been removed (site name, youtube embed, etc.):
<a class="thickbox" href="//www.youtube.com/embed/XXXXXXXXX?rel=0&showinfo=0&controls=0&KeepThis=true&TB_iframe=true&height=400&width=600" title="XXXXXXXXX"><img src="http://www.XXXXXXXXXXX.org/campaign/wp-content/uploads/sites/59/2013/11/XXXXXXXXXX.png"/></a>
I would need the full code to give a complete answer, but based on my experience with other plugins:
Most plugins have very specific styles that are sometimes difficult to override. Give the video a "class" and set the width to width: 100% !important; (or whatever). This should override the defaults set in place by the plugin.
Do background images and embedded images take about the same time to load on a HTML page provided they are the same size? If I am to use the same image twice in a page - once as a background and once as a normal embedded image, which loads faster?
For making a website compatible with screen readers, what's the best way to include an image? Are background images read well by screen readers or do they simply ignore the background images?
Do background images and embedded images take about the same time to load on a HTML page provided they are the same size?
I would say yes, but I think it also depends on how they are loaded. There used to be a practise called image pre-loading. I never did speed tests personally to know if it was really benefitical.
For making a website compatible with screen readers, what's the best way to include an image? Are background images read well by screen readers or do they simply ignore the background images?
Screen readers do not announce that <body>, <div>, etc has a background image attached. There is no magical place for an alt attribute in this case. You need to keep in mind that you're keeping good contrast between your image and your text color. WebAIM has a great color contrast checker, in my opinion.
If you are using CSS to position text over an image that's used as background, so you can give it an alt, don't. That image probably should have a null alt (<img src="..." alt=""/>) anyhow.
If you use an image both as background AND as image (i.e. Using the same image twice) you technically only need to load that image once, assuming your images are properly cached...
That is once you loaded an image with a cache header, or that image is downloading, the browser will either load it from the cache or wait for that one image to finish loading.
As to whether background images and embedded images take about the same time to load. Let's get some context. As per google: https://developers.google.com/speed/articles/browser-paint-events
Finally, notice that each image itself renders progressively, so that
the the user begins to see the image content before the entire image
has finished loading. Modern browsers render images in HTML tags
progressively. By contrast, many browsers do not render images
specified using CSS background-image attributes progressively. To
enable progressive rendering of images, use an HTML tag instead
of a CSS background-image attribute.
So an image using the <img> tag will load faster and not hold up the DOM from being ready unlike an inline css background-image in older browsers which could slow things down.
However, the caveats with progressive rendering of an <img> are that, if your image is not fully loaded when the widow.onload event fires (which is almost always true for large images), it makes for a rather ugly progressive rendering, as well as causing a paint reflow when the image is set as responsive using auto-width and/or 100% width.
To make inline images load much faster and in a much nicer way, what I did is:
First, preload them extremely early as css backgrounds in AND on the <head> of the page. You can start preloading some or all of your css images too that way, before your css file or body have been parsed.
Second, to go around the other drawbacks, I use a javascript lazy-load-ish method to hide the image on the interactive event before the window loads.
And finally, bring the image as a fade-in once the css-called image has finished loading.
You can see a live example at: http://www.nptr.net/1614
So while an embedded image is best. If you care about the best speed for your page load, I highly recommend to preload large images early via css background(s) in the head, especially if you must use them as backgrounds right away.
That is because otherwise, images in your body will have to wait until both your css file(s) and synchronous javascript(s) are fully received, until the browser actually starts retrieving them. Which generally incurs a 100 to 500ms delay, with the worst delay being on the first page load.
Updated: Google Images does not use <canvas> any more.
I noticed Google Images is using canvas to render images. <img> is used as a fallback for browsers that does not support canvas.
<a class="rg_l" style="..." href="...">
<canvas
id="cvs_NcG8skPEDu7FWM:b"
style="display:block"
width="83"
height="113">
</canvas>
<img
class="rg_i"
id="NcG8skPEDu7FWM:b"
data-src="http://t0.gstatic.com/images?q=tbn:ANd9GcQCB5NEbEUQhtmFI098HLSkfmoHTBtUfERUNkNKrhgFbtFBxZXY9ejXn_pUGg"
height="113"
width="83"
style="width:83px;height:113px"
onload="google.isr.fillCanvas(this);google.stb.csi.onTbn(0, this)"
src="http://t0.gstatic.com/images?q=tbn:ANd9GcQCB5NEbEUQhtmFI098HLSkfmoHTBtUfERUNkNKrhgFbtFBxZXY9ejXn_pUGg">
</a>
What's the point of using <canvas> rather than <img>?
Maybe it gives them more control over the contents of an image.
You can analyze color range of an image, prevailing color, even its content (given smart algorithm).
You can also perform per-pixel modifications — change brightness, contrast, gamma, etc. (not sure why they would want to do this; perhaps for some future use).
You can also rotate an image (on browsers that support canvas but not CSS transformations; see, for example, this demo of my fabric.js).
Several mobile devices have a limit on the number of image resources on one page. For example, Mobile Safari stops loading images after ± 6.5 MB of images have been loaded.
As mentioned in another answer, by using <canvas> instead of several <img> elements with external files as their src, Google can load all the images in one request (which is obviously better for performance) — but it also works around this limitation.
You can easily load all the images in one request or even embed their source in the page without inflating the source with base64.
You can make copies of images in JS without waiting for the cache.
maybe this was done because of too slow scrolling / some rendering issues on a page with lots of pictures?
Much like how the video tag can provide multiple source attributes so an mp4 video can fall back to an ogg video, I would like to get an svg image to fall back to an png image.
At the time of the question it wasn't possible. But now it is OK to do like this:
<picture>
<source srcset="mdn-logo.svg" type="image/svg+xml">
<img src="mdn-logo.png" alt="MDN">
</picture>
See docs on MDN
No, it cannot.
However, you can fake it using CSS background images.
To avoid displaying the broken image glyph, you might want to not use an <img> tag at all and instead use two nested elements with different background images. (Note that that would hurt accessibility)
There's a post here that might help: Fallback image and timeout - External Content. Javascript
It offers a few javascript options.
Using a background image works well, but you will have to know what the dimensions of your images are. If you don't know then it may be tricky.
Though this is probably not what you wanted, it's worth mentioning that you can specify different resolutions for retina displays:
<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x,
image-3x.png 3x, image-4x.png 4x">
Just include the svg as <object> and put <img> inside of it.
<object data='image.svg'>
<img src='image.png'>
</object>
That should work. The png image will only be shown when it's impossible to display svg.
Simple answer... No.