Com millorar les imatges a WordPress

Com millorar les imatges a WordPress


Fa temps que les imatges eren massa grans per carregar-se a Internet. Avui, els llocs web no poden existir sense ells. Tot i que la velocitat d’Internet ha augmentat notablement al llarg dels anys, és vital que tingueu cura de les fotografies del vostre bloc.

Només perquè és fàcil carregar imatges al vostre lloc, això no vol dir que haureu de fer-ho sense cap preparació. Les imatges no optimitzades poden, de fet, ferir el vostre lloc de moltes maneres; des d’afectar la manera com els visitants pensen en vosaltres fins a la velocitat del vostre lloc web i els rànquings de SEO. Si encara no us ho heu pensat, us mostrem aquí diverses maneres de millorar les imatges a WordPress.

En aquesta guia, estem a punt de mostrar-vos:

  • Com optimitzar les imatges per a WordPress per agilitzar el vostre lloc i millorar el SEO
  • Canvia la manera com WordPress comprimeix les imatges JPEG
  • Els complements d’optimització d’imatges més populars per a WordPress
  • Afegeix una càrrega pereçosa de vídeos i imatges
  • Mostrar imatges abans i després de manera atractiva
  • Com crear imatges interactives: dibuixar, afegir descripcions i enllaços
  • Com regenerar mides addicionals de les imatges
  • Elimineu els atributs de la amplada i l’alçada de la imatge amb jQuery
  • Com crear mides d’imatge personalitzades a Media Uploader
  • Creeu captura de pantalla automàtica de qualsevol lloc web i publiqueu-lo com a imatge a la publicació

Contents

Com optimitzar les imatges per a WordPress per tal d’accelerar el vostre lloc i millorar el SEO

Per què haureu d’optimitzar les imatges per a WordPress? Si feu un esforç, podeu esperar el següent:

  • Lloc més ràpid
  • Millor SEO
  • Còpies de seguretat més petites
  • Menys ús de l’ample de banda
  • Usuaris més feliços

També heu de saber que hi ha diferents etapes en les quals podeu optimitzar les imatges. Podeu tenir cura de les imatges fins i tot abans de penjar-les a un bloc o bé podeu fer-ho després de la càrrega.

Prova ràpidament les imatges del vostre lloc

Abans de començar a treballar en l’optimització, podeu comprovar ràpidament la velocitat i el rendiment del vostre lloc. Si feu servir qualsevol de les eines de la llista, podreu conèixer ràpidament en quina forma es troben les imatges del vostre lloc.

Ens agrada fer servir GTmetrix que fins i tot us mostrarà les imatges exactes que provoquen que el vostre lloc es carregui més lent.

Optimitzeu les imatges per a WordPress abans de penjar-les

Durant la publicació de blogs, la majoria de la gent no fa tots els passos necessaris per optimitzar les seves imatges. Normalment, la gent només feia una foto des de la càmera o el telèfon intel·ligent, en descarregava una d’Internet o en crearia una mitjançant programari informàtic.

No pensen en formats, dimensions de la imatge ni noms dels fitxers. Si la imatge es veu bé, només suposa que està preparada per a Internet. Si no comproveu les imatges, esteu creant cap a un desastre.

Redimensiona les imatges

Redimensiona les imatges

No pengeu imatges al vostre lloc web de WordPress abans de comprovar l’amplada i l’alçada de cada imatge. Si mostreu imatges a un màxim de 700px, per exemple, no és necessari carregar una imatge més àmplia. Si ho feu, tindreu un fitxer més gran que farà que el vostre lloc sigui més lent, mentre que la sortida serà la mateixa. WordPress crearà una mida addicional, però aquesta no és l’excusa per no preparar les imatges abans de penjar-les.

Redimensionar imatges és senzill i ràpid. Hi ha moltes eines gratuïtes com Microsoft Paint que us ajudaran amb això. Fins i tot podeu trobar eines en línia gratuïtes per redimensionar imatges com Redimensiona fàcil.

Les dimensions de la imatge variaran d’un tema a un altre. Si no esteu segurs de quina hauríeu d’utilitzar, mireu de prop el vostre tema de WordPress i inspeccioneu les imatges, cerqueu documentació o demaneu ajuda..

Canviar la qualitat

Després de canviar les dimensions, hauríeu de considerar canviar la qualitat de les imatges. Depenent del programari, hi ha diferents maneres de modificar la qualitat de les imatges. Per exemple, el Photoshop sempre popular us permet guardar imatges per al web. Aquesta opció us permetrà desar imatges a una qualitat inferior, però estaran optimitzades per al vostre lloc.

A més, si escolliu guardar una imatge com JPEG, Photoshop us demanarà que trieu el nivell de qualitat. En aquest cas, rebaixar la qualitat de 12 a 8 només redueix considerablement la mida d’una imatge, mentre que la diferència de qualitat no serà tan gran.

Si encara no utilitzeu cap programari per canviar la qualitat de les vostres imatges, podeu provar-ho gratuïtament en línia PNG diminut eina. Només cal penjar una imatge i veure quina diferència pot fer.

Trieu el format adequat

Fins i tot després dels canvis de mida i qualitat, heu de considerar canviar el format. Per començar, només seleccionant el format adequat, podeu treure alguns quilobytes d’una imatge, si no més.

Format d'imatges

