La guia definitiva per a la gestió d’imatges de WordPress

  1. 1. Actualment Llegint: La guia definitiva per a la gestió d’imatges de WordPress
  2. 2. 3 Consells de gestió d’imatges més poc coneguts a WordPress
  3. 3. Imatges de WordPress Errors de SEO i com solucionar-les

L’impacte visual és una de les característiques més importants quan es tracta d’un pla de màrqueting de contingut impactant. Benvingut a una nova sèrie de publicacions: la Guia definitiva per a la gestió d’imatges a WordPress.


Està dissenyat per proporcionar-vos les eines necessàries per gestionar els vostres actius d’imatge a WordPress, des d’optimitzacions tècniques, SEO, integració CDN i gestió de biblioteques. En aquesta guia multipartida, només us recomanarem aquells mètodes, tutorials, plugins i temes que hem provat o recomanats per experts de la indústria.

També evitarem suggerir cegament plugins que tinguin un alt ús al dipòsit de WordPress. Més aviat, us recomanem els que assoleixin l’acord perfecte entre la proposta de valor i l’optimització de rendiment.

Us podeu preguntar com anirem fent això. Més de 24.000 descàrregues del nostre tema de WordPress polivalent total i sensible a ThemeForest pot ser que no siguin un gran indicador.

Doncs hem escorcollat ​​els millors blocs de les empreses d’allotjament de WordPress més importants del sector (com WPEngine i Pagament) i vaig aprendre què ells après al publicar milers de milions de visualitzacions de pàgines a milers de clients d’alt perfil. Tota aquesta informació l’hem comprimit en paràgrafs minúsculs i punts de difusió per tenir èxit en línia. Comencem ara??

Consells tècnics i d’optimització de rendiment per a les imatges de WordPress

Hi ha moltes opcions d’optimització d’imatges disponibles a WordPress no poseu càrrega innecessària al servidor web. Veurem alguns dels consells més habituals d’optimització d’imatges que tothom us ofereix hauria de seguiu, juntament amb algunes altres que us resulten útils en ocasions especials.

JPG o PNG? Ús del format d’imatge correcte

El primer pas en l’optimització d’imatges és un bon començament. Diuen que una feina ben iniciada està a mig fer. Això és exactament el que fa a l’optimització d’imatges a WordPress. Tot comença amb l’elecció del format d’imatge adequat. JPG i PNG són els dos formats d’imatge més comuns que s’utilitzen en línia en el màrqueting de continguts.

El truc és comprendre quin format triar per a cada tipus d’imatge. Seleccionar el que fa és incorrecte provoca un augment monumental de la mida de la imatge. Aquí teniu les regles.

Quan s’utilitza el format PNG?

Per a imatges planes (com ara vectors, il·lustracions, tipus de lletra, logotips, pancartes, formes, pancartes, etc.), qualsevol cosa que es crei en un format vectorial com el format EPS o Adobe Illustrator (.AI), utilitzeu un PNG. Acabaràs obtenint una imatge optimitzada amb una pèrdua de qualitat gairebé nul·la. Si utilitzeu un JPG en aquest cas, no comprometreu la mida, però podríeu acabar amb la qualitat. De fet, a resolucions més altes, el PNG seria més lleuger sense pèrdues de qualitat. El JPG patiria.

Prenguem el seu exemple. Crearem una imatge plana a 5000px i la guardarem com a JPG i PNG.

Imatge de mostra utilitzada per fer la prova

Imatge plana
JPG233KB
PNG42KB

En poques paraules, la imatge JPG era un 455% superior a la PNG per a la mateixa resolució.

Quan s’utilitza el format JPG?

Per a tota la resta, utilitzeu un JPG. Qualsevol cosa que no sigui una imatge plana o vectorial, utilitzeu JPG. Fotos de persones, llocs, coses, etc.: utilitzeu JPG. Gairebé totes les fotos stock d’aquesta categoria utilitzen JPG. Si utilitzeu PNG en lloc d’un JPG, us quedaríeu en alguns greus problemes de rendiment.

Cal tenir més cura en aquest cas. Si utilitzeu un JPG en lloc d’una PNG, no hi haureu cap dany. Tanmateix, si utilitzeu un PNG sagnant en cas de JPG, creareu molt marge de mal. Mireu aquest exemple.

