Com optimitzar les vostres imatges perquè siguin amigables amb SEO (guia completa)

El rendiment del vostre lloc web depèn de diversos factors que van des de l’amfitrió web específic que trieu, seguint les directrius d’accessibilitat del lloc web, fins a les mides del fitxer d’imatge que feu servir..


Tanmateix, formatar-les per tenir una mida adequada pot reduir la qualitat a causa de les modificacions que feu. La bona notícia és que podeu mantenir una qualitat d’imatge òptima i obtenir la mida adequada amb algunes tècniques i trucs.

Què és l’optimització d’imatges?

Dimensions d’optimització d’imatgesLes pàgines web poden experimentar un alentiment significatiu quan hi ha imatges grans. Això pot reduir els temps de càrrega i fer que l’experiència global sigui subparida per als visitants del vostre lloc.

Disminuir la mida del fitxer és optimitzar la imatge. Podeu utilitzar un script o un plugin per a això.

Amb això es tradueix en temps de càrrega més ràpids per a les vostres pàgines. Els dos mètodes d’optimització més habituals són la compressió sense pèrdues i sense pèrdues.

Avantatges del format d’imatges

la mida mitjana de la imatge al webEs calcula que aproximadament el 54 per cent del pes total d’una pàgina web es deu a imatges.

Quan treballeu en l’optimització del lloc web, les imatges haurien de ser la vostra primera tasca per això. Els avantatges del format d’imatges inclouen:

  • Velocitat de càrrega de pàgines millorada
  • És més ràpid crear còpies de seguretat
  • Es requereix menys espai d’emmagatzematge del servidor
  • SEO millorat amb el plugin de SEO adequat
  • S’utilitza menys ample de banda

Com millorar el rendiment amb l’optimització d’imatges

L’objectiu és equilibrar uniformement la qualitat acceptable i la mida de fitxer més baixa possible. Hi ha més d’una manera de fer-ho. Abans de pujar, comprimir les imatges és una opció habitual. Podeu utilitzar una eina o un complement amb aquest propòsit (aquí en teniu alguns).

És important tenir en compte el tipus de compressió i format de fitxer que utilitzeu. La combinació adequada permet reduir fins a cinc vegades la mida de la imatge.

Experimenteu amb diferents formats de fitxers i tipus de compressió per determinar la combinació més adequada per a les vostres necessitats.

Trieu el millor format de fitxer

Per escollir el millor tipus de fitxer, és important saber quins estan disponibles. Aquests són els més habituals:

  • JPEG: Aquest tipus utilitza una optimització sense pèrdues i pèrdues. Podeu aconseguir un equilibri sòlid de la mida i la qualitat del fitxer ajustant el nivell de qualitat.
  • PNG: Aquest tipus tendeix a tenir una mida de fitxer més gran, però les imatges són de major qualitat. Podeu utilitzar compressió amb pèrdues o sense pèrdues.
  • GIF: Això és ideal per a imatges animades. Només podeu utilitzar compressió sense pèrdues. Només utilitza 256 colors.

formats d’arxiu d’imatges

Hi ha altres opcions, però aquestes són les més habituals i fàcils de treballar. Altres opcions inclouen JPEG XR i WebP. No tots els navegadors admeten aquests dos, així que tingueu en compte això.

No obstant això, poden ser una elecció viable. Per exemple, en comparació amb una imatge JPEG comparable, hi ha una reducció del 30% del fitxer amb WebP.

A causa de la falta de suport universal per a aquestes dues opcions, l’aplicació necessitarà una lògica addicional als servidors o aplicacions per proporcionar el recurs adequat:

  • L’optimització d’imatges és un servei ofert per alguns CDN, inclosos el lliurament de WebP i JPEG XR.
  • Per detectar el client, proporcioneu el millor format d’imatge disponible i comproveu els formats compatibles, és possible afegir lògica d’aplicació addicional.
  • Algunes eines de codi obert automatitzen la conversa, l’optimització i el servei d’actius adequats.

Mida davant qualitat de compressió

La compressió baixa sol donar una qualitat més alta, però les mides dels fitxers són generalment més grans. El contrari és cert amb una gran compressió. Els fitxers són més petits, però la qualitat tendeix a disminuir.

qualitat d'imatge davant compressió

L’ideal seria que desitgeu un total de dos a dos MB pel pes total de la pàgina web. Per tant, considereu quantes imatges heu d’utilitzar i dividiu aquest nombre per aproximadament 1,5. D’aquesta manera, s’obté la mida per imatge que permet la millor velocitat de càrrega.

Optimització sense pèrdues i sense pèrdues

Aquests són els dos tipus de compressió que fareu servir. És important entendre el que fan:

  • Compressió sense pèrdues i sense pèrduesSense pèrdues: Això comprimeix les dades i és un filtre. Abans de presentar la imatge, s’ha de descomprimir. Tot i això, la qualitat no es redueix. Hi ha diverses eines que realitzen compressió sense pèrdues.
  • Perduda: Elimina algunes dades i és un filtre. Tingueu en compte quanta reducció feu perquè degradarà la imatge. Podeu utilitzar diferents editors d’imatges i eines per ajustar la configuració de qualitat de la imatge.