La regla general és molt senzilla. Si teniu una fotografia, feu-la JPEG. Si teniu un logotip, una imatge vectorial o un gràfic molt senzill generat per ordinador, aneu amb PNG. Si teniu una imatge realment petita sense degradats o voleu mostrar una animació senzilla com la que es mostra més amunt, podeu utilitzar GIF. Generalment, les imatges PNG seran força més grans que les JPEG i podreu beneficiar-vos del canvi de format.

En molts casos, la reforma d’imatges no comportarà diferències significatives de qualitat, mentre que es pot esperar la diferència de mida. La propera vegada abans de penjar una fotografia PNG, feu-ne una foto i intenteu guardar-la com a JPEG per veure la diferència. Per obtenir una explicació més detallada, consulteu el document diferència entre PNG, JPEG, GIF i SVG.

Teniu cura dels noms de fitxers

Tot i que el nom del fitxer pot semblar poc important, és realment una cosa que hauríeu de tenir molt en compte. El nom del fitxer d’imatges conté una informació valuosa per a SEO. Si voleu que altres puguin trobar la vostra imatge a Google i altres motors de cerca, haureu de donar-li un nom adequat.

Us suggerim que poseu nom a les imatges sense utilitzar espais. No oblideu incloure paraules clau si voleu classificar la pàgina i la imatge. Per exemple, si pengeu una imatge de Ferrari California, el nom del fitxer hauria de ser “ferrari-california.jpg”. Si utilitzeu un complement SEO per a WordPress, ja sabeu que comprova les paraules clau de les vostres etiquetes altes. Sí, és important tenir un nom d’imatge adequat.

Optimitza les imatges per a WordPress després de la càrrega

Després de preparar les imatges a l’ordinador, podeu continuar amb la càrrega. Esperem que les vostres imatges siguin de la mida i qualitat adequades. Assegureu-vos que el format i el nom de fitxer són correctes. Després de la càrrega, WordPress us demanarà informació addicional. No oblideu la informació meta; ompliu els detalls sobre les vostres imatges perquè pugueu organitzar-les fàcilment i preparar-vos per a SEO.

Títol, descripció, text i subtítol

Tot tenint cura dels aspectes tècnics, no us heu d’oblidar del SEO. Afegiu sempre el títol i la descripció als vostres suports. Això us ajudarà en la gestió de suports de WordPress i també treballarà cap a un millor SEO. Tampoc no oblideu l’etiqueta alt que es mostrarà per als visitants que no puguin veure adequadament la vostra imatge. No només això serà útil per als vostres usuaris, sinó que també us ajudarà amb SEO. La vostra pàgina es classificarà millor i els usuaris podran trobar les vostres noves imatges més fàcils.

Tot i que no necessitareu llegendes tot el temps, assegureu-vos d’afegir-ne fotos per a imatges que necessitin explicacions addicionals (per exemple, captures de pantalla).

Edita imatges amb WordPress

Si us adoneu que una imatge encara necessita una edició més, heu de saber que WordPress us permet fer-ho fins i tot després de penjar el fitxer.. Canvieu les fotografies de rotació, retallada i escala ja heu carregat Fins i tot podeu editar només una miniatura o totes les altres mides. L’editor natiu de WordPress és molt senzill, però us podeu estalviar de tant en tant.

Regenera totes les miniatures

La majoria de les tècniques anteriors us ajudaran amb nous fitxers d’imatges que encara esteu a punt de penjar. Però, i si teniu centenars si no milers d’arxius que ja heu penjat al vostre lloc de WordPress? No et preocupis; encara podeu optimitzar aquestes imatges i canviar-ne les mides.

Per obtenir una solució ràpida, us pot interessar un complement gratuït Regenera les miniatures que ha utilitzat més d’un milió d’usuaris. Si voleu més control sobre les imatges, hauríeu de consultar alguns dels millors complements de WordPress per a l’optimització d’imatges que us mostrarem a les línies següents d’aquest article.

Com regenerar mides addicionals de les imatges

Utilitzeu plugins de WordPress

Per descomptat, hi ha desenes de complements de WordPress que us poden ajudar a optimitzar les imatges del vostre lloc. Desplaceu-vos cap avall per veure els millors complements de WordPress per optimitzar les imatges.

Lazy Carregueu imatges quan sigui necessari

De vegades, la qualitat de les imatges serà molt més important que la seva mida. Això es deu principalment als fotògrafs que volen que les seves fotos siguin de primer nivell. No poden arriscar-se a reduir la mida ni la qualitat dels fitxers. Tot i això, això no vol dir que haureu d’oblidar-vos de l’optimització. Per optimitzar les imatges per a WordPress en aquest cas, hauríeu de considerar la càrrega més mandrosa.

La càrrega pereçosa és una tècnica que carrega imatges només quan els usuaris les necessiten (desplaçar-se cap a ells). Per exemple, si heu penjat vint fotografies d’alta qualitat en un sol article, alentirien el vostre lloc considerablement. Però si carregueu les imatges de mandra, l’article seria ràpid i les fotos només es carregarien quan calgui, en el moment en què un usuari arriba a les portes..

Té imatges sensibles

