Hi there i have played around with lightbox now for a long time but there is one problem. I got an image size of 1.80mb and 1608 x 1080. Now this image will not load what so ever. My question is , is it because its to big in file size and i need to compress it to something like 30.2 kb or am i doing something wrong in lightbox? Just to be clear this is when you click on the thumbnail, it just keeps on loading.
My html:
<div class = "lightbox">
<img src="images/image4t.jpg" />
<img src="images/image5t.jpg" />
<img src="images/image6t.jpg" />
<img src="images/image7t.jpg" />
<img src="images/image8t.jpg" />
<img src="images/image9t.jpg" />
</div>
If you need anything else please feel free to ask. Thanks again for all the help
Related
Good morning to everyone,
After a series of attempts and research I was able to find this example that definitively solves the possibility of creating a multimedia gallery (images, selfhosted or not videos, iframe and so on).
https://codepen.io/makshh/pen/ONMVMm
It's based on photoswipe then I should insert a description in the image. I read the documentation and inserted the tag correctly but it's previewed below the thumbnail and not in the slider.
Eg:
<div class="col-md-3">
<div class="photoswipe-item">
<a href="https://www.w3schools.com/css/img_fjords.jpg">
<img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Image description" class="img-responsive">
</a>
<figcaption>dummy description</figcaption>
</div>
</div>
At this point I tried to encapsulate (as per documentation https://photoswipe.com/documentation/getting-started.html) the image in the tag but nothing to do.
Do you have any idea how to correctly insert the caption for each image / video?
Thank You in advance anyone who can help me
Regards
Ale
I'm having trouble understanding how to get images to display on this ASP.net project. I'm used to using tags, but am having trouble with the paths.
I have tried all of these solutions and none cause the image to display:
<img src="~/Images/mask.png" alt="Sample Photo" />
<img src="~/Images/mask.png" alt="Sample Photo" runat="server" />
<img src="../Images/mask.png" alt="Sample Photo" />
<img src="Images/mask.png" alt="Sample Photo" />
<img src="../Images/mask.png" alt="Sample Photo" />
The Images folder is in the project root. I'm using Bootstrap 4.0 and no other CSS.
If I set the src to a link (to Imgur, for example), the image displays. This makes me think it's an issue with the path, but I don't know what it could be. I think I've tried every variation that I came across when googling.
Any guidance would be really appreciated, and please let me know if I need to elaborate.
Place images in wwwroot folder.Details in documentation
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
Here are several small icons on the page that looks the same, but display different information.
Classes message1, message2, .., messageN are used for ajax to display a message (could be the same on the same page, so classes instead of ids are used).
I can create css class .defaultcursor{cursor:default;} to improve the code below. Are there any better idea so the code takes as few space (bytes) as possible with the same functionality?
<img src="help.png" alt="" />
...
<img src="help.png" alt="" />
...
<img src="help.png" alt="" />
...
<img src="help.png" alt="" />
Thank you.
I have a page in the cms part of my website (javascript is enabled and can force a browser choice), it is a calendar with lots of images:
<img src='1.gif' />
<img src='1.gif' />
<img src='1.gif' />
<img src='1.gif' />
<img src='2.gif' />
<img src='2.gif' />
<img src='2.gif' />
<img src='2.gif' />
the same image can be used over 250 times, with about 1000-1500 images on the page.
Is the browser smart enough to figure out that these are all the same image, or is there some JavaScript/jQuery trickery that I can use to improve performance?
I think there is a subtlety to the question that has not been addressed. It's the same image on the same page. #Alex's answer is more appropriate for case of the same image across multiple pages.
When you are loading multiple copies of the same image within one page, the browser shouldn't care about cache/expiry headers. It should just re-use the image it loaded.
For this DOM fragment:
<img src='1.gif' />
<img src='1.gif' />
Looking at the network tab in Chrome, Firefox or IE9, you can see that there is only one call to the server by the browser. If the image has expired then the image is returned otherwise you'll get a 304 Not modified.
In short there should be no overhead from having a hundred copies of the same image on the same page, and the expiry headers don't matter.
If they have the same real path, then the browser will cache them, unless you have aggressive anti cache headers, such as expiry headers in the past.