La configuració òptima de la configuració sense pèrdues o amb pèrdues depèn dels vostres criteris, com ara la distribució entre artefactes introduïts i la mida del fitxer i el contingut de la imatge..

No hi ha una sola configuració universal que s’apliqui a totes les imatges. En última instància, voleu jugar amb diferents imatges per veure quines funcionen millor.

Redimensionant imatges a escala

Gràcies a les pàgines amb resposta a llocs, com WordPress, obtindreu diverses mides de fitxer a la vostra mediateca. El vostre navegador pot triar la mida que millor sigui i descarregar-lo. La mida que el navegador tria en funció de la resolució del dispositiu.

Redimensionant la imatge en wordpress

El fitxer original es manté sense tocar i es conserva. Podeu utilitzar plugins per evitar l’estalvi de l’original per conservar l’espai del disc si ho preferiu.

Substitució i eliminació d’imatges

Necessiteu totes les imatges d’una pàgina web? Si no, suprimiu-ne els que no siguin necessaris. No obstant això, si tots són rellevants per al contingut, considereu la possibilitat de substituir les imatges de més gran o inferior qualitat per opcions millors.

En alguns casos, els tipus de lletra i els efectes CSS poden prendre el lloc de les imatges, alhora que proporcionen una bona estètica visual a la pàgina. Amb els tipus de lletra web, les bones tipografies poden ajudar a millorar la usabilitat i proporcionar un aspecte més adequat a les vostres pàgines.

També pot millorar la vostra llegibilitat i marca. Només assegureu-vos que encara podeu cercar, seleccionar i redimensionar el text fàcilment sense tenir problemes de llegibilitat.

Els efectes CSS inclouen elements, com ara ombres i gradients. També poden augmentar la marca. Les animacions poden proporcionar un atractiu visual a la pàgina web a qualsevol nivell i resolució de zoom. En comparació amb els fitxers d’imatges, es tracta d’una fracció dels bytes.

Raster vs. Imatges Vectorials

rastor vs vector

Raster i vector són dos dels tipus principals de fitxers d’imatges. Els programes basats en píxels, un escàner o una càmera fotogràfica s’utilitzen per crear imatges ràsters.

S’utilitzen àmpliament a Internet i s’utilitzen amb més freqüència. El programari vectorial s’utilitza per crear imatges vectorials. Són habituals per a imatges que aboquen productes físics i en enginyeria, CAD i gràfics 3D.

Les imatges vectorials són independents de la resolució i del zoom. Quan hi ha formes geomètriques, el vector és ideal. Quan les imatges són complexes i presenten una gran quantitat de detalls i formes irregulars, es prefereixen les imatges ràsters.

Els gràfics més ràpids codifiquen els valors individuals de cada píxel dins d’una graella rectangular per representar una imatge. Els gràfics vectorials representen una imatge mitjançant punts, línies i polígons.

Implicacions de pantalla d’alta resolució

És important distingir entre els dos tipus de píxels diferents, que inclouen píxels de dispositiu i píxels CSS. Es poden presentar múltiples píxels de dispositiu en un píxel CSS únic. El detall a la pantalla es perfecciona amb més píxels de dispositiu.

css píxel vs píxel del dispositiuPer aprofitar al màxim els recomptes de píxels del dispositiu més alts, els actius de la imatge han de tenir més detalls.

Aquesta tasca és ideal per a imatges vectorials ja que poden produir resultats nítids quan es presenti a qualsevol resolució.

Com que les imatges ràster utilitzen una base per píxel per codificar les dades de les imatges, són més difícils. Això succeeix mentre les mides dels fitxers raster augmenten a mesura que augmenten els píxels.

Per tant, les pantalles d’alta resolució necessiten imatges d’alta resolució per obtenir els avantatges. Les imatges vectorials són millor per a pantalles d’alta resolució ja que sempre proporcionen resultats nítids pel fet de ser independents de la resolució.

Recordeu que, independentment de la resolució, les tècniques d’optimització d’imatges són les mateixes.

Optimització de les imatges vectorials

Tots els navegadors moderns són compatibles amb els gràfics vectorials escalables (SVG).

És ideal per a gràfics bidimensionals i el format està basat en imatges XML. Els fitxers SVG es poden crear a mà amb l’editor de text que preferiu o amb la majoria de tipus de programari basat en vector.

Per reduir la mida dels fitxers SVG, s’han de minimitzar. GZIP s’ha d’utilitzar per comprimir fitxers SVG.

Optimització d’imatges més ràpides

Una graella de píxels constitueix una imatge ràster. Els píxels individuals es troben en una graella bidimensional. Per exemple, una seqüència de 10.000 píxels constitueix una imatge de 100 per 100 píxels. Cada píxel codifica transparència i informació sobre color.

