6 maneres d'optimitzar les imatges per a un millor rendiment web

6 maneres d'optimitzar les imatges per a un millor rendiment web
Rick Davis

Els humans som criatures visuals, i la investigació avala aquest fet. Després de només tres dies, els percentatges de retenció de text estan dins de l'interval només del 10% al 20%. Però per a les imatges, les taxes de retenció poden arribar al 65%. El cervell rep el 90% de la informació visual i la processa 60.000 vegades més ràpid. Sens dubte, les imatges tenen un paper fonamental en la implicació del lloc web.

No obstant això, cal molt més que escollir algunes imatges i col·locar-les al vostre lloc. Les imatges pesades consumeixen una gran quantitat d'ample de banda, alentint la velocitat de càrrega de pàgines. Els motors de cerca notaran el rendiment lent i et penalitzaran amb un rànquing baix.

El nostre article us mostrarà sis maneres diferents d'optimitzar les imatges per obtenir un millor rendiment web el 2021.

Consells d'optimització d'imatges per a un millor rendiment web a

Diguem que dissenyeu llocs web per a organitzacions sense ànim de lucre i us agrada fer servir moltes imatges per mostrar el vostre treball. Els donants, patrocinadors i altres parts interessades utilitzen aquesta informació com a base per a un suport continuat. Tanmateix, si no optimitzeu les imatges, l'experiència de l'usuari i el compromís es veuran afectats. El problema més gran serà la càrrega lenta de les pàgines i les respostes del temps d'espera.

L'optimització d'imatge fa referència a qualsevol pas que feu per reduir la mida, el format o la resolució dels fitxers. Podeu fer-ho sense comprometre la qualitat de les imatges.

Vegeu també: 12 tendències de disseny gràfic inspiradores per al 2022

Anem a veure algunes de les vostresopcions.

Vegeu també: L'eina llapis

Il·lustració de la campanya de màrqueting de Deemak Daksina

1. Comenceu amb una auditoria d'optimització d'imatges

Una auditoria d'optimització d'imatges us proporcionarà informació rellevant sobre on heu de millorar.

Comenceu fent un inventari de les imatges que teniu al vostre lloc. Les proves rellevants diagnosticaran qualsevol problema que necessiteu solucionar.

Per exemple, l'auditoria pot mostrar que teniu massa imatges. També mostrarà el format de la imatge i us permetrà determinar el següent curs d'acció. Per exemple, eliminar o canviar els formats de fitxer pot millorar significativament la velocitat de càrrega de la pàgina.

2. Trieu el format adequat per a les imatges

Els fitxers d'imatge tenen diferents formats. Aquests són els tres tipus de formats d'imatge més habituals per a aplicacions web que cal conèixer:

  • PNG té l'avantatge de ser una imatge de molt alta qualitat. Malauradament, per aconseguir-ho, la mida del fitxer és molt gran. Funcionen bé per a imatges i logotips senzills i permeten una compressió sense pèrdues.
  • Els JPEG són els més comuns a la majoria de llocs web. Són excel·lents per a imatges complexes i acolorides. Tanmateix, haureu de tenir cura quan comprimiu imatges JPEG, ja que es pot produir una pèrdua de claredat, com més petita sigui la imatge. Algunes persones es refereixen a això com amb pèrdua.
  • El GIF funciona per a animacions, icones petites i imatges de baixa resolució. Permet una compressió sense pèrdues, però només es pot utilitzarfins a 256 colors.

Desa les icones d'Andreas Storm

3. Canviar la mida i comprimir les imatges

Potser heu notat que les imatges sembla que es carreguen poc a poc. Passarà un temps abans de poder veure la imatge completa; un senyal que probablement les imatges són massa pesades. Redimensionar o comprimir s'encarregarà del problema.

Tingueu en compte que no hauríeu de carregar cap imatge abans d'optimitzar-les. I per obtenir la millor qualitat, procura que els fitxers estiguin dins del rang d'1 a 2 MB.

Utilitzeu l'eina de retall per canviar la mida de les imatges. Ajuda a reduir la mida del fitxer, donant lloc a una millor velocitat de càrrega de la pàgina. Teniu tones d'eines disponibles per al vostre ús.

La compressió d'imatges ajuda a reduir la mida del fitxer. Però pots distorsionar la imatge si la comprimeixes massa. La compressió baixa pot ser ideal si voleu conservar la qualitat de la imatge; tanmateix, no redueix significativament la mida.

Tipus de compressions

