Tīmeklī ir izplatīti attēlu tipu piemēri GIF, JPG, un PNG. SVG faili. Šie dažādie formāti piedāvā tīmekļa dizaineriem dažādas iespējas, kā optimizēt vietnes vizuālo pievilcību.
GIF attēli
Izmantojiet GIF failus attēliem, kuriem ir mazs, fiksēts krāsu skaits. GIF faili vienmēr tiek samazināti līdz ne vairāk kā 256 unikālām krāsām. GIF failu saspiešanas algoritms ir mazāk sarežģīts nekā JPG failiem, taču, ja to izmanto plakaniem krāsainiem attēliem un tekstam, tas rada ļoti mazie failu izmēri.
GIF formāts nav piemērots fotogrāfiskiem attēliem vai attēliem ar gradienta krāsām. Tā kā GIF formātā ir ierobežots krāsu skaits, gradienti un fotogrāfijas, saglabājot tos kā GIF failu, beigsies ar joslām un pikseļiem.
JPG attēli
Izmantojiet JPG attēlus fotogrāfijām un citiem attēliem, kuriem ir miljoniem krāsu. Tas izmanto sarežģītu saspiešanas algoritmu, kas ļauj jums izveidot mazāku grafiku, zaudējot daļu no attēla kvalitātes. To sauc par "zaudējumu" saspiešanu, jo, saspiežot attēlu, tiek zaudēta daļa no attēla informācijas.
JPG formāts nav piemērots attēliem ar tekstu, lieliem vienkrāsainiem blokiem un vienkāršām formām ar kraukšķīgām malām. Tas notiek tāpēc, ka, saspiežot attēlu, teksts, krāsa vai līnijas var aizmiglot, kā rezultātā attēls nav tik ass, kā tas tiktu saglabāts citā formātā.
PNG attēli
PNG formāts tika izstrādāts kā GIF formāta aizstājējs, kad izrādījās, ka par GIF attēliem būs jāmaksā honorārs. PNG grafikai ir labāks saspiešanas līmenis nekā GIF attēliem, kā rezultātā attēli ir mazāki nekā tas pats fails, kas saglabāts kā GIF. PNG faili piedāvā alfa caurspīdīgumu, kas nozīmē, ka jūsu attēlu apgabali var būt pilnībā caurspīdīgi vai pat izmantot alfa caurspīdīguma diapazonu. Piemēram, nolaižamā ēna izmanto virkni caurspīdības efektu un būtu piemērota PNG (vai arī jūs varat vienkārši pārtraukt mūs izmantot CSS ēnas).
PNG attēli, tāpat kā GIF, nav labi piemēroti fotogrāfijām. Ir iespējams apiet joslu problēmu, kas ietekmē fotogrāfijas, kas saglabātas kā GIF faili, izmantojot patiesas krāsas, taču tas var radīt ļoti lielus attēlus. PNG attēlus arī labi neatbalsta vecāki mobilie tālruņi un īpašie tālruņi.
SVG attēli
SVG apzīmē mērogojamu vektorgrafiku. Atšķirībā no rastra formātiem, kas atrodami JPG, GIF un PNG, šie faili izmanto vektorus, lai izveidotu ļoti mazus failus, kurus var renderēt jebkurā izmērā, nezaudējot faila lieluma pieauguma kvalitāti. Tie ir izveidoti ilustrācijām, piemēram, ikonām un pat logotipiem.
Attēlu sagatavošana piegādei tīmeklī
Neatkarīgi no tā, kuru attēlu formātu izmantojat, pārliecinieties, vai visi šīs vietnes attēli ir sagatavots piegādei tīmeklī. Pārāk lieli attēli var izraisīt vietnes lēnu darbību un ietekmēt kopējo veiktspēju. Lai to apkarotu, šie attēli ir jāoptimizē lai atrastu līdzsvaru starp augstu kvalitāti un zemāko iespējamo faila lielumu šajā kvalitātes līmenī.
Pareiza attēlu formāta izvēle ir daļa no cīņas, taču arī pārliecināšanās, ka esat sagatavojis šos failus, ir nākamais solis šajā svarīgajā tīmekļa piegādes procesā.