Configuració: He descarregat aquesta imatge de Shutterstock, que pesa al voltant 10,3MB a resolució de 6149 × 4562 – Esencialment una foto de fons de 28MP. A menys que estiguem preparant alguna cosa com un fulletó preparat per a imprimir, no utilitzarem la resolució completa de la foto als nostres blocs. Diguem que tenim una mida d’imatge màxima fixa del nostre blog 1600px.

Experiment: Redimensionarem la imatge font a 1600px i crearem quatre versions – dos en format PNG i dos en format JPG. Per a cada format (JPG / PNG), utilitzarem (a) els paràmetres de compressió recomanats i els (b) màxims de compressions.

Imatge de l’exemple per a l’experiment JEPG

Resultats: A continuació, es mostren els resultats en un bon gràfic que podeu seguir:

Imatge original (KB)

10870
Resolució objectiu1600px
FormatConfiguracióMida (KB)% De reducció
JPGProgressiu, qualitat = 8523198%
No progressista, qualitat = 8523998%
PNGCompressió = 0557549%
Compressió = 6185283%
Compressió = 9175084%

D’un primer cop d’ull, es podria pensar que hi ha un 84% de compressió de PNG prou bo enfront del 98% assolit en JPG. Això no és del tot cert. Si feu una ullada més a fons a les mides de la imatge, veureu que el PNG pesa una mica més d’1,7 MB mentre que el JPG és de 0,22 MB. El que vol dir, el PNG és 8 vegades més pesat que el JPG versió de la mateixa imatge a la mateixa resolució. En altres paraules, per a la mateixa imatge i resolució, la versió JPG és un 700% més lleugera que la PNG!

Per a la mateixa imatge i resolució, la versió JPG és un 700% més lleugera que la PNG!

Per regla general, utilitzeu PNG per a imatges planes i JPG per a la resta.

Llista de comprovació per a penjar les imatges en imatges

Hi ha tones de blocs on els editors carreguen directament la versió de resolució completa de la imatge a les seves publicacions. A continuació, es mostren uns quants indicadors per penjar fotografies d’estocs als blocs. Faig servir un programari gratuït anomenat IrfanView que té moltes funcions impressionants. Les il·lustraré a cadascú.

1. Redimensiona la teva imatge

En primer lloc, heu de decidir una resolució màxima per a totes les imatges del vostre lloc de WordPress. Qualsevol imatge per sobre d’aquesta dimensió es redimensionaria, tret que és naturalment més petita.

IrfanViewConversió per lots funció (premeu B després de llançar l’aplicació), que pot aplicar una llista de funcions a un munt d’imatges d’una sola vegada. Per als nostres propòsits, les funcions inclouen redimensionar, retallar, afegir filigrana, etc.

2. Elimineu les dades EXIF

Les fotos que es fan clic en una càmera normal tenen moltes incrustacions metadades – que no és més que una petita quantitat d’informació (però útil) sobre la imatge. Entre els exemples d’aquesta informació s’inclouen les coordenades GPS del lloc on es va fer clic a la foto, configuració ISO, model de càmera, etc..

Informació EXIF ​​d’una foto aleatòria feta clic al meu iPhone

A no ser que es tracti de blocs fotogràfics, en general no volem aquesta informació a la imatge d’una publicació d’un bloc. Quan deseu o converteix imatges per lots de conversió a IrfanView, normalment es eliminen les dades EXIF. Això ajuda a preservar la vostra privadesa, especialment la vostra ubicació física. La diferència de mida de la majoria de fotos és d’uns 200-300 KB per imatge.

3. Desa com a JPG progressiu

IrfanView va desar els JEPG com a progressius per defecte

Una imatge JPG progressiva carrega la capa de la imatge per capa, augmentant així el temps de càrrega. S’han iniciat xarxes de lliurament de contingut, com KeyCDN conversió automàtica JPG a JPG progressiu per accelerar el lliurament d’imatges i optimitzar l’emmagatzematge.

4. Configureu el DPI a 72

El DPI o punt per polzada és una mesura de la qualitat de la imatge. S’utilitza un valor DPI alt per a material d’impressió. Per a la web, el valor de 72 és perfecte.

D’acord, així que resumint l’anterior, a continuació us mostrem la meva configuració. Executo aquesta funció un cop he compilat totes les imatges de la meva publicació al bloc, abans de penjar-les a WordPress.