Tot i que la majoria de temes de WordPress tinguin resposta, això no significa necessàriament que les vostres imatges també tinguin resposta. Com que no voleu carregar-se una imatge gran en una petita pantalla, haureu de registrar mides d’imatges addicionals per al vostre lloc. Si el vostre tema no utilitza imatges sensibles, considereu la possibilitat de contractar un professional per a la feina, no serà tan fàcil com pot semblar.

Optimitza les imatges per a les xarxes socials

Si voleu assegurar-vos que les vostres imatges es veuen bé a les xarxes socials, haureu de fer un pas addicional i optimitzar metaetiquetes i marcatge d’esquemes.

Si utilitzeu un complement SEO com Yoast, no oblideu comprovar la configuració. Per exemple, Yoast us permetrà configurar algunes coses relacionades amb les xarxes socials. Per tant, navegueu cap a SEO -> Social i introduïu la informació a Facebook, Twitter, Google+ i Pinterest.

Si voleu més informació i voleu optimitzar imatges per a llocs web addicionals de xarxes socials, consulteu-ne WPSSO: metaetiquetes + Marca esquema precisa per a l’optimització de l’ús compartit social i el complement de SEO.

Canvia la manera com WordPress comprimeix les imatges JPEG

Si pengeu un munt d’imatges JPEG al vostre lloc web de WordPress, és possible que haureu notat que perden la seva qualitat original. Si us heu preguntat si WordPress té la culpa, ara tindreu la vostra resposta – sí, ho és!

Un cop pengeu una imatge en format JPEG, WordPress canvia automàticament la compressió i decideix que voleu que la imatge perdi de qualitat. Per ser més específic, WP utilitza una compressió del 90% en els vostres JPGE. És fantàstic si les vostres imatges només es poden utilitzar com a miniatures de la publicació o es mostren en una publicació, però si pengeu les fotografies, voleu que siguin el millor possible, no??

Per sort, només necessitareu una línia de codi per canviar-ho.

Atureu la compressió d’imatges JPEG:

Si no voleu comprimir les vostres imatges JPEG, simplement copieu i enganxeu el codi següent al fitxer funcions.php:

add_filter ('jpeg_quality', funció ($ arg) {retorn 100;});

No oblideu guardar els canvis i esteu preparats per penjar imatges.

D’altra banda, és possible que les imatges no siguin tan importants per a vosaltres. Per tant, podeu comprimir encara més i estalviar temps en la càrrega del vostre lloc. Si canvieu l’últim número d’aquesta línia de codi, canviareu la qualitat de les imatges que s’hagueu penjat recentment.

Comprimeix encara més les imatges JPEG:

Com més baix sigui el nombre, més imatges es comprimaran. Per exemple, per comprimir aquests JPEG encara més, necessitareu aquest codi:

add_filter ('jpeg_quality', funció ($ arg) {retorn 80;});

No t’oblidis; el nivell de compressió predeterminat és de 90.

Important: Només afectarà les imatges que carregueu després d’enganxar el codi a funcions.php. Per canviar la mida i la qualitat de les imatges que ja teniu a la biblioteca, necessitareu un complement. Consulteu com regenerar mides addicionals de les imatges.

Els complements d’optimització d’imatges més populars per a WordPress

Al començament d’aquest article, vam parlar de com optimitzar les imatges per a WordPress per tal d’accelerar el vostre lloc i millorar el SEO. Com heu pogut veure, hi ha alguns mètodes diferents que podeu utilitzar. És important tenir cura de les imatges fins i tot abans de penjar-les al vostre bloc. Però quan ja hi ha imatges al lloc, pot ser que sigui impossible imposar-se de nou totes les imatges per separat i tornar-les a carregar..

No et preocupis; ningú no espera que ho faci en primer lloc. Quedeu amb nosaltres els propers minuts, a punt de mostrar-vos els complements d’optimització d’imatges més populars de WordPress.

Per optimitzar les imatges, només haureu de seleccionar el complement de la llista. Haureu de configurar-lo i triar les coses que us farà el connector. Després d’això, podreu relaxar-vos i delegar el treball en el complement que escolliu, alhora que podreu començar a organitzar els vostres fitxers multimèdia..

Els següents complements us ajudaran a comprimir les imatges de qualsevol lloc de WordPress que tingueu. Ells faran que el lloc es carregui més ràpid i, finalment, l’ajudaran a millorar el SEO.

WP Smush

PREU: Gratuït

Amb més de 700.000 instal·lacions actives, WP Smush ha de ser un dels millors complements d’optimització d’imatges de WordPress. Pot optimitzar ràpidament les imatges mitjançant diferents tècniques de compressió. La gran cosa sobre la compressió d’imatges amb WP Smush és que les imatges no perdran qualitat. No ens creieu? Prova el connector.

Quan hem parlat de preparar imatges per a WordPress, hem esmentat que el canvi de mida és una part crucial del procés d’optimització. Amb aquest complement no us haureu de preocupar, ja que WP Smush us permet definir les dimensions màximes. Un cop fet això, totes les imatges més grans s’escalaran automàticament abans d’afegir-les a la biblioteca.

Aquest fantàstic complement pot funcionar amb fitxers JPEG, GIF i PNG. Funciona amb tots els vostres directoris, s’ocupa de forma automàtica dels fitxers adjunts i, fins i tot, funciona en diversos llocs web. Podeu operar manualment a cada imatge o editar-ne una cinquantena d’engròs. Si voleu resultats encara millors i més opcions, consulteu WP Smush PRO.

