No t'agraden les imatges?

Poden transformar un fragment de text en una experiència atractiva mentre llegeixes. Les imatges milloren una publicació de blog, la fan més compartible i defineixen el to i la marca de tot el vostre lloc.

I sabeu què? Estem configurats per respondre a les imatges. És per això que la incorporació d'imatges al contingut és una eina poderosa per utilitzar quan comercialitzeu el vostre bloc.

Però, si no aneu amb compte, les imatges poden representar més de la meitat (o més) de la mida total de la vostra pàgina web. Fa només uns anys, la mida mitjana d'una pàgina web era de 600-700K. Ara, la mitjana és de 2 MB i augmenta cada any.

Això és enorme!

La raó principal per la qual això passa és perquè s'utilitzen més sovint diverses imatges a les pàgines web i aquestes imatges s'utilitzen no està ben dimensionat i optimitzat. Això vol dir que no es desen ni es compilen d'una manera amigable per a la web i, en canvi, estan inflant les vostres pàgines.

La majoria de nosaltres, però, deixem l'optimització d'imatges com una idea posterior i preferim gaudir fent les coses divertides. com ara crear una publicació èpica o establir xarxes amb altres bloggers del vostre nínxol.

Però, tenir una pàgina inflada significa que la velocitat de càrrega de la vostra pàgina es veu afectada. Potser no penseu que això és un gran problema si teniu una connexió d'alta velocitat, però molts dels vostres visitants no ho són. A més, a Google no li agrada la càrrega lenta de les pàgines i pot afectar negativament el vostre SEO.

Per què necessiteu optimitzar les imatges

Treballeu dur encreant contingut estel·lar i passes innombrables hores promocionant el teu bloc i fent xarxa amb altres blocaires, de manera que l'últim que vols és que els visitants potencials abandonin el teu lloc web abans que es carregui!

Els estudis demostren que fins a un 40% dels els visitants fan clic al botó enrere si un lloc triga més de tres segons a carregar-se.

Ja ho sé, tres segons realment no són tan llargs, però quan esteu en una connexió mòbil i esteu esperant un lloc per carregar, un segon pot semblar etern.

I com que molts dels vostres visitants poden tenir connexions mòbils més lentes, queda clar: heu de reduir la mida de la pàgina. I ja sabem quin és el delinqüent més gran de la mida de la pàgina: són les vostres imatges.

Les imatges innecessàriament grans també ocupen espai al vostre compte d'allotjament. Tot i que alguns de vosaltres podeu tenir allotjament amb espai d'emmagatzematge "il·limitat", molts proveïdors d'allotjament premium us limiten a uns 10 GB d'emmagatzematge en plans de nivell inferior. Això es pot omplir ràpidament, sobretot si allotgeu diversos llocs amb una gran quantitat d'imatges al mateix compte.

Llavors, com podeu saber si les vostres imatges estan alentint el vostre lloc? Proveu la velocitat del vostre lloc amb Google PageSpeed ​​Insights.

Si Google informa que les imatges no optimitzades són un problema, aquí teniu el que heu de saber per solucionar-ho.

Nocions bàsiques d'optimització d'imatges

Quan es tracta d'optimitzar imatges al vostre bloc, heu de ser algunes coses diferentsTeniu en compte: el tipus de fitxer, la mida i les dimensions de la imatge, la manera com publiqueu les imatges i la compressió d'imatges.

Anem a veure amb més detall cadascuna d'aquestes àrees.

Tipus de fitxer

Les imatges al web se solen desar en format de fitxer PNG o JPEG, o GIF per a l'animació. A qui no li agraden aquests divertidíssims GIF animats que suren per la web!

Ara tècnicament està d'acord si deseu les vostres imatges en qualsevol format: el navegador del vostre visitant no tindrà problemes per mostrar la vostra pàgina web – però per obtenir la millor qualitat i optimització, seguiu les regles següents:

• JPEG: utilitzeu-lo per a fotografies i dissenys on apareguin persones, llocs o coses
• PNG: millor per a gràfics , logotips, dissenys amb molt de text, captures de pantalla i quan necessiteu imatges amb fons transparents
• GIF: si necessiteu animació, en cas contrari, utilitzeu PNG

Llavors, per què hi ha diferents formats ?

Bé, el PNG s'utilitza tradicionalment per desar logotips i gràfics perquè preserva la qualitat de la imatge original: ningú vol text borrós i formes pixelades. Però, si proveu de desar una foto com a PNG, semblarà increïble, però la mida del fitxer resultant serà, menys que sorprenent.

JPEG s'utilitza tradicionalment per desar fotos. Algunes de les dades d'imatge s'esborren per crear una mida de fitxer dràsticament més petita, però com que les fotos contenen una gran varietat de colors i variacions naturals, la pèrdua de qualitat ésacostuma a ser imperceptible per a l'ull humà.