Hi ha dos conceptes que ja hem esmentat anteriorment, compressió sense pèrdues o compressió amb pèrdues.

  • La compressió sense pèrdues manté la qualitat de la imatge alhora que elimina metadades innecessàries.
  • La compressió sense pèrdues redueix la mida del fitxer eliminant alguns dels elements. Pot comprometre la qualitat de la imatge. Tanmateix, és possible que no noteu la diferència. Per tant, encara pot ser una manera excel·lent de comprimir imatges.

L'editor d'imatges adequat us ajudarà a determinar quinala compressió us funciona millor.

4. Optimització de la imatge per a mòbils

Qualsevol pas que feu ha de seguir una estratègia de SEO per a mòbils, ja que Google va passar a la classificació per a mòbils. Les imatges han de tenir el mateix aspecte en qualsevol dispositiu mòbil que en qualsevol dispositiu d'escriptori. Una gran quantitat de trànsit a Internet arriba a través d'aquests dispositius.

Si els usuaris no estan compromesos amb una bona UX quan utilitzen dispositius mòbils, els perdràs.

Penseu en optimitzar les imatges per a mòbils primer. Si es veu bé a la pantalla petita, es veurà fantàstic en un ordinador d'escriptori o portàtil.

Optimització ASO per Abbi_Kerimov

5. Els noms de fitxers i el seu impacte en el SEO

L'optimització d'imatges també requereix que presteu atenció a com anomeneu els fitxers. Totes les accions que feu han de tenir l'objectiu de millorar la visibilitat als cercadors. Quan carregueu o feu una foto, el dispositiu li donarà automàticament un nom de fitxer. Aquest nom normalment inclou codi o números aleatoris. Pot semblar 2224444.jpg.

Penjar la imatge tal com està al vostre lloc web no ajudarà gens als motors de cerca.

Faciliteu que els rastrejadors web us trobin assignant etiquetes descriptives a cada imatge. Incorporeu paraules clau rellevants que proporcionin informació sobre la vostra empresa o lloc.

6. Penseu en l'ús de la càrrega mandrosa

La càrrega mandrosa d'imatges és exactament com el seu nom indica. En lloc decarregant tota la imatge alhora, es desplega. La imatge es continua carregant com més es desplaça el visitant en línia per la pàgina.

La càrrega mandrosa només revela allò que és rellevant en aquell moment. Acabaràs estalviant ample de banda perquè no utilitzaràs recursos innecessaris.

S'està carregant... per Dona

Pensament final

El rendiment web és un factor de classificació crític que utilitzen els motors de cerca. Google penalitzarà el vostre lloc si les velocitats de càrrega de la pàgina són baixes.

Molts factors determinen la velocitat de la pàgina i les ordres d'ús d'imatges són una de les posicions superiors. Si no optimitzeu les imatges, el rendiment del vostre web es veurà afectat. Les pàgines es carregaran lentament i l'experiència de l'usuari i la implicació no seran bones.

Trieu el format d'imatge adequat. A continuació, utilitzeu tècniques com canviar la mida i comprimir per reduir la mida del fitxer. Programeu proves regulars de pàgines i auditories del lloc per comprovar el rendiment del lloc.




Rick Davis
Rick Davis
Rick Davis és un dissenyador gràfic experimentat i artista visual amb més de 10 anys d'experiència en la indústria. Ha treballat amb una varietat de clients, des de petites startups fins a grans corporacions, ajudant-los a assolir els seus objectius de disseny i a elevar la seva marca mitjançant visuals efectives i impactants.Llicenciat a l'Escola d'Arts Visuals de la ciutat de Nova York, Rick és un apassionat d'explorar noves tendències i tecnologies de disseny i empènyer constantment els límits del que és possible en el camp. Té una gran experiència en programari de disseny gràfic i sempre està disposat a compartir els seus coneixements i idees amb els altres.A més de la seva feina com a dissenyador, Rick també és un blogger compromès, i es dedica a cobrir les últimes tendències i desenvolupaments en el món del programari de disseny gràfic. Creu que compartir informació i idees és clau per fomentar una comunitat de disseny forta i vibrant, i sempre té ganes de connectar amb altres dissenyadors i creatius en línia.Tant si està dissenyant un nou logotip per a un client, experimentant amb les últimes eines i tècniques al seu estudi o escrivint publicacions de bloc informatives i atractives, Rick sempre es compromet a oferir el millor treball possible i ajudar els altres a assolir els seus objectius de disseny.