EWWW Optimitzador d’imatges

PREU: Gratuït

Darrere del nom divertit, hi ha un dels complements d’optimització d’imatges més populars de WordPress. Igual que l’anteriorment esmentat, EWWW Image Optimizer pot comprimir les imatges sense afectar-ne la qualitat. Quan penseu que el connector pot agilitzar el vostre lloc en qüestió de segons, ja us en podreu baixar. Un cop fet això, podreu optimitzar imatges a granel i galeries com GRAND FlaGallery, NextCellent i NextGEN fins i tot obtindran les seves pròpies pàgines Bulk Optimize..

Totes les imatges que utilitzin la classe WP_Image_Editor a WordPress seran automàticament optimitzades, alhora que podeu treballar manualment la màgia en tots els altres. Ens agrada que seleccioneu les carpetes que voleu optimitzar. Per obtenir més detalls sobre això i quins complements utilitzen la classe, obriu l’oficial Pàgina EWWW Optimitzador d’imatges al dipòsit de WordPress.

Comprimeix imatges JPEG i PNG

PREU: Gratuït

Minúscules imatges de compressió

Si el petit panda que té un logotip de WordPress no us fa voler obtenir més informació sobre aquest complement, no sabrem què serà. I si el panda sembla familiar, és perquè és el mateix que us ajuda a comprimir imatges al lloc web de TinyPNG. Sí, sembla que l’animal és més versàtil del que creíem inicialment. Però centrem-nos en el connector.

Si aneu amb aquest complement, Panda optimitzarà automàticament les vostres imatges. Cada vegada que en pengeu un de nou, el complement es farà càrrec i farà la seva feina. Tot i així, podeu optimitzar imatges individuals o fer-ho de manera massiva només accedint a la mediateca.

Comprimir les imatges JPEG i PNG fins i tot admeten PNG animats, funciona perfectament en un lloc multisector, és compatible amb WooComerce i no tindrà problemes amb WP Offload S3.

El fantàstic del complement és que permet establir atributs d’amplada i alçada màxims per a totes les imatges. Si us heu preocupat per què farà les metadades, no us preocupeu; el panda mantindrà tota la informació intacta.

No hi ha límits de mida del fitxer, podeu establir un giny de tauler de comandament i fins i tot funciona amb l’aplicació mòbil de WordPress. Per tot això, Compress JPEG i PNG imatges compta amb més de 100.000 instal·lacions actives i mereix un lloc a la llista de millors complements d’optimització d’imatges per a WordPress.

Imsanitat

PREU: Gratuït

Imsanitat

Tot i que la imatge de portada d’aquest complement us pot espantar, feu un segon i mireu totes les funcions de Imsanity. Oh, fins i tot el nom del connector sona demencia, oi? Un cop estigueu bé amb el nom del connector, veureu que té molt a oferir.

Imsanity pot escalar automàticament imatges, us permet definir les dimensions màximes i, fins i tot, ofereix una opció de redimensionament massiu. Això és important si ja teniu centenars d’imatges al vostre bloc que necessiten optimització.

Aquest complement gratuït és una opció fantàstica si no voleu lluitar gaire amb la configuració del complement. Només cal instal·lar i activar Imsanity, establir unes quantes opcions i ens podeu oblidar. gestionarà el seu propi camí cap a l’optimització d’imatges.

Ens ha encantat l’opció que permet convertir les imatges BMP en JPG. Per si teniu molts fitxers BMP que heu carregat per error fa un temps, això serà un salvament.

ShortPixel Image Optimizer

PREU: Gratuït

ShortPixel Image Optimizer

Amb més de 30.000 instal·lacions actives, ShortPixel Image no deixa de ser un dels complements d’optimització d’imatges més populars de WordPress. El connector està dotat de funcions i serà imprescindible per als llocs que tinguin moltes imatges per optimitzar.

ShortPixel Image Optimizer no només optimitzarà documents JPG, PNG, GIF i PDF per a vosaltres, sinó que també us permetrà Convertiu qualsevol imatge JPEG, PNG o GIF a WebP. El complement funciona bé amb altres complements de la galeria i no li importa si el vostre lloc utilitza HTTP o HTTPS. Et permetrà eliminar les dades EXIF ​​de les imatges (cosa que els fotògrafs els encantarà tenir).

El complement reconeix les imatges que ja han optimitzat, de manera que les pot saltar quan calgui. Podeu permetre o desactivar l’optimització automàtica i feu molt més amb aquest fantàstic complement. Consulteu la pàgina oficial del dipòsit per veure totes les funcions.

Optimus – Optimitzador d’imatges de WordPress

PREU: Gratuït

Optimus

De la mateixa manera que el connector esmentat anteriorment, Optimus optimitzarà les vostres imatges per a WordPress i farà que sense afectar la qualitat de les vostres imatges. Podeu deixar que el complement resolgui les coses automàticament o podeu desactivar l’opció i només optimitzar les imatges quan sigui necessari.

Optimus funciona en diversos llocs web, no és gens estrany als llocs de comerç electrònic de WordPress i està completament optimitzat per a les aplicacions de mòbils de WordPress i Windows Live Writer. Accelerarà el vostre lloc sense que hagueu de tocar una línia de codi. El complement ofereix molt més, però haurà d’incloure la versió premium. Per obtenir més informació, aneu a la pàgina oficial del dipòsit de plugins de WordPress.