Entrarem amb més detall sobre la compressió més endavant, però de moment, si només recordeu dues coses, recordeu: JPEG per a fotos i PNG per a text/gràfics.

Dimensions de la imatge

Alguna vegada has carregat una pàgina web i has observat que una imatge petita (potser una captura al cap, per exemple) necessita f-o-r-e-v-e-r per baixar-se? Com, tan lent que pots veure cada línia entrant? Penses per tu mateix, com pot trigar tant a baixar-se una imatge tan petita?

I quan passa amb una imatge de capçalera gran, és encara pitjor perquè pot aturar tota la càrrega de la pàgina.

El motiu pel qual passa això és perquè el blogger no ha redimensionat ni optimitzat correctament la seva imatge i, en el cas del nostre exemple de capçalera, podria haver penjat un JPEG de resolució completa directament des de la seva càmera DSLR.

I aquest és un fitxer enorme!

Ja veieu, un navegador web escalarà (normalment) una imatge a partir de les seves dimensions originals perquè encaixi perfectament al seu lloc en una pàgina web. El que sembla ser una imatge petita a la pantalla podria ser realment una gran foto de 10 megapíxels, reduïda en temps real pel navegador.

Ara algunes plataformes de publicació web crearan automàticament múltiples variacions de la vostra imatge de resolució completa en diferents mides, però si no, hauríeu de canviar la mida de les vostres imatges prèviament en un editor d'imatges com Photoshop, Lightroom, Pixlr o fins i tot MS Paint. Pot significar la diferènciaentre un fitxer de 50K i un de 5MB.

WordPress, per exemple, crearà automàticament tres (o més, segons el tema) còpies de la imatge penjada, totes amb dimensions diferents, que podeu utilitzar. a les publicacions del bloc, en lloc d'utilitzar sempre la imatge a mida completa.

Si tens el costum de penjar imatges de fotos d'arxiu enormes i vols estalviar espai al teu compte d'allotjament, el connector de WordPress Imsanity t'ajuda.

Canvia la mida i substitueix la imatge original per una cosa més manejable, de manera que encara que insereixis la imatge a mida completa a la teva publicació, no serà tan dolent.

Un cop activat, Imsanity també pot cercar les teves imatges existents i canviar-ne la mida en conseqüència.

Publicar les teves imatges

La manera de servir les teves imatges als teus visitants no és estrictament optimitzar-les per se. , però pot tenir un impacte espectacular en el temps de càrrega de la pàgina.

La majoria de bloggers ofereixen les seves imatges directament des del seu compte d'allotjament i això normalment està bé, però si realment voleu treure'n el màxim rendiment. el vostre lloc i, aleshores, allotjar les vostres imatges a una xarxa de lliurament de contingut (CDN) pot fer una gran diferència.

Una CDN consisteix en servidors web estratègicament situats en centres de dades d'arreu del món. Aquests servidors allotgen còpies duplicades de les vostres imatges i quan el navegador d'un visitant sol·licita una imatge del vostre lloc web, el CDN dirigeix ​​automàticament el navegador a unservidor que és geogràficament el més proper a ells.

Això significa que els visitants d'Europa, per exemple, rebran imatges publicades des d'un servidor europeu local, en lloc d'un dels Estats o d'un altre lloc. Atès que el temps de resposta i la latència de la xarxa es redueixen, les imatges es descarreguen molt més ràpidament, reduint el temps de càrrega de la pàgina.

Blogging Wizard utilitza Sucuri (inclou un tallafocs per a seguretat, així com un CDN), però hi ha altres proveïdors de qualitat. com ara Cloudfront d'Amazon o KeyCDN. Fins i tot el popular CloudFlare, que no és estrictament un CDN, ofereix un CDN de manera gratuïta i és fàcil de configurar a la majoria de paquets d'allotjament compartit.

Compressió d'imatges

Quan es tracta d'optimitzar el vostre imatges, res redueix la mida del fitxer més que la compressió avançada d'imatges amb pèrdues.

La majoria d'eines d'edició d'imatges com Visme o Photoshop desaran fitxers utilitzant la compressió JPEG amb pèrdues, ja que té les millors reduccions de mida de fitxer. Així, tot i que la qualitat de la imatge es redueix lleugerament, l'ús de la compressió d'imatges amb pèrdues redueix grans imatges a mides adaptades al web.

Estic segur que molts dels que utilitzen Photoshop poden veure la seva funció Desa per al web com a principal i final de l'optimització d'imatges. I fins i tot les eines d'edició d'imatges en línia com PicMonkey o Visme també optimitzen les vostres imatges.

