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.
Related
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.
Use Case: displaying info in a subset window of the SAME page the user is in. For example. I have a list on the left side. On the right side is details of a record based on what data point is clicked on the left. Currently I am trying to use an iframe tag. Both parent and target iframe are content from my single same domain/site i.e. there is no external sources I'm referencing.
I've had this iframe working in the past, then one day I went to check it out and it was not working as it should.
So the parent page has a list of students (in the left column).
The target iframe (right column) is supposed to show the students details one the students link is clicked in the parent page.
Instead what it's doing now, is opening a whole new tab in a separate window with the students details.
UPDATE: Jan16, 2018
So i tested it in four browsers. Only Safari apparently supports the inwindow target render. Chrome, Opera and Firefox all opened new tabs - not what i want. What gives? Here is the full html (I realized I should grab the source vs what my front end html looks like in Wordpress... sorry).
<p><iframe id="ifrm" src="http://example/wp-admin/admin.php?page=wpbc&wh_approved&wh_is_new=1&wh_booking_date=3&view_mode=vm_listing" width="100%" height="400">Your school has not setup a booking listings view. Please speak to your school or contact admin to have it set up.
</iframe></p>
<p>Welcome Instructor. This is your personal Dashboard.
<p><strong>School Name:</strong> School name <br />
<strong>Your ID:</strong> instructor3</p>
<hr />
<div class="fivecol-one"><strong>Student ID:</strong> user<br />
<a href="http://example/frm_display/Instructor-dashboard-iframe?student=453369" target="myiframe">View Details in window<br />
</a></p>
<hr />
<p> <strong>Student ID:</strong> jan17<br />
<a href="http://example/frm_display/Instructor-dashboard-iframe?student=45988" target="myiframe">View Details in window<br />
</a></p>
<hr />
<p> <strong>Student ID:</strong> user2<br />
<a href="http://example/frm_display/Instructor-dashboard-iframe?student=44499" target="myiframe">View Details in window<br />
</a></p>
<hr />
<p> <strong>Student ID:</strong> jstudent<br />
<a href="http://example/frm_display/Instructor-dashboard-iframe?student=464428" target="myiframe">View Details in window<br />
</a></p>
<hr />
<p> </p>
</div>
<div class="fivecol-four last">
<iframe id="myiframe" scrolling="yes" frameborder="1" src="http://example/frm_display/Instructor-dashboard-iframe/" height="500px" width="100%">
</div>
<div class="clear"></div>
So you can see that I have named my iframe id="myiframe" and my target="myiframe". I did notice that i had forgotten to close the iframe tag in the target, however, that did not seem to make a difference. I cleared my cache and refreshed my pages.
As mentioned it's working in Safari desktop only. HOWEVER, (and this is weird) in mobile, it's working in ALL browsers! (i removed my explicative..what was i thinking)
I don't know if this is applicable, but this site is hosted in Wordpress and using formidable forms. In particular the iframe is displaying what's called in formidable a 'view' i.e. a special page that shows data from formidable. It's not formally a 'page' in the Wordpress sense of the meaning. Hence I'm wondering if for some reason the iframe tag is getting confused. One suggestion was to use
in the header of the iframe page. And that's when i realized i can't apparently do that because as far as I know a formidable 'view' does not have a header?
HELP!!! please.
this is embarrassing.
I was simply missing a name attribute
name="myIframe"
wow... sorry for posting bone head move, but hope it can help someone.
Need to be able to either use a link or display an image off a remote server that does not allow access over HTTP.
For example, I can type file://remoteserver/path/to/img.jpg in my address bar and the image will display, but none of these work:
<img src="//remoteserver/path/to/img.jpg" />
<img src="file://remoteserver/path/to/img.jpg" />
<a href="//remoteserver/path/to/img.jpg" />
<a href="file://remoteserver/path/to/img.jpg" />
Currently I have to just output file://remoteserver/path/to/img.jpg and have the user copy/paste into the address bar which is pretty bad. Preferably a cross-browser solution, but anything is better than what I have. Any suggestions?
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">
I have a web page in which i need to show SVG logos. This is quite easily possible in the latest browsers, but I need to make it compatible with older browsers too. Some how I need to display an alternate image to the user if the browser does not support SVG.
I have come across a method called HTTP-content negotiation, but how can I implement it to get the desired result?
I tried the <object> tag but it does not seem to work with IE and is very hard to style when tried with Firefox.
I'd implement this client side with the help of Modernizr. Given a markup such as...
<!-- Start with bitmaps because
they will show up in all browsers even
if javascript is not enabled -->
<img src="logo1.png" class="logo" />
<img src="logo2.png" class="logo" />
<img src="logo3.png" class="logo" />
<img src="logo4.png" class="logo" />
You can do...
$(document).ready(function(){
if (Modernizr.svg){
$('.logo').each(function(){
var src = $(this).attr("src");
var svg = src.substr(0, src.lastIndexOf('.')) + ".svg";
$(this).attr("src", svg)
})
}
})