Configuració de conversió per lots a IrfanView per a un bloc de WordPress típic

5. Optimitza les teves imatges

Independentment de si heu utilitzat JPG o PNG, heu d’optimitzar la vostra imatge. Hi ha moltes eines en línia seriosament impressionants que us ajuden a optimitzar les vostres imatges i a desar-les molt de l’espai.

Parlo de serveis com ara TinyPNG o TinyJPG que simplement optimitza les imatges PNG / JPG amb alguns algoritmes avançats.

Imatges optimitzades a TinyPNG

Per ser sincer, no sé com funcionen els algoritmes, però sí, i sempre he pogut obtenir una reducció del 50-70%, tant se val com els estalvio millor.

També podeu comprar el versió professional del servei com a complement de Photoshop per USD $ 50. Tant les versions de Windows com de Mac estan disponibles. Per als meus propòsits, la versió en línia (juntament amb la Desa a Dropbox funció) funciona millor.

Plugins d’optimització d’imatges a WordPress

Fins ara, hem après els passos per aconseguir va començar dret. Què passa si ara heu ensopegat amb aquesta publicació i ja teniu centenars d’imatges penjades? Bé, aquí teniu alguns complements per ajudar-vos amb això:

EWWW Cloud Image Optimizer

Aquest complement és una forquilla de l’original i popular EWWW Optimitzador d’imatges connectar. Amb més de 500.000 descàrregues, aquest complement d’optimització d’imatges permet optimitzar les imatges a mesura que es pengen a WordPress.

El que la diferencia de la competència és la seva capacitat per optimitzar les imatges existents a la base de dades, la qual cosa produeix un enorme rendiment. També estalvia costos d’amplada de banda importants ja que la major part del trànsit prové d’articles antics. També podeu optar per habilitar la compressió d’imatges amb pèrdues (que a penes es veu a simple vista), però podeu estalviar molt d’espai i amplada de banda. En termes d’optimització de la tecnologia, pot utilitzar l’API de TinyPNG o TinyJPG per optimitzar imatges noves i existents.

Però aquí hi ha el problema. Molts amfitrions (inclòs WPEngine) no permeten el connector d’optimització d’imatges EWWW, ja que posa molta càrrega addicional al servidor. Si d’alguna manera aconseguiu deixar de banda les restriccions del servidor, és possible que es posi en suspens el vostre compte a causa d’infraccions de la política.

Aquí és on el EWWW Cloud Optimizer el plugin ve a jugar. Descarrega tot el càlcul necessari per optimitzar les imatges al núvol i simplement substitueix les imatges no optimitzades per les optimitzades. Com que la potència de la CPU pràcticament zero s’utilitza per a la compressió, no hi ha cap càrrega addicional a la temperatura. Això és vàlid per a totes les conversions d’imatges noves i existents al lloc de WordPress.

Plans i preus: Com s’esperaria, el connector no és gratuït, ja que el desenvolupador ha de pagar les factures del cloud computing. Tanmateix, la preus és extremadament raonable un cost de 9 USD per 3000 optimitzacions d’imatges per a una subscripció prèvia.

El complement EWWW Cloud Optimizer està dissenyat excel·lentment. L’escàner multimèdia us indica quantes imatges necessiteu optimitzar abans de realitzar una compra. A partir de les imatges del servidor, podeu comprar un pla de prepagament rellevant.

Plugin de WordPress TinyPNG

Aquest altre complement excel·lent d’optimització d’imatges que s’integra directament amb el servei TinyPNG / JPG. Es carrega automàticament imatges noves i existents que es carreguen a la mediateca de WordPress. Aquest complement ofereix un pla gratuït de 100 optimitzacions d’imatges al mes.

Freddy havia recopilat una llista de complements d’optimització d’imatges de temps enrere. Dóna-li la lectura si voleu saber-ne més sobre el tema.

Conclusió

Això ens porta al final del primer post d’aquesta sèrie. Al següent article, podreu esbrinar com alguns consells i trucs d’optimització d’imatges menys coneguts com ara prevenir l’enllaç directe, obtenir imatges de servidors remots i similars. Teniu alguns consells en virtut de la secció començar bé categoria? Ho fem saber en els comentaris a continuació.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map