Però sabíeu que hi ha eines que poden treure la vostra imatge "optimitzada" de Photoshop o d'altres eines d'edició, comprimir-la i comprimir-la. un altre 40% (o més),i encara sembla gairebé idèntic a l'ull humà?

A continuació, es mostren algunes eines gratuïtes i de pagament per ajudar-vos a reduir les vostres imatges a l'estat d'optimització web.

Eines d'escriptori

ImageAlpha / ImageOptim

Per a l'usuari de Mac, ImageOptim és una eina d'escriptori gratuïta que faig servir cada dia per optimitzar imatges PNG, sobretot captures de pantalla, abans de penjar-les. Aquestes eines són fàcils d'utilitzar, només heu d'arrossegar i deixar anar els fitxers, però heu de fer una imatge a la vegada.

Consell professional : per als experts en tecnologia hi ha ImageOptim– CLI, on podeu optimitzar tota una carpeta d'imatges alhora.

ImageAlpha és un compressor PNG amb pèrdues i pot fer meravelles en reduir fitxers PNG mentre ImageOptim realitza una compressió avançada sense pèrdues (amb l'opció de pèrdua), i elimina metadades innecessàries dels fitxers PNG, JPEG i GIF.

Per a les meves imatges PNG, primer les passo a través d'ImageAlpha:

Aquí, vaig reduir la meva imatge de captura de pantalla de 103K a 28K.

Llavors el vaig executar mitjançant ImageOptim i vaig estalviar un 10%.

JPEGmini

Per als meus fitxers JPEG, els optimitzo amb l'aplicació JPEGmini d'escriptori, disponible tant per a Mac com per a Windows.

La versió Lite us permet optimitzar fins a 20 imatges al dia de forma gratuïta i suprimir el límit costa 19,99 $.

Consell professional. : els usuaris avançats que vulguin integrar JPEGmini a Photoshop o Lightroom mitjançant un connector poden comprar la versió Pro per a99,99 $.

Eines en línia/núvol/SaaS

TinyPNG

Si busqueu una eina de compressió d'imatges en línia d'alta qualitat, TinyPNG (optimitza JPEG fitxers també malgrat el nom) és una aplicació web que us permet arrossegar fins a 20 imatges de 5 MB o més petites al vostre navegador i optimitzar-les totes alhora.

També tenen una API per a desenvolupadors i fan un WordPress. connector disponible que pot optimitzar automàticament les vostres imatges en carregar-los.

TinyPNG us ofereix 500 optimitzacions d'imatges gratuïtes al mes, i després cobra entre 0,002 i 0,009 dòlars per imatge, depenent del volum.

Ara 500. Les imatges al mes poden semblar moltes, però si teniu en compte el fet que WordPress sovint crea de tres a cinc variacions de cada imatge en diferents mides, 500 imatges no semblen tantes per al blogger prolífic. Afortunadament, el cost per imatge és econòmic.

EWWW Image Optimizer

Si no esteu preparat per gastar diners i no voleu que us molesti optimitzar les vostres imatges manualment, el connector gratuït EWWW Image Optimizer per a WordPress pot optimitzar automàticament les vostres imatges penjades.

Podeu optar per una subscripció premium que faci compressió amb pèrdues, però la versió gratuïta només realitza compressió sense pèrdues, de manera que els estalvis són" gairebé tan substancial. Tanmateix, us estalviarà temps i és millor que res.

Nota: Per obtenir un resum complet, consulteula nostra publicació sobre eines de compressió d'imatges.

Conclusió

Amb algunes persones que prediuen que la mida mitjana de la pàgina web s'aproximarà als 3 MB el 2017, ara és el moment de començar a optimitzar les vostres imatges.

Recordeu que no tots els vostres visitants tindran connexions d'alta velocitat i que la inflació de la pàgina i els temps de càrrega lents de la pàgina poden afectar potencialment la vostra classificació a Google. Per ajudar-vos a alleugerir la càrrega, per dir-ho d'alguna manera, acostumeu-vos a optimitzar les vostres imatges avui mateix.

Presteu atenció a les dimensions de la imatge i canvieu la mida de les fotografies d'arxiu o imatges massa grans d'una càmera digital a una imatge adequada. mida.

A continuació, aprofiteu la compressió d'imatges moderna amb aplicacions d'escriptori com JPEGmini o eines al núvol com TinyPNG o Kraken, integrant-les a WordPress amb un connector si és possible.

Per últim, si el vostre La plataforma de publicació crea automàticament variacions de mida de la vostra imatge original; trieu-ne una per a la publicació del vostre bloc, en lloc de l'original a mida completa.

Lectura relacionada: 7 maneres de reduir el Mida dels fitxers PDF.