Afegeix una càrrega pereçosa de vídeos i imatges a WordPress

Una vegada que comenceu a afegir molta quantitat de vídeo i material d’imatges al vostre lloc web, és obvi que començarà a carregar-se més lent. No importa d’on provenen, els vídeos i les imatges grans actuaran com un pes pesat al vostre lloc i faran que els vostres visitants esperin molt més del que calen per carregar tot el contingut. Amb WordPress, això no hauria de ser un gran problema, i aquí teniu la manera de resoldre la situació fàcilment.

Si coneixeu el pas per PHP, hi ha un gran article sobre com afegir la càrrega pereçosa d’imatges i el desplaçament infinit escrit pels nostres companys a Temes elegants.

Si no és així, en les properes línies esmentarem alguns dels més populars plugins de càrrega que ho faran feu que el vostre lloc es carregui més ràpid. I ni tan sols haureu de fer molt més que instal·lar un complement i configurar-lo en pocs passos ràpids.

Còrrega pereçosa de vídeos

PREU: gratuït

Còrrega pereçosa de vídeos

Si teniu molts vídeos de Youtube i Vimeo, heu de plantejar la instal·lació d’aquest complement. Un cop el configureu, el complement col·locarà una imatge al vostre vídeo i, per això, el lloc web es carregarà molt més ràpidament. Una vegada que el visitant es desplaci cap a un vídeo, es mostrarà aquesta imatge amb un botó de reproducció. Després d’un clic, el vídeo començarà a carregar-se i a reproduir-se. Podeu veure una demostració senzilla al lloc del desenvolupador.

WP YouTube Lyte

PREU: Gratuït

WP YouTube Lyte

Aquest complement farà la seva feina d’una manera ràpida i senzilla. Després d’instal·lar-lo, només cal afegir un enllaç al vídeo de Youtube o bé utilitzar un codi curt per afegir-ne un. Podeu triar entre afegir un vídeo normal, una llista de reproducció o només un àudio del vídeo seleccionat. Després, els vostres vídeos de Youtube obtindran una imatge que us permetrà carregar mandrosos. Simplement feu clic a la imatge per començar el vostre vídeo o àudio.
Vegeu una demostració al lloc del desenvolupador.

a3 Càrrega pereçosa

PREU: Gratuït
DEMO 1
DEMO 2

a3 Càrrega pereçosa

Aquest està dedicat al vostre lloc mòbil. Si voleu mostrar moltes imatges i / o vídeos que vulgueu mostrar als vostres visitants en dispositius mòbils, feu una ullada a a3 Lazy Load. Us permetrà afegir càrregues mandroses a les vostres imatges i vídeos i fins i tot el complement us permetrà escollir efectes de transició que apareixeran als usuaris mentre es desplacen pel contingut que es carrega..

A la zona d’administració, podeu activar i desactivar fàcilment el contingut que vulgueu carregar. Per a aquells activats, el contingut només es carregarà en el moment en què un visitant es desplaci cap a la part del contingut.
Hi ha una demostració excel·lent que inclou 1000 imatges. Cadascuna només es carrega una vegada que es desplaci cap a ella. Com aquest complement de vídeos de càrrega mandrosa també, hi ha una demostració de vídeo que podeu veure fent clic a l’enllaç de dalt.

Càrrega pereçosa BJ

PREU: Gratuït

Càrrega pereçosa BJ

Si no necessiteu assistència per a vídeos i només voleu que les vostres imatges es carreguessin més, podeu consultar aquest complement WP. Un cop instal·lada i configurada, substituirà les imatges, miniatures, imatges de Gravatar i, fins i tot, iframes amb un marcador de posició. De forma semblant a un complement anteriorment esmentat, només carregarà contingut una vegada que hi arriba un usuari.

Tant si es tracta d’imatges com de vídeos que es volen carregar mandrosos, un dels complements esmentats us ajudarà en qüestió de segon. Tots ells són gratuïts, per la qual cosa no hi ha excusa per no provar almenys un dels plugins i veure quina pesada tindrà les espatlles. Per descomptat, hi ha molts altres complements amb la mateixa funció i podeu navegar i provar-los tots.

Mostrar imatges abans i després de manera atractiva

Estem segurs que ja heu vist molts exemples d’imatges abans / posteriors. No ho sabeu, però el primer que hem de tenir en compte quan veiem la frase “abans i després” és un programa d’entrenament de fitness on la gent mostra el seu cos abans i després d’un programa d’entrenament..

Si hi penseu, la majoria de llocs web utilitzen un enfocament senzill per mostrar les diferències: agafen les dues imatges i les col·loquen una al costat de l’altra o fins i tot una per sobre de l’altra. Si voleu el mateix resultat, no llegireu aquest article perquè ja sabeu com fer-ho.

Què passa si us expliquéssim que hi ha una manera visualment impressionant de resoldre aquest problema abans / després i només a l’abast de la mà? Bé, hi ha i després d’una configuració, lloareu els desenvolupadors perquè el resultat final sigui realment fantàstic.

Vint i vint

PREU: gratuït

Vint i vint

Twenty Twenty és el nom d’aquest fantàstic complement que podeu descarregar gratuïtament al dipòsit de complements de WordPress.

