File immagine spezzato o mancante

La prima icona rappresentativa del file immagine spezzato o mancante, disegnata da Marsh Chamberlain per il corredo di Netscape 0.91 ( 1994 ).



La seconda icona.

1

Con le tecnologie hardware e software odierne è un evento sempre più inusuale, tuttavia può capitare di imbattersi in una odiosa icona che attesta il fallito caricamente di un'immagine all'interno della pagina-web corrente.
Questo evento può occorrere per diversi motivi :

* il file contiene un errore;
* le dimensioni del file sono così grandi da rendere eccessivamente lento il caricamento nella pagina, e allora il browser sospende l'azione;
* il file non si trova nella cartella in cui dovrebbe essere;
* il file è stato rinominato e pertanto l'URL esplicitato nel codice è dissimile dall'indirizzo reale dell'immagine;
* il formato del file non è rappresentabile dal browser;
* ...

Infatti, a me è capitato di verificare che Vivaldi non visualizza le immagini AVIF e così ho ottenuto l'icona [1]:




2

Pare che la prima icona rappresentativa del file immagine spezzato o mancante sia stata disegnata dal grafico Marsh Chamberlain per il corredo del browser Netscape 0.91 [2], distribuito nell'ottobre del 1994 [3].




Snappata della pagina home del sito personale di Marsh Chamberlain, prima immagine della slide.

3

Come gestire questa categoria di errore ?

Ovviamente, il primo passo è controllare la probità dell'URL dell'immagine inserito nel codice del sito chiamante il file.
Nel caso in cui l'indirizzo digitato sia corretto, occorre valutare la causa della mancata visualizzazione.
Le soluzioni possono essere – ad esempio – la ripetizione dell'upload del file e/o la conversione dell'immagine in un formato più leggero.

Ma se la visualizzazione è impedita dalle limitazioni di un browser – ad esempio il formato del file non è supportato, come visto – si può solo avvisare l'utente con gentilezza delle carenze del programma ch'egli usa per la navigazione.
A tale scopo, può essere utile il vetusto ma sempre disponibile attributo alt="" del tag <img> [4].
La sintassi è :

<img src="URL sorgente" alt="testo descrittivo">

3.1

Pertanto, ho inserito altrettanti attributi ai tag delle immagini nel mio post dedicato al formato grafico AVIF :

<div style="text-align: justify;"> <!----> <!--immagine 01--> <!----> <span style="font-size: 85%;"> <a href="https://www.bufalo70.it/Odb_Tech/FFO/2023_06_09__01__FFO__AVIF/2023_06_09__01__FFO__AVIF__01__FULL.avif" style="cursor: move;" target="_blank" title="clicca per l'immagine ingrandita"><img src="https://www.bufalo70.it/Odb_Tech/FFO/2023_06_09__01__FFO__AVIF/2023_06_09__01__FFO__AVIF__01__FULL.avif" style="width: 500px;" alt="Questa è un'immagine in formato AVIF → SE leggi questo messaggio, il tuo browser non supporta questo formato."/></a> </span> <!----> <!--fine immagine 01--> <!----> <br /> <br /> <!----> <!--immagine 02--> <!----> <span style="font-size: 85%;"> <a href="https://www.bufalo70.it/Odb_Tech/FFO/2023_06_09__01__FFO__AVIF/2023_06_09__01__FFO__AVIF__02__FULL.avif" style="cursor: move;" target="_blank" title="clicca per l'immagine ingrandita"><img src="https://www.bufalo70.it/Odb_Tech/FFO/2023_06_09__01__FFO__AVIF/2023_06_09__01__FFO__AVIF__02__FULL.avif" style="width: 500px;" alt="Questa è un'mmagine in formato AVIF → SE leggi questo messaggio, il tuo browser non supporta questo formato."/></a> <br /> <br /> <i>Immagini in formato AVIF tratte da una directory pubblica accessibile nel dominio di Netflix</i> [<a href="http://download.opencontent.netflix.com/?prefix=AV1/Chimera/AVIF/" target="_blank">1</a>]. </span> <!----> <!--fine immagine 02--> <!---->

Il risultato è questo :




3.2

Bisogna tenere a mente che l'attributo alt="" è importante anche per altri motivi :

* l'ottimizzazione SEO della pagina-web [5];
* l'accessibilità assistita ai contenuti della pagina per le persone disabili ( ipovedenti )[6].


4

Certo, esteticamente il risultato non fa impazzire ... è possibile, però, elaborare anche questo aspetto :

* nascondere l'icona del file spezzato o mancante [7];
* usare un'icona diversa [8];
ad esempio, sul sito Flaticon sono disponibili decine di belle reinterpretazioni grafiche della storica icona [9].




Snappata delle icone “broken image” ( immagine spezzata ) disponibili sul sito Flaticon.

=

Note

[1] : vedi paragrafo 2.1 in ''AVIF'', Marco Poli, Correndo sull'Orlo del boccale, 10 giugno 2023, [ https://odbtech.blogspot.com/2023/06/avif.html ].
[2] : ''Who Designed Clippy? The History Behind Four Legends Of Early UI'', Kelsey Campbell-Dollaghan, Gizmodo, 9 luglio 2013, [ https://www.gizmodo.com.au/2013/07/who-designed-clippy-the-history-behind-four-legends-of-early-ui/ ];
vedi : ''Who designed the "broken image" icons?'', Quora, [ https://www.quora.com/Who-designed-the-broken-image-icons ];
vedi : Dataglyph, sito-web di Marsh Chamberlain, [ https://dataglyph.com/ ].
[3] : ''Netscape 0.91 Beta'', Internet Archive, [ https://archive.org/details/n32e091 ];
vedi : ''Netscape Navigator 0.91 (10/1994) on Windows XP!'', Connor's tech stuff and more, YouTube, 22 settembre 2020, [ https://www.youtube.com/watch?v=-uXbsTwzPz0 ].
[4] : ''HTML <img> alt Attribute'', W3Schools, [ https://www.w3schools.com/tags/att_img_alt.asp ];
vedi : ''Img HTML: inserire le immagini'', Andrea Marzilli, HMTL.it, 23 dicembre 2016, [ https://www.html.it/pag/16051/inserire-le-immagini/ ].
[5] : vedi ''Ottimizzazione SEO della pagina web'' in ''Testo alternativo delle immagini: cos’è e come si usa sulle pagine web'', Riccardo Esposito, My Social Web, 13 maggio 2019, [ https://www.mysocialweb.it/tag-alt/#Ottimizzazione_SEO_della_pagina_web ].
[6] : ''Gestire correttamente l'accessibilità delle immagini con "alt"'', Riccardo Degni, HTML.it, 12 novembre 2018, [ https://www.html.it/magazine/gestire-correttamente-laccessibilita-delle-immagini-con-alt/ ].
[7] : ''How to hide “Image not found” icon when source image is not found?'', chitrankmishra, GeeksforGeeks, [ https://www.geeksforgeeks.org/how-to-hide-image-not-found-icon-when-source-image-is-not-found/ ].
[8] : ''Use Your Own Custom Broken Image Icon For Your Website'', Andreas Wik, 4 dicembre 2018, [ https://awik.io/use-custom-broken-image-icon-website/ ].
[9] : ''Broken image Icons'', Flaticon, [ https://www.flaticon.com/free-icons/broken-image ].

[ ... ]