ràster pesatEls valors RGBA s’emmagatzemen per cada píxel. Això inclou:

  • Canal vermell
  • Canal blau
  • Canal verd
  • Canal alfa (transparència)

El navegador assigna internament 256 tons (valors). Per canal, això es tradueix en vuit bits. Per píxel, això és de quatre bytes. Això fa possible calcular la mida del fitxer mitjançant les dimensions de la graella. No es necessita molt perquè la mida del fitxer sigui molt gran.

Per tant, per reduir la mida del fitxer d’imatges, hi ha algunes estratègies:

  • Reduïu la profunditat de bits de la imatge. Podeu fer-ho mitjançant un palet de colors més petit.
  • Optimitzeu les dades que emmagatzemen els píxels individuals.

Eines i ajustament de paràmetres

No hi ha cap eina d’imatge perfecta, cap conjunt de paràmetres d’optimització o format que funcioni per a cada imatge. El contingut de la imatge i els seus requisits tècnics i visuals determinaran quin haureu d’utilitzar.

Un cop trobeu un bon ajust de configuració, podreu utilitzar-lo per a imatges similars en un futur per estalviar temps. Tanmateix, assegureu-vos que mai no suposeu que s’haurien d’utilitzar la mateixa configuració per comprimir totes les imatges.

Aprendre sobre algunes eines comunes us pot ajudar a prendre la decisió correcta. Aquests quatre es troben entre els més freqüents:

  • Gifsicle: Això permet optimitzar i crear diverses imatges GIF.
  • Optipng: S’utilitza per permetre l’optimització de PNG sense pèrdues.
  • Jpegtran: Aquest us permet optimitzar les imatges JPEG.
  • Pngquant: S’utilitza per permetre una optimització PNG amb pèrdues.

Repartiment d’actius d’imatge a escala

Hi ha dos criteris principals a tenir en compte quan realitzeu l’optimització d’imatges:

  • Optimitzant el nombre total de píxels d’una imatge.
  • Optimitzant quants bytes són necessaris per codificar cada píxel en una imatge.

arbre de format d’imatgeLa mida del fitxer d’imatge es desglossa a píxels totals multiplicats pels bytes totals necessaris per a la codificació de píxels individuals. Això és tot. Tingueu-ho en compte quan es treballa per determinar la mida òptima dels fitxers d’imatges del vostre lloc web.

Per això, la manera més eficaç i senzilla d’optimitzar imatges és assegurar-se que no envieu més píxels que necessiteu completament per mostrar l’actiu al navegador a la mida prevista..

Tan, no només confieu en el vostre navegador per revendre les imatges. Això pot fer que es mostrin a una resolució inferior. També utilitza molts recursos addicionals de CPU.

Normalment no és possible garantir la mida exacta de la visualització per a cada producte lliurat. Tanmateix, és important que us assegureu de mantenir al mínim tots els píxels innecessaris.

També és imprescindible que entregueu els vostres grans recursos el més a prop possible per la seva mida de visualització.

Llista de comprovació d’optimització d’imatges

Tota la informació aquí us permet optimitzar les imatges perquè les vostres pàgines web siguin més ràpides. Encara podreu utilitzar imatges boniques, però no provocaran una desacceleració important amb els temps de càrrega de la vostra pàgina.

Això farà que els vostres visitants siguin feliços i millori la funció general del vostre lloc web. Tingueu en compte els punts de la llista de verificació següents quan optimitzeu les imatges:

  • Considereu els formats vectorials ja que funcionen per a dispositius d’alta resolució i múltiples, ja que són independents de l’escala i de la resolució.
  • Tots els actius SVG s’han de comprimir i minificar. Això elimina les metadades innecessàries.
  • Per a formats ràsters, juga amb la configuració òptima de qualitat. Això us pot estalviar un nombre important de bytes.
  • Creeu els vostres requisits funcionals i trieu el millor format per a imatges ràsters.
  • Automatitzar sempre que puguis per assegurar una optimització constant de la imatge.
  • Serviu imatges a escala perquè la mida de la imatge natural i la mida de la pantalla siguin el més semblants possible.

En resum, hi ha una ciència i un art per optimitzar la imatge. Els algorismes i tècniques molt desenvolupades serveixen com a ciència.

L’absència de respostes definitives sobre la compressió d’imatges individuals és l’art. En última instància, heu de jugar al voltant i experimentar. D’aquesta manera, podeu fer la millor elecció per als fitxers d’imatges i com contribueixen a la velocitat de la pàgina web.

Amb la creixent popularitat i sofisticació de constructors de llocs web de tercers com Wix, és fàcil que els dissenyadors tinguin descarat, però es mantenen centrats en desenvolupar i mantenir bons processos d’optimització d’imatges, ja sigui amb la reducció d’una plantilla o la creació d’un lloc des de zero..

Referències i crèdits d’imatge:

  • PicupMedia.com
  • Informàtica.HomeDNS.org
  • CognitiveSEO.com
  • StackOverflow.com
  • EngineThemes.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map