El complement us permetrà col·locar una imatge sobre l’altra i us permetrà jugar amb un control lliscant perquè pugueu ocultar / revelar la imatge. Consulteu la demostració i veureu de què parlem.

D’acord, ara quan us heu enganxat a aquest petit complement, anem a veure com es pot crear aquest efecte impressionant. Tot i que és relativament fàcil recrear l’efecte demostratiu, encara haureu de conèixer la vostra manera de fer servir HTML bàsic. Som-hi:

  1. Creeu una publicació nova o obriu-la
  2. Inseriu dues imatges a la publicació. Si treballeu en un editor visual, haureu de veure la imatge una per sobre de l’altra. Si treballeu en un editor de text, haureu de veure un codi similar a aquest:
  3. 
    
    
    
  4. Introduïu l’etiqueta [vint vint] abans de la primera imatge
  5. Després del segon, introduïu l’etiqueta [/ vint-i-vintè]
  6. Haureu d’acabar amb una cosa així al vostre Editor de text:

    [vintè vint]
    
    
    
    [/ vint-i-vint]
    
  7. Assegureu-vos que les imatges siguin de la mateixa mida per obtenir els millors resultats
  8. Vista prèvia o publica la teva publicació i gaudeix de la teva visualització impressionant abans i després de les imatges

Com crear imatges interactives: dibuixar, afegir descripcions i enllaços

Avui és difícil executar un lloc web sense multimèdia. Imatges, vídeos i música formen part de pràcticament tots els llocs web. Un usuari mitjà d’Internet depèn molt dels estímuls visuals, de manera que heu de tenir cura de les parts visuals i interactives del vostre lloc. Els articles amb imatges reben Un 94% més de visualitzacions que els que no en tenen. A més, ja se sap que la multimèdia en llocs web pot augmentar el ROI de màrqueting de contingut.

Esperem que no us hagi de convèncer per tenir cura de les imatges del vostre lloc. Encara que no utilitzeu imatges en articles (que hauríeu de), feu servir imatges destacades, oi? Hi ha molts complements de galeria que us poden ajudar a gestionar imatges del vostre lloc de WordPress, podeu tenir temes relacionats amb la fotografia, connectar Instagram al vostre lloc de WordPress i fer molt més. Però, si voleu crear contingut més interactiu?

Per començar, potser us interessaria afegir l’efecte d’imatge abans que després que us agradarà als usuaris. No us oblideu de la realitat virtual a WordPress, que és cada vegada més popular després que Automattic introduís VR a WordPress.com. Tot i així, falta alguna cosa. És possible fer imatges interactives amb parts clicables? Sí, això és possible i estem a punt de mostrar-vos què divertit i fàcil és.

Cridar l’atenció

PREU: Gratuït
DEMO

El primer que us agradarà d’aquest complement és que és completament gratuït! Igual que amb qualsevol altre complement del dipòsit de WordPress, podeu descarregar-lo, instal·lar-lo i activar-lo en qüestió de minuts. La versió gratuïta us permetrà treballar amb una imatge interactiva. Si voleu més informació, haureu d’incloure la versió PRO, però en parlarem més endavant.

El complement respon i no us haureu de preocupar de que les imatges interactives es mostrin correctament en cap dispositiu. No només que la imatge s’escalegi segons la mida de la pantalla, sinó que funcionarà en la majoria de navegadors moderns i antics (escriptori i mòbil). Draw Attention utilitza elements de lona quan es mostren als navegadors nous mentre que es tornaran a veure en mapes d’imatges si el carregueu en un lloc anterior.

Característiques

Abans d’exercir un exemple que us mostrarà quina potència té aquest complement senzill, vegem què espereu d’Atractar atenció:

  • Dibuix – Després de penjar una imatge, tindreu la possibilitat de dibuixar-hi formes. Seleccioneu qualsevol part de la imatge que sigui seleccionable / clicable
  • Colors – Personalitzeu els colors perquè els punts hotspots s’ajusten al disseny del vostre lloc
  • Ressalteu el cursor – Mostra una altra part de la imatge si un usuari passa per sobre de la part seleccionada
  • Mostra més informació – Mostra més informació sobre la part seleccionada de la imatge
  • Vés a l’URL – Redireccionar els usuaris a qualsevol URL si fan clic a la selecció

Dibuixa la configuració d’atenció

Exemple: mapa interactiu de Hawaii

Utilitzarem l’exemple del lloc de demostració per mostrar-vos què podeu fer exactament amb Draw Attention. Així, anem a veure com és un mapa interactiu de Hawaii quan es crea amb el connector.

El primer que hauríeu de fer és trobar una imatge de les illes de Hawaii. Després de navegar cap a Crida l’atenció -> Edita la imatge, hauríeu de penjar la imatge a la zona de la barra lateral dreta. Un cop es carrega la imatge, la diversió pot començar.

Aquí podeu escollir els colors per a colors destacats (color, vora, opacitat, etc.), estil el “quadre d’informació” (imatge, títol, color del text, etc.). Si no voleu seleccionar manualment tots els colors per a la imatge, podeu triar un esquema de colors a la barra lateral dreta..

Crida l’atenció: com crear imatges interactives a WordPress

