Vai al contenuto

Ways of preventing unwanted image loads in HTML; the ones that just work:

Ways of preventing unwanted image loads in HTML; the ones that just work:

HTML
1
<img loading="lazy" src="..."/> <!-- loads the image automatically only when in view; requires JavaScript enabled due to security standards  -->

HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!-- load an alternative image (even a void one?) based on <picture>, <source>, and media queries -->
<style>
@media (max-width: 768px) {
  img { display: none; }
}
</style>
<picture>
  <source media="(max-width: 768px)" srcset="..."/>
  <img src="..."/>
</picture>

HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!-- setting the image source directly with CSS as a background? means you can do whatever... just one of the many ways, others are bit spotty -->
<div id="img"></div>
<style>
#img {
  width: 88px; height: 31px;
}
@media (max-width: 100px) {
  #img { display: none; }
}
@media (max-width: 300px) {
  #img { background-image: url('small-screens.png'); }
}
@media (min-width: 300px) {
  #img { background-image: url('large-screens.png'); }
}
</style>

References:
* HTML Lazy loading: [[memos/4ZonJxgUJNkcnK9o6ajFYs]]
* Web performance: prevent wasteful hidden image requests: https://swimburger.net/blog/web/web-performance-prevent-wasteful-hidden-image-requests#solution-code
* Media Query & Asset Downloading Results: https://timkadlec.com/2012/04/media-query-asset-downloading-results/ — Tests and demos for alternative, unorthodox ways, not all of them work