Hi ha una sèrie de formats d'imatge que es poden utilitzar a les pàgines web. Alguns exemples comuns són GIF , JPG i PNG . Els fitxers SVG també s'utilitzen habitualment en els llocs web d'avui dia, donant als dissenyadors web una altra opció per a la imatge en línia.
Imatges GIF
Utilitzeu fitxers GIF per a imatges que tinguin un nombre reduït de colors. Els fitxers GIF sempre es redueixen a no més de 256 colors únics. L'algoritme de compressió per a fitxers GIF és menys complex que per als fitxers JPG, però quan s'utilitza en imatges de color pla i en text es produeixen mides de fitxers molt petites .
El format GIF no és adequat per a imatges fotogràfiques o imatges amb colors degradats. Com que el format GIF té una quantitat limitada de colors, gradients i fotografies, acabarà amb bandes i pixelació quan es desa com a fitxer GIF.
En poques paraules, usaria GIF només per a imatges senzilles amb pocs colors, però també podeu utilitzar PNG per a això (més aviat).
Imatges JPG
Utilitzeu imatges JPG per a fotografies i altres imatges que tinguin milions de colors. Utilitza un complex algoritme de compressió que us permet crear gràfics més petits perdent part de la qualitat de la imatge. Això s'anomena compressió "perjudicial" perquè es perd una part de la informació de la imatge quan es comprimeix la imatge.
El format JPG no és adequat per a imatges amb text, grans blocs de color sòlid i formes simples amb vores nítids. Això és degut a que quan es comprimeix la imatge, el text, el color o les línies poden desdibuixar, donant com a resultat una imatge que no és tan aguda com es guardaria en un altre format.
Les imatges JPG s'utilitzen millor per a fotografies i imatges que tenen molts i colors naturals.
Imatges PNG
El format PNG es va desenvolupar com a reemplaçament del format GIF quan semblava que les imatges GIF estarien subjectes a una tarifa de regalies. Els gràfics PNG tenen una millor velocitat de compressió que les imatges GIF que produeixen imatges més petites que el mateix arxiu desat com a GIF. Els fitxers PNG ofereixen una transparència alfa, és a dir, podeu tenir àrees de les vostres imatges que siguin totalment transparents o fins i tot utilitzin un rang de transparència alfa. Per exemple, una ombra caiguda utilitza un rang d'efectes de transparència i seria adequat per a un PNG (o potser acabeu amb nosaltres usant ombres CSS).
Les imatges PNG, com els GIF, no són adequades per a les fotografies. Es pot evitar l'assumpte de bandes que afecta les fotografies guardades com a fitxers GIF amb colors veritables, però això pot generar imatges molt grans. Les imatges PNG també no són compatibles amb telèfons mòbils antics i telèfons amb característiques.
Utilitzem PNG per a qualsevol fitxer que requereixi transparència. També utilitzem PNG-8 per a qualsevol fitxer que sigui adequat com a GIF, utilitzant aquest format PNG.
Imatges SVG
SVG significa gràfic vectorial escalable. A diferència dels formats basats en ràster que es troben en JPG, GIF i PNG, aquests fitxers utilitzen vectors per crear fitxers molt petits que es poden representar en qualsevol mida sense pèrdua de qualitat d'augment de la mida del fitxer. Es creen per a il·lustracions com icones i fins i tot logotips.
Preparació d'imatges per a lliurament a la web
Independentment del format d'imatge que utilitzeu, i el vostre lloc web us permetrà utilitzar diversos formats a totes les pàgines, heu d'assegurar-vos que totes les imatges d'aquest lloc estiguin preparades per a l'enviament web . Les imatges massa grans poden fer que un lloc funcioni lentament i tingui un impacte en el rendiment general. Per combatre això, aquestes imatges han de ser optimitzades per trobar l'equilibri entre alta qualitat i la mida de fitxer més baixa possible en aquest nivell de qualitat.
L'elecció del format de les imatges correctes és part de la batalla, però també assegureu-vos que heu preparat aquests fitxers és el següent pas d'aquest important lliurament web.
Article original de Jennifer Krynin. Editat per Jeremy Girard.