La part més màgica succeeix a la Zones hotspotades pantalla de configuració. Aquí obtindreu la imatge carregada a mida completa. Tot el que heu de fer ara és començar a dibuixar i crear un hotspot nou. Podeu afegir tants punts com vulgueu, cosa que significa que podeu crear seleccions completes com vulgueu. S’obté a crear tants punts hots, i cadascun pot tenir la seva pròpia configuració.

Per tant, en aquest exemple, haureu de seleccionar una de les illes. Trieu un títol per a l’illa, afegiu-ne una descripció i la imatge addicional que es mostrarà un cop l’usuari hoverpot l’hotspot (part dreta de la imatge GIF mostrada més amunt).

Hauríeu de repetir el procés per a cadascuna de les illes que vulgueu que siguin interactives. Un cop tingueu a punt els vostres hotspots, només n’heu de copiar el codi curt del costat dret. Enganxeu el codi curt a una publicació, pàgina, giny o on vulgueu mostrar el nou mapa interactiu i ja heu acabat. Si voleu redirigir els usuaris a qualsevol altra pàgina un cop han fet clic a les seleccions, només heu de seleccionar l’URL en lloc de la descripció. Fàcil com això!

Versió PRO

Si bé la versió gratuïta serà perfecta si necessiteu una sola imatge, la Versió PRO us permetrà tenir tantes imatges interactives al vostre lloc com vulgueu. Tot i que això serà el més important a tenir en compte, la versió PRO us permetrà fins i tot més que múltiples imatges.

La funció Opcions de disseny us permetrà mostrar més informació sobre les parts seleccionades de la imatge. Per exemple, haureu de mostrar la informació en una caixa de llum o en una barra d’eines senzilla que apareixerà un cop que l’usuari passi sobre la part seleccionada de la imatge.

També hi ha vint palets de colors predefinits, de manera que no heu de personalitzar tots els colors de forma manual. La versió PRO us costarà 74 dòlars per una sola llicència de lloc, però si necessiteu més d’una imatge interactiva, aquesta serà una idea que no us permet.

Com regenerar mides addicionals de les imatges

És relativament fàcil registrar noves mides d’imatge al tema de WordPress. Un cop heu explicat al vostre sistema quina mida deuen ser les vostres imatges, anomenades i decidides com tallar-les, podreu distribuir les imatges a qualsevol lloc que vulgueu. Però què passa amb les imatges antigues?

Si heu utilitzat una de les tècniques que us hem mostrat, heu preparat la gespa per a noves imatges. Si utilitzeu les mides d’imatge de registre recent per a miniatures de la publicació o si els autors poden utilitzar-les en publicacions, les regles noves només s’apliquen a les imatges que es carreguen després de fer el canvi al fitxer funcions.php. Per canviar les imatges anteriors, us recomanem que utilitzeu el complement Regenerar miniatures.

Regenera les miniatures:

PREU: Gratuït
  1. Anar a Connectors-> Afegir nous
  2. Cercar “Regenera les miniatures”
  3. Instal·leu i activeu el complement
  4. Desplaceu-vos a Eines-> Regen.Tumbnails

Si voleu canviar la mida de totes les imatges, només cal que feu clic al botó “Regenera totes les miniatures” i espereu que el complement faci el treball dur..

Com regenerar mides addicionals de les imatges

Si voleu veure les imatges que es podran redimensionar o si voleu redimensionar només algunes de les imatges, aneu a la vostra mediateca on trobareu una nova opció a “Accions a granel” i una al costat de cada imatge de la galeria.

El bo del complement és que no suprimeix les imatges originals. Només crearà noves mides d’imatge que podeu utilitzar al vostre tema, mentre que les originals us quedaran més endavant o les suprimireu manualment si decidiu que no les necessiteu.

Això és. Gaudeix de les teves miniatures o fes un cop d’ull Mides de imatge senzilla plugin que pot fer el mateix.

Elimineu els atributs de la amplada i l’alçada de la imatge amb jQuery

Quan afegeix imatges a una publicació de WordPress, el sistema afegeix automàticament els atributs d’alçada i amplada a la imatge. Normalment és una cosa bona, però hi ha vegades que no us agrada que cada imatge tingui aquests atributs.

Si voleu deixar els atributs al punt de la càrrega, podeu fer-ho mitjançant una funció senzilla que us vam mostrar la darrera vegada.

Però si heu llegit l’article o heu provat la funció, heu notat que només afecta les imatges carregades després de la instal·lació de la funció al vostre sistema WP. Si ja teniu una base de dades plena de publicacions amb imatges inserides, la funció esmentada no us ajudarà gaire amb els vostres atributs d’imatge antics.

Com que probablement no podeu recórrer manualment totes les imatges i suprimir l’amplada i l’altura una a una, és probable que necessiteu una altra funció que returi aquests atributs per a totes les imatges existents incrustades a les publicacions. En aquest cas, esteu al lloc correcte, perquè estem a punt de mostrar-vos una manera senzilla d’eliminar automàticament els atributs d’imatge d’amplada i alçada amb poques línies de codi jQuery. No us espanteu amb la frase anterior, ni tan sols heu de saber què és el jQuery, només cal que seguiu els tres passos següents i us acabareu amb una bona imatge.

Elimina els atributs de l’amplada i l’alçada de la imatge:

  1. Obriu el fitxer header.php des de la vostra carpeta temàtica
  2. Copieu i enganxeu aquest codi a qualsevol lloc i Etiquetes:
  3.  
  4. Guardar canvis

