El posicionament en cercadors o posicionament web és el resultat de la recuperació d’informació a la base de dades dels grans Motors de Cerca d’Internet per l’ús d’algorismes de cerca en el programari.
La tasca d’ajustar la informació de les pàgines que es pretenen fer aparèixer en primeres posicions dels resultats és coneguda com SEO, sigla en anglès de Search Engine Optimization, optimització per a motors de cerca. Consisteix a aplicar diverses tècniques per aconseguir que els cercadors d’Internet situïn determinada pàgina web en una posició i categoria alta (primeres posicions) dins de la seva pàgina de resultats per a determinats termes i frases clau de cerca.
Markus Walter ha creat un document el qual explica molt bé totes les passes per conseguir un bon SEO pel nostre Wordpress. El document esta destinat a aquest CMS tan popular, encara que la mayoria de consells son aplicables a tots els webs.
Com dissenyadors de pàgines web em d’estar familiaritzats amb el format d’imatge PNG, la seva principal característica es la funció del canal alfa (transparències en els píxels). Però també em de tindre en compte aspectes com el pes de les imatges per accelerar el temps de descàrrega de les webs.
Normalment pensem que el no hi han moltes opcions d’optimització de les imatges Truecolor PNG (PNG-24 de Photoshop), i es veritat, no les tenim, però si existeixen algunes tècniques avançades que ens ajudaran a millorar el pes, sense destrossar els nostres PNG’s.
1. Posterització
Això és un mètode conegut de l’optimització d’imatge de truecolor. Busqueu la icona de capes d’Ajustaments en el paleta de Capes i escullir Posterize.
Escollir la quantitat possible més petita de Nivells (normalment 40 és prou) i salvar la imatge:
Original, 84 KB
Posterized, 53 KB
Així és com funciona: la posterització simplement redueix la quantitat de colors, convertint colors similars en un únic, crea així regions de posterizat. Això ajuda a realitzar un millor filtratge de scanline i aconseguir una millor compressió. La desavantatge d’aquest mètode és alternança de color, que és especialment visible si està intentant implementar l’imatge amb un fons d’HTML.
2. Transparència Bruta
Doneu un cop d’ull a les imatges següents:
74 KB
30 KB
Els dos s’han salvat amb Photoshop sense cap mena d’optimització. Fins i tot si feu una comparació de per píxel d’aquestes imatges, no notareu cap diferència. Però per què és la primera imatge 2,5 més gran que la segona?
La resposta es ben sencilla. La primera esta salvada com a imatge RGBA (els valors RGB + el canal Alfa), per tant tindrem els tres canals d’informació de color, més un adicional que es el que crea la transparència, l’Alfa. Amb aquest mitjá es poden amagar tots els píxels on l’alfa tingui un valor 0. Però aquestes dades de RGB encara existeixen i, a més, impedeixen al codificador de PNG a empaquetar i codificar el correctament les dades. Així, que hem de treure aquestes dades ocultes, omplint les zones on afecti l’alfa, d’un color sòlid, com per exemple negre i salvem la imatge.
3. Divisió per transparència
PNG-24, 62 KB
A vegades s’han de salvar imatges en PNG-24 “pesades” a causa dels pocs píxels semitransparents que hi contenen. Podem estalviar Kbs extra si dividim la imatge en dues parts, es a dir, una amb píxels sòlids, l’altre amb els semitransparents. Podem salvar píxels semitransparents en PNG-24, i píxels sòlids en PNG-8 o fins i tot JPEG.
PNG-8, 17 KB
PNG-24, 6 KB
I aquí tenim el resultat:
Abans 63 KB
Després 23 KB
Aquest mètode té un desavantatge obvi: té dues imatges en comptes d’un, que pot ser un inconvenient per utilitzar (per exemple, quan fent una web en CMS).
4. Escala de grisos
Photoshop no pot salvar en escala de grisos un PNG, així que hauriem d’utilitzar OptiPNG després de salvar imatges en blanc i negre.
PNG-24, 8167 bytes
PNG-24 (Escala de grisos d’OptiPNG), 6132 bytes
5. Menys Colors
Això és una alternativa al mètode de Posterització de colors. La Posterització pot canviar dramàticament els colors de la imatge, que és inacceptable si s’ha de barrejar la imatge amb el fons del lloc web. Aquest mètode ens dóna més control sobre color però es limita a 256 colors.
El mètode és bàsicament extreure dades d’imatge de la imatge semitransparent (treure transparència), convertir-lo en un color indexat i aplicar la màscara original.
6. Mès trucs d’optimització
Cada optimització ha de començar amb una anàlisi de l’imatge minuciosa. Esculliu la millor tècnica per aconseguir millors resultats a cada imatge.
Ser creatiu. Utilitzar aquestes tècniques com un punt de partida per crear els propis mètodes personalitzats d’optimització.
Molta gent pensa que PNG-8 sempre es millor que PNG-24 per a imatges amb pocs colors. Però no es aixi, en alguns casos, PNG-24 ens pot donar millors resultats:
PNG-8, 833 bytes
PNG-24, 369 bytes
Si estem utilitzant una versió més vella de Photoshop (previ CS3), podem trobar que les imatges de PNG, en l’editor d’imatge, semblin diferents en un Navegador Web. La causa d’aixó es la informació de gamma que es guarda a l’arxiu PNG. El podem treure d’una manera segura amb eines com TweakPNG (Windows només) o smush.it.
No utilitzeu el “Salvar Com” per salvar imatges PNG per al web, sino, el “Salvar per a Web”. Per defecte, Photoshop inclou una imatge de presentació com informació addicional a l’arxiu, fent unes quantes vegades més gran l’arxiu del que necessita ser.
Com a exemple final us deixo una demostració real de totes les técniques enumerades aquí, recopilades en un video:
Mobify es una eina online que ens permet adaptar molt còmodament una web per a dispositius mòbils, agendes electròniques o consoles portàtils. Disposa d’una versió gratuïta (no de prova), i dues de pagament amb algunes opcions adicionals.
A part que optimitzar per mòbils millora el posicionament d’una plana web, l’eina ens baixa el pes considerablement per facilitar a les conexions lentes la descàrrega de la pàgina.
Codi obert (en anglès open source) es el terme com es coneix el software distribuït i desenvolupat lliurement.
A Alternativeto podem trobar la alternativa “Opensource” del teu software de pagament preferit. Realment molts d’ells no tenen res que envejar als de codi tancat, i com son lliures cada cop evolucionen més i millor.
Sou al bloc de Meddia, cultura i comunicació. Terra Meddia és un espai per exposar idees, exemples, inspiracions, recursos i, naturalment, opinions. Benvinguts!
El posicionament en cercadors o posicionament web és el resultat de la recuperació d’informació a la base de dades dels grans Motors de Cerca d’Internet per l’ús d’algorismes de cerca en el programari.
Comentaris recents