Ciao, oggi parleremo di immagini.
Ci sono molti tag in HTML e la maggior parte di loro sono piuttosto auto-esplicativi.
Ma il tag immagine è uno in cui vogliamo davvero esplorarlo,
per assicurarci che lo stai usando al miglior scopo possibile.
Quindi, a questo punto, avete sentito parlare di molti tag diversi.
Ma le immagini sono quelle in cui hai davvero bisogno di capire
quali sono i diversi attributi.
Ci sono molti tipi di file diversi che sono supportati da HTML.
I più comuni sono: JPEG, GIF e PNG, e li vedrai un bel po '.
Ci sono anche SVG e BMP.
Ci sono opzioni aggiuntive.
La cosa più importante è che, indipendentemente dal tipo di file che usi,
devi includere le diverse estensioni di file.
Questo è il .jpg, il .gif, il .png.
L' ulteriore cosa da capire è che quando qualcuno guarda la tua pagina,
ogni singola immagine che hai sulla tua pagina deve essere scaricata, quindi la
dimensione può davvero essere un fattore.
Se ti aspetti che la maggior parte delle persone che visualizzano la tua pagina la guardi
da un telefono cellulare,
potresti pensare di usare file di dimensioni più piccole, perché ogni singola immagine
richiede una richiesta HTTP per essere caricata sul browser.
Quindi, quando pensiamo alle dimensioni delle immagini, la maggior parte delle persone pensa,
solo un po ', alla visuale quanto è grande sullo schermo.
Ma in informatica, parliamo molto di più delle dimensioni dei pixel.
Per impostazione predefinita,
il browser aprirà la tua immagine nella stessa dimensione esatta che è stata salvata.
Ed è davvero, davvero raro che questa dimensione fosse ottimale.
Probabilmente siete andati tutti in un sito dove siete arrivati ad esso e
l'immagine era davvero piccola e non siete in grado di renderlo più grande.
O forse,
quello che trovo ancora più fastidioso, è quando l'immagine occupa l'intero schermo e
sei costretto a scorrere cercando di vedere il tutto.
Quindi vi mostrerò due soluzioni rapide per cambiare le dimensioni dell'immagine.
Il primo è quello di cambiare il file effettivo, e il secondo è utilizzare gli
attributi larghezza e altezza per il tag immagine.
Ora, se hai intenzione di usare e editor per cambiare il tuo file,
quello che devi capire è che gli editor cambiano queste immagini in modo permanente.
Funziona solo su quelli che chiamo file locali.
È possibile modificare solo le immagini presenti sul computer.
Se stai tentando di utilizzare un'immagine che hai trovato altrove sul Web e
ti stai collegando, non puoi modificare le dimensioni in modo permanente.
Quindi, se usi un Mac,
c'è un software integrato chiamato Anteprima che puoi usare per cambiare le dimensioni.
E se stai usando Windows, c'è anche un programma integrato chiamato Paint.
Uno di questi offre la possibilità di ridimensionare le immagini.
Tuttavia, proprio come nota a margine, nessuno di questi è la
scelta migliore se si vuole davvero entrare in grafica di immagini diverse.
Quello che la maggior parte di noi tende a fare è usare gli attributi.
Ora, una delle cose di cui parlo e
tutti parlano è l'importanza di mantenere separati stile e contenuti.
E cerco davvero di incoraggiare le persone a non inserire alcun tipo di
attributi di stile nel loro codice.
Tuttavia, il tag immagine tende ad essere un'eccezione,
perché include sia un attributo width che height.
Quindi andiamo avanti e passiamo, e
ti mostrerò una foto del sito quando avremo finito.
La prima opzione sarebbe solo usare la dimensione predefinita dell'immagine.
Ho il mio tag immagine e ho i miei due attributi richiesti.
Fonte, dove è possibile trovare l'immagine, e il testo alternativo.
L' opzione successiva sarebbe quella di usare la larghezza in pixel, quindi
in questo caso ho aggiunto l'attributo chiamato width e l'ho codificato.
E' cosi' che lo chiami quando gli dai una taglia che vuoi che sia sempre.
E l'ho codificato a 500 pixel.
Potresti notare che ho impostato solo la larghezza e non ho impostato l'altezza.
Va bene cosi'.
Il browser capirà automaticamente quanto dovrebbe regolare l'altezza in modo
che rimanga proporzionale alla larghezza.
L' opzione successiva è usare larghezza e altezza.
Lo fai se vuoi assicurarti che la tua foto si inserisca in
una scatola di dimensioni esatte.
Questo è davvero bello per il dimensionamento, ma non
sempre sembra come ci si aspetta che sembri, e lo vedremo in un secondo.
L' ultima opzione, che potrebbe essere l'opzione migliore, è usare le percentuali.
In questo caso, se noti, ho larghezza = 50%.
Ciò significa, prendere quanto grande sarebbe stata l'immagine, e
ridurla del 50%.
Ora, man mano che andiamo avanti nella programmazione e nei CSS, capirai che è il 50%
di quello che dovrebbe essere, non significa necessariamente la dimensione originale dell'immagine.
Dipende se sei all'interno di un contenitore.
Quindi qui ho avuto ognuna delle opzioni, l'impostazione predefinita, la larghezza, la larghezza e
l'altezza e la percentuale.
Quindi andiamo avanti e diamo un'occhiata a come sembra.
Quindi quello che puoi vedere qui sono quelle quattro diverse opzioni che avevo per
visualizzare la mia immagine.
In alto, ho la mia dimensione predefinita dell'immagine.
Questo era quanto grande era la foto quando l'ho scattata.
Una taglia in basso, e
puoi vedere questo è dove ho codificato la larghezza dell'immagine.
Ho impostato la larghezza su 500 pixel.
La mia casa sembra ancora perfettamente bella, e tutto è proporzionale.
La terza opzione è l'immagine distorta.
Questo è dove ho hardcoded sia l'altezza che la larghezza, e
non ho davvero pensato molto a come avrebbero agito proporzionalmente.
Quindi facendo questo puoi vedere che è un po 'schiacciato, e
non la migliore immagine.
Quest' ultimo è uno che ho impostato proporzionalmente, e
puoi vedere che è circa la metà della dimensione della finestra del browser.
Quello che voglio che tu guardi ora è quello che succede quando ridimensiono la finestra.
Così come vado qui, si può vedere che le prime tre immagini rimangono
esattamente della stessa dimensione, ma quella inferiore in realtà crescerà o si ridurrà.
E questo è lo stesso se lo faccio più piccolo e ricarico la pagina.
Quindi, pensare a cose diverse lungo questa linea è come vuoi che la tua pagina
appaia quando le persone potrebbero guardare uno schermo di grandi dimensioni o su uno schermo mobile.
E' qualcosa a cui vuoi pensare.
L' ultima cosa che voglio farti notare, di cui parlerò tra
un attimo, è questa piccola foto che purtroppo è
molto difficile da vedere e non c'è un buon modo per farlo saltare in aria.
Ma voglio parlarti dell'aggiunta di immagini nella barra del titolo.
Quindi, se vuoi inserire una favicon nel titolo della tua pagina web,
è leggermente diverso rispetto all'utilizzo di un'immagine normale.
Invece, questo codice deve andare nella sezione head del tuo codice, non nel corpo.
Quello che fai è che entrerai in realtà e
includerai un link che dice che è un tipo di link icona.
Stiamo usando un'immagine PNG.
E poi metti il link all'immagine stessa.
Come nota a margine, non puoi usare JPEG o GIF per i loghi.
Deve essere un'immagine icona speciale o un.png.
Infine, torniamo a parlare di testo alternativo,
l'attributo che vuoi aggiungere a tutte le tue immagini.
Qual è lo scopo di questo, e perché è qualcosa di cui abbiamo bisogno?
Beh, quello che fa è fornire un'alternativa testuale ai contenuti non testuali.
Quindi, ogni volta che hai un'immagine, vuoi assicurarti
che le persone che non riescono a vedere l'immagine possano ancora capire il contenuto dietro di essa.
Quindi potrebbe essere letto dagli screen reader.
A volte viene visualizzato al posto delle immagini, quindi se il file si rompe,
puoi ancora vedere una piccola nota che dice cosa dovrebbero vedere.
Infine, fornisce anche un significato semantico per i motori di ricerca.
Quindi, se metti davvero un buon testo alt nella tua pagina,
aiuterà i motori di ricerca a capire qual è il contenuto della tua pagina.
Quindi, come creiamo un buon testo alt?
Ci sono davvero quattro cose che vuoi cercare subito.
Vuoi essere estremamente preciso.
Vuoi essere succinta.
Non vogliamo essere ridondanti.
E non vogliamo includere titoli come foto di o grafica di.
Quindi il primo, sii preciso.
E' piuttosto auto-esplicativo.
Metti solo cose che definiscono specificamente l'immagine che stai guardando.
Per essere succinti, significa che non andare avanti e indietro.
Davvero, dovrebbe essere una rapida idea di cosa si tratti della foto.
Quando parliamo di non essere ridondante, quello che stiamo dicendo è,
non includere testo alternativo che è già nel contenuto della pagina.
Se hai l'immagine, e in un paragrafo sotto di essa, la
descrivi in dettaglio, non inserire lo stesso contenuto nel testo alternativo.
E infine, quello di non includere l'immagine di,
grafica di, che in realtà torna solo ad essere solo succinta.
Di tanto in tanto va bene lasciare vuoto il testo alt.
Quindi, se hai immagini che sono solo decorative, loghi, cose lungo quella linea,
puoi andare avanti e basta mettere alt uguale e poi le virgolette doppie.
Ma è molto importante che non salti l'attributo alt tutti insieme.
Il problema di percorrere quella strada, è che in realtà non fai sapere alla gente se
stavi pensando o meno all'accessibilità.
Non sanno se manca il testo alt perché non è informativo o
perché hai appena dimenticato di inserirlo.
Ok, allora andiamo a rivedere alcune delle cose che sappiamo sulle immagini.
Uno, le estensioni dei file sono incredibilmente importanti.
Devi assicurarti che corrispondano al formato del file.
Il nome del file per la tua immagine è qualcosa che vorrai
mantenere molto breve e descrittivo in modo da poter evitare di usare errori di battitura.
E infine i percorsi dei file, o dove tutta quella lunga cosa
che metti nella fonte in cui hai immagini/immagini/estensione.
Vuoi assicurarti di scrivere correttamente anche quelli.
Se è possibile eseguire queste tre operazioni, sarà più facile per
voi utilizzare correttamente le immagini.
E per ora, andiamo avanti e basta modellare l'altezza e la
larghezza proprio nel codice HTML stesso.
Anche se parlo spesso di separare i contenuti dallo stile, è
pratica molto comune andare avanti e incorporare questi due quando si eseguono immagini.