I ja heu acabat. El codi farà la seva màgia després d’obrir una publicació que conté una imatge i esborrarà les etiquetes d’amplada i alçada.

Com crear mides d’imatge personalitzades a Media Uploader

Si utilitzeu Media Uploader per tractar imatges a WordPress, probablement heu vist nombroses opcions d’imatges. Entre molts, podeu triar una mida d’imatge que podeu enviar al vostre article.

Hi ha opcions de miniatura, mitjana, gran i mida completa per triar, però totes aquestes opcions tenen valors predefinits. De manera que, si feu servir un tema personalitzat, sovint us queda enganxat amb l’amplada i l’alçada canviants per a cada imatge una i altra vegada.

De fet, no hauràs de fer-ho. Hi ha una petita funció neta anomenada add_image_size () que és una excel·lent eina per als desenvolupadors. I després d’aquest article, us resultarà útil.

Suposem que el vostre tema té una amplada personalitzada i que voleu incorporar imatges perfectament per incloure-hi perfectament. Diguem que l’amplada és 666px (no entendrem per què haureu definit l’amplada a aquest número, és la vostra elecció). Per fer-ho, heu d’afegir un botó de ràdio addicional a Media Uploader. Amb el codi següent, afegiràs una mida més que és la meitat de la mida original.

  1. Obre el teu fitxer funcions.php
  2. Copieu i enganxeu aquest tros de codi:
  3. funció custom_image_sizes () {
    add_image_size ("mida única", 333, 333, cert);
    add_image_size ("una altra mida", 666, 666, cert);
    }
    
    add_action ('init', 'custom_image_sizes');
    
    funció show_image_sizes (mides $) {
    $ talles ['one-size'] = __ ('Mida personalitzada 1', 'aquíwp');
    $ talles ['another-size'] = __ ('Mida personalitzada 2', 'isitwp');
    retornar les mides de $;
    }
    
    add_filter ('imatge_dimensió_noms_choose', 'mostra_imatge_imatges');
  4. Guardar canvis
  5. Proveu d’afegir una imatge del carregador de suports on haureu de veure les noves opcions de mida a la secció “Configuració de la visualització adjunt”

Creeu captura de pantalla automàtica de qualsevol lloc web i publiqueu-lo com a imatge a la publicació

Si voleu mostrar una miniatura d’un lloc web, haureu d’anar al lloc web, imprimir-lo o fer una captura de pantalla amb un programa o un complement del navegador. Aleshores, haureu de modificar la imatge, tallar-la a la mida adequada i penjar-la al vostre WordPress de manera que pugueu utilitzar la captura de pantalla en una publicació.

Si no heu de fer aquesta instantània de tant en tant, no serà cap problema, però si feu servir captures de pantalla de diferents llocs web amb més freqüència, us agradarà sentir que hi ha una funció impressionant que estalvieu-vos el temps i els nervis.

En aquesta part de la guia, estem a punt de mostrar-vos la funció completa que crea un codi curt que podeu utilitzar per prendre instantànies de qualsevol pàgina web que vulgueu.

Crea captura de pantalla automàtica:

  1. Funcions obertes.php
  2. Copieu i enganxeu el codi següent:
  3. funció wp_webscreen ($ atts, $ contingut = NULL) {
    extracte (shortcode_atts (matriu (
    "snap" => 'http://s.wordpress.com/mshots/v1/',
    "url" => 'http://www.firstsiteguide.com',
    "alt" => 'wploop',
    "w" => '600', // amplada
    "h" => '450' // alçada
    ), $ atts));
    
    $ img = ''. $ alt. '';
    tornar $ img;
    }
    add_shortcode ("pantalla", "wp_webscreen");
  4. Canvia les variables predeterminades de la matriu
  5. Guardar canvis

Aquesta funció crea un codi curt que podeu utilitzar fàcilment a qualsevol lloc del lloc web de WordPress. Si voleu utilitzar la captura de pantalla d’una pàgina web en una publicació, en un widget de la barra lateral o en el vostre peu de pàgina, per exemple, simplement c / p el codi curt al lloc correcte:

[url de pantalla = ”http://www.firstsiteguide.com” alt = ”fsg” w = ”600 ″ h =” 450 ″]

El que és excel·lent amb aquesta funció és que guarda la imatge com a URL dinàmica, cosa que significa que, un cop creada una instantània amb el codi curt, es renovarà automàticament en el futur i mostrarà sempre els aspectes actuals del lloc web especificats al codi curt..

Tingueu en compte que podeu canviar els paràmetres del codi curt directament des d’ell. No heu de modificar el codi al fitxer funcions.php si voleu agafar la instantània d’un altre URL ni fer la captura en una altra dimensió..

Exemple:

Diguem que voleu fer una captura de pantalla de Google i fer-ne una dimensió de 200 × 400 píxels:

[url de pantalla = “http://www.google.com” alt = “Google” w = “200” h = “400”

Podeu fer-ho tot més fàcil si guardeu el codi curt en un botó de manera que pugueu inserir-lo en una publicació amb un sol clic d’un botó.

Conclusió

No heu d’instal·lar tots els plugins i funcions que hem esmentat per millorar les imatges del vostre lloc de WordPress. Però esperem que hàgiu trobat almenys alguns consells que us ajudaran a optimitzar les imatges o a millorar-les de qualsevol manera.

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