Cum să îmbunătățiți și să optimizați imaginile pentru WordPress

A trecut mult timp de când imaginile erau ceva prea mare pentru a fi încărcate pe internet. Astăzi, site-urile web nu pot exista fără ele. Chiar dacă viteza internetului a crescut dramatic de-a lungul anilor, este vital să aveți grijă de fotografiile de pe blogul dvs.

Doar pentru că este ușor să încărcați imagini pe site-ul dvs., asta nu înseamnă că ar trebui să faceți acest lucru fără niciun fel de pregătire. De fapt, imaginile neoptimizate vă pot afecta site-ul în multe feluri; de la afectarea modului în care vizitatorii se gândesc la tine până la viteza site-ului tău web și a clasamentului SEO. Dacă încă nu v-ați gândit la asta, suntem aici pentru a vă arăta câteva modalități de îmbunătățire a imaginilor în WordPress.

Cum să optimizați imaginile pentru WordPress, astfel încât să vă accelerați site-ul și să îmbunătățiți SEO

De ce ar trebui să optimizați imaginile pentru WordPress? Dacă depuneți un efort, vă puteți aștepta la următoarele:

• Site mai rapid
• SEO mai bun
• Copii de rezervă mai mici
• Utilizare mai mică a lățimii de bandă
• Utilizatori mai fericiți

De asemenea, trebuie să știți că există diferite etape în care puteți optimiza imaginile. Puteți avea grijă de poze chiar înainte de a le încărca pe un blog sau puteți face acest lucru după încărcare.

Testați rapid imagini pe site-ul dvs.

Înainte de a începe să lucrați la optimizare, puteți verifica rapid site-ul pentru viteză și performanță. Utilizând oricare dintre instrumentele din listă, veți afla rapid în ce formă sunt imaginile de pe site-ul dvs.

Ne place să folosim GTmetrix, care vă va arăta chiar imaginile exacte care determină încărcarea mai lentă a site-ului dvs.

Optimizați imaginile pentru WordPress înainte de încărcare

În timp ce blogează, majoritatea oamenilor nu fac toți pașii necesari pentru a-și optimiza imaginile. De obicei, oamenii fac doar o fotografie de pe camera lor sau de pe smartphone, descarcă una de pe Internet sau creează una folosind software de calculator.

Nu se gândesc la formate, dimensiunile imaginii și nici numele fișierelor. Dacă imaginea arată bine, presupun că este gata pentru internet. Dacă nu vă verificați imaginile, vă construiți spre un dezastru.

Redimensionați imaginile

Nu încărcați imagini pe site-ul dvs. WordPress înainte de a verifica lățimea și înălțimea fiecărei imagini. De exemplu, dacă afișați imagini la maximum 700 pixeli, nu este nevoie să încărcați o imagine mai largă. Dacă faceți acest lucru, veți avea un fișier mai mare care va face site-ul dvs. mai lent, în timp ce rezultatul va fi același. WordPress va crea dimensiuni suplimentare, dar aceasta nu este scuza pentru a nu pregăti imaginile înainte de încărcare.

Redimensionarea imaginilor este rapidă și ușoară. Există multe instrumente gratuite precum Microsoft Paint care vă vor ajuta în acest sens. Puteți găsi chiar și instrumente online gratuite pentru redimensionarea imaginilor precum Easy Resize.

Dimensiunile imaginii vor varia de la temă la temă. Dacă nu sunteți sigur pe care ar trebui să îl utilizați, aruncați o privire mai atentă asupra temei dvs. WordPress și inspectați imaginile, căutați documentație sau solicitați asistență.

Schimbați calitatea

După modificarea dimensiunilor, ar trebui să luați în considerare modificarea calității imaginilor. În funcție de software, există diferite moduri de a modifica calitatea imaginilor. De exemplu, întotdeauna popularul Photoshop vă permite să salvați imagini pentru web. Această opțiune vă va permite să salvați imagini la o calitate mai scăzută, dar acestea vor fi optimizate pentru site-ul dvs.

De asemenea, dacă alegeți să salvați o imagine ca JPEG, Photoshop vă va cere să alegeți nivelul de calitate. În acest caz, scăderea calității de la 12 la doar 8 va reduce dramatic dimensiunea unei imagini, în timp ce diferența de calitate nu va fi atât de mare.

Dacă încă nu utilizați niciun software pentru a schimba calitatea imaginilor, puteți încerca instrumentul gratuit online Tiny PNG. Încărcați o imagine și vedeți ce diferență poate face aceasta.

Alegeți formatul potrivit

Chiar și după modificările de dimensiune și calitate, ar trebui să luați în considerare modificarea formatului. Pentru început, doar prin selectarea formatului potrivit, puteți scoate câțiva kilobiți dintr-o imagine, dacă nu chiar mai mult.

Regula generală este foarte simplă. Dacă aveți o fotografie, faceți-o JPEG. Dacă aveți un logo, o imagine vectorială sau o grafică foarte simplă generată de computer, mergeți cu PNG. Dacă aveți o imagine cu adevărat mică, fără gradiente sau doriți să afișați o animație simplă precum cea de mai sus, puteți utiliza GIF. În general, imaginile PNG vor fi destul de mari decât cele JPEG și puteți beneficia de schimbarea formatului.

În multe cazuri, reformarea imaginilor nu va face diferențe semnificative de calitate, în timp ce vă puteți aștepta la o diferență de dimensiune. Data viitoare înainte de a încărca fotografii PNG, faceți o fotografie și încercați să o salvați ca JPEG pentru a vedea diferența. Pentru o explicație mai detaliată, vă rugăm să verificați diferența dintre PNG, JPEG, GIF și SVG.

Aveți grijă de numele fișierelor

Deși numele fișierului ar putea părea lipsit de importanță, este de fapt ceva de care ar trebui să fii foarte conștient. Numele fișierului dvs. imagine conține informații valoroase pentru SEO. Dacă doriți ca alții să vă poată găsi imaginea pe Google și alte motoare de căutare, ar trebui să îi dați un nume propriu.

Vă sugerăm să numiți imagini fără a utiliza spații. Nu uitați să includeți cuvinte cheie dacă doriți ca pagina și imaginea să fie clasificate. De exemplu, dacă încărcați o imagine cu Ferrari California, numele fișierului ar trebui să fie „ferrari-california.jpg”. Dacă utilizați un plugin SEO pentru WordPress, știți deja că vă verifică etichetele alt pentru cuvinte cheie. Da, este foarte important să ai un nume de imagine adecvat.

Optimizați imaginile pentru WordPress după încărcare

După pregătirea imaginilor pe computer, puteți continua cu încărcarea. Sperăm că imaginile dvs. au dimensiunea și calitatea potrivite. Te-ai asigurat că formatul și numele fișierului sunt corecte. După încărcare, WordPress vă va cere informații suplimentare. Nu omiteți informațiile meta; completați detaliile despre imaginile dvs., astfel încât să le puteți organiza cu ușurință și să vă pregătiți pentru SEO.

Titlu, descriere, text alternativ și subtitrare

În timp ce aveți grijă de aspectele tehnice, nu ar trebui să uitați de SEO. Adăugați întotdeauna titlul și descrierea pe media. Acest lucru vă va ajuta cu gestionarea media WordPress și va funcționa, de asemenea, pentru un SEO mai bun. De asemenea, nu uitați eticheta alt care va fi afișată pentru vizitatorii care nu vă pot vedea corect imaginea. Nu numai că acest lucru va fi util pentru utilizatorii dvs., dar vă va ajuta și cu SEO. Pagina dvs. se va clasa mai bine, iar utilizatorii vor putea găsi mai ușor noile dvs. imagini.

Deși nu veți avea nevoie de subtitrări tot timpul, asigurați-vă că le adăugați pentru imagini care necesită explicații suplimentare (de exemplu, capturi de ecran).

Editați imaginile cu WordPress

Dacă vă dați seama că o imagine are încă nevoie de editare suplimentară, ar trebui să știți că WordPress vă permite să faceți acest lucru chiar și după ce ați încărcat fișierul. Modificați rotirea, decuparea și scalarea imaginilor pe care le-ați încărcat deja. Puteți chiar să editați doar o miniatură sau toate celelalte dimensiuni. Editorul nativ al WordPress este foarte simplu, dar vă poate economisi din când în când.

Regenerați toate miniaturile

Majoritatea tehnicilor anterioare vă vor ajuta cu noi fișiere de imagine pe care sunteți încă pe punctul de a le încărca. Dar dacă ai sute dacă nu mii de fișiere deja încărcate pe site-ul tău WordPress? Nu vă faceți griji; poți totuși să optimizezi acele imagini și să le schimbi dimensiunile.

Pentru o soluție rapidă, s-ar putea să vă intereseze un plugin gratuit Regenerate Thumbnails care a fost utilizat de peste un milion de utilizatori. Dacă doriți mai mult control asupra imaginilor, ar trebui să verificați unele dintre cele mai bune pluginuri WordPress pentru optimizarea imaginilor, pe care le vom arăta în următoarele rânduri ale acestui articol.

Folosiți pluginuri WordPress

Desigur, există zeci de plugin-uri WordPress care vă pot ajuta să optimizați imaginile pe site-ul dvs. Derulați în jos pentru a vedea cele mai bune pluginuri WordPress pentru optimizarea imaginilor.

Lazy Încarcă imagini atunci când este necesar

Uneori, calitatea imaginilor va fi mult mai importantă decât dimensiunea lor. Acest lucru este valabil mai ales pentru fotografii care doresc ca fotografiile lor să fie de top. Nu pot risca să reducă dimensiunea și calitatea fișierelor. Totuși, asta nu înseamnă că ar trebui să uitați de optimizare. Pentru a optimiza imaginile pentru WordPress în acest caz, ar trebui să luați în considerare încărcarea leneșă.

Încărcarea leneșă este o tehnică care încarcă imaginile numai atunci când utilizatorii au nevoie de ele (derulați la ele). De exemplu, dacă ai încărca douăzeci de fotografii de înaltă calitate într-un articol, acestea ar încetini enorm site-ul tău. Dar dacă lenești să încarci imaginile, articolul ar fi fulgerător și fotografiile s-ar încărca numai atunci când este nevoie - în momentul în care un utilizator ajunge la ele.

Aveți imagini receptive

Deși majoritatea temelor WordPress sunt receptive, asta nu înseamnă neapărat că și imaginile tale sunt receptive. Deoarece nu doriți să se încarce o imagine mare pe un ecran mic, va trebui să înregistrați dimensiuni suplimentare de imagine pentru site-ul dvs. Dacă tema dvs. nu folosește imagini receptive, luați în considerare angajarea unui profesionist pentru această slujbă - nu este la fel de ușor pe cât ar putea suna.

Optimizați imaginile pentru social media

Dacă doriți să vă asigurați că imaginile dvs. arată bine pe social media, va trebui să faceți un pas suplimentar și să optimizați metaetichetele și marcajul schemei.

Dacă utilizați un plugin SEO precum Yoast, nu uitați să verificați setările. De exemplu, Yoast vă va permite să configurați câteva lucruri legate de social media. Deci, navigați la SEO -> Social și introduceți informațiile pe Facebook, Twitter, Google+ și Pinterest.

Dacă doriți mai mult și doriți să optimizați imaginile pentru site-uri web de socializare suplimentare, consultați WPSSO - Meta Tag-uri precise + Markup Schema pentru optimizarea partajării sociale și pluginul SEO.

Schimbați modul în care WordPress comprimă imaginile JPEG

Dacă încărcați o grămadă de imagini JPEG pe site-ul dvs. WordPress, este posibil să fi observat că își pierd calitatea originală. Dacă v-ați întrebat dacă vina este WordPress, acum veți avea răspunsul dvs. - da, este!

Odată ce încărcați o imagine în format JPEG, WordPress modifică automat compresia și decide că doriți ca imaginea să piardă din calitate. Pentru a fi mai specific, WP utilizează o compresie de 90% pe JPGE-urile dvs. Este minunat dacă imaginile dvs. sunt acolo doar pentru a fi utilizate ca miniaturi ale postării sau pentru a fi afișate într-o postare, dar dacă încărcați fotografiile, doriți ca acestea să fie cât mai bune, nu?

Din fericire, nu veți avea nevoie decât de o singură linie de cod pentru a schimba acest lucru.

Opriți compresia imaginilor JPEG:

Dacă nu doriți ca imaginile dvs. JPEG să fie comprimate, pur și simplu copiați și lipiți următorul cod în fișierul funcții.php:

 add_filter ('jpeg_quality', function ($ arg) {return 100;});

Nu uitați să salvați modificările și sunteți gata să încărcați imagini noi.

Pe de altă parte, este posibil ca imaginile să nu fie atât de mari pentru dvs. Așadar, s-ar putea să doriți ca acestea să fie și mai comprimate și să economisiți timp la încărcarea site-ului. Dacă modificați ultimul număr din acea linie de cod, veți schimba calitatea imaginilor nou încărcate.

Comprimă imaginile JPEG și mai mult:

Cu cât numărul este mai mic, cu atât mai multe imagini vor fi comprimate. De exemplu, pentru a comprima și mai mult acele JPEG, veți avea nevoie de acest cod:

 add_filter ('jpeg_quality', function ($ arg) {return 80;});

Nu uita; nivelul de compresie implicit este 90.

Cele mai populare pluginuri de optimizare a imaginii pentru WordPress

La începutul acestui articol, am vorbit despre cum să optimizăm imaginile pentru WordPress, astfel încât să vă accelerați site-ul și să îmbunătățiți SEO. După cum ați fi putut vedea, există câteva metode diferite pe care le puteți utiliza. Este important să aveți grijă de imagini chiar înainte de a le încărca pe blogul dvs. Dar când imaginile sunt deja afișate pe site, poate deveni imposibil să reoptimizați fiecare imagine separat și apoi să le încărcați din nou.

Nu vă faceți griji; nimeni nu se așteaptă să faceți acest lucru în primul rând. Rămâneți alături de noi în următoarele minute, pe măsură ce urmează să vă arătăm cele mai populare pluginuri de optimizare a imaginii pentru WordPress.

Pentru a optimiza imaginile, va trebui doar să selectați pluginul din listă. Va trebui să-l configurați și să alegeți lucrurile pe care pluginul le va face pentru dvs. După aceea, veți putea să vă relaxați și să delegați munca la pluginul ales de dvs., în timp ce puteți începe să vă organizați fișierele media.

Următoarele pluginuri vă vor ajuta să comprimați imaginile de pe orice site WordPress pe care îl aveți. Acestea vor face site-ul să se încarce mai rapid și, în cele din urmă, vă vor ajuta să îmbunătățiți SEO.

Plugin WP Smush

PRET: Gratuit

Cu peste 700.000 de instalări active, WP Smush trebuie să fie unul dintre cele mai bune pluginuri de optimizare a imaginii pentru WordPress. Poate optimiza rapid imaginile utilizând diferite tehnici de compresie. Lucrul grozav despre comprimarea imaginilor cu WP Smush este că imaginile nu vor pierde din calitate. Nu ne credeți? Testați pluginul.

Când am vorbit despre pregătirea imaginilor pentru WordPress, am menționat că redimensionarea este o parte crucială a procesului de optimizare. Cu acest plugin, nu va trebui să vă faceți griji cu privire la asta, deoarece WP Smush vă permite să setați dimensiuni maxime. După aceasta, toate imaginile mai mari se vor reduce automat înainte de a le adăuga în bibliotecă.

Acest plugin fantastic poate funcționa cu fișiere JPEG, GIF și PNG. Funcționează cu toate directoarele dvs., se ocupă automat de atașamente și chiar funcționează pe multisite. Puteți opera manual pe fiecare imagine sau puteți edita cincizeci dintre ele în bloc. Dacă doriți rezultate și mai bune și mai multe opțiuni, consultați WP Smush PRO.

Plugin EWWW Image Optimizer

PRET: Gratuit

În spatele numelui amuzant, există unul dintre cele mai populare pluginuri de optimizare a imaginii pentru WordPress. La fel ca cel menționat anterior, EWWW Image Optimizer vă poate comprima imaginile fără a le afecta calitatea. Când vă gândiți că pluginul vă poate accelera site-ul în câteva secunde, veți fi deja pe cale să îl descărcați. După ce faceți acest lucru, veți obține optimizarea imaginilor în bloc, iar galerii precum GRAND FlaGallery, NextCellent și NextGEN vor primi chiar și paginile lor de optimizare în bloc.

Toate imaginile care utilizează clasa WP_Image_Editor în WordPress vor fi optimizate automat , în timp ce puteți lucra manual magia pe toate celelalte. Ne place să selectați dosarele pe care doriți să le optimizați. Pentru mai multe detalii despre acest lucru și despre pluginurile care utilizează clasa, vă rugăm să deschideți pagina oficială EWWW Image Optimizer din depozitul WordPress.

Comprimați pluginul pentru imagini JPEG și PNG

PRET: Gratuit

Dacă micul panda drăguț care deține logo-ul WordPress nu vă face să doriți să aflați mai multe despre acest plugin, nu știm ce va fi. Și dacă panda pare familiar, asta pentru că este același lucru care vă ajută să comprimați imaginile de pe site-ul TinyPNG. Da, se pare că animalul este mai versatil decât am crezut inițial. Dar să ne concentrăm pe plugin.

Dacă mergeți cu acest plugin, Panda vă va optimiza automat imaginile. De fiecare dată când încărcați unul nou, pluginul va prelua și își va face treaba. Totuși, puteți optimiza imaginile individuale sau puteți face acest lucru în bloc doar accesând biblioteca media.

Comprimarea imaginilor JPEG și PNG acceptă chiar PNG animate, funcționează perfect pe un multisite, este compatibil cu WooComerce și nu va avea probleme cu WP Offload S3.

Lucrul grozav despre plugin este că vă permite să setați atribute de lățime și înălțime maxime pentru toate imaginile. Dacă v-ați îngrijorat ce va face metadatele, nu vă faceți griji; panda va păstra intacte toate informațiile.

Nu există limite de dimensiune a fișierului, trebuie să setați un widget de tablou de bord și chiar funcționează cu aplicația mobilă WordPress. Pentru că toate acestea, imaginile Compress JPEG și PNG au peste 100.000 de instalări active și merită un loc pe lista celor mai bune pluginuri de optimizare a imaginii pentru WordPress.

Plugin Imsanity

PRET: Gratuit

Deși imaginea de copertă pentru acest plugin s-ar putea să vă sperie, luați o secundă și uitați-vă la toate caracteristicile Imsanity. Oh, chiar și numele pluginului sună nebunesc, nu? Odată ce sunteți bine cu numele pluginului, veți vedea că are multe de oferit.

Imsanity poate scala automat imaginile, vă permite să setați dimensiuni maxime și are chiar și o opțiune de redimensionare în bloc. Acest lucru este important dacă aveți deja sute de imagini pe blogul dvs. care necesită optimizare.

Acest plugin gratuit este o opțiune excelentă dacă nu doriți să vă luptați foarte mult cu setările pluginului. Tot ce trebuie este să instalați și să activați Imsanity, să setați câteva opțiuni și puteți uita de aceasta; își va gestiona propriul drum spre optimizarea imaginii.

Ne-a plăcut opțiunea care vă permite să convertiți imagini BMP în JPG. Doar în cazul în care aveți o mulțime de fișiere BMP pe care le-ați încărcat din greșeală cu ceva timp în urmă, acesta va fi un instrument de salvare.

Plugin ShortPixel Image Optimizer

PRET: Gratuit

Cu peste 30.000 de instalări active, ShortPixel Image este încă unul dintre cele mai populare pluginuri de optimizare a imaginii pentru WordPress. Pluginul este plin de funcții și va fi un lucru obligatoriu pentru site-urile care au o mulțime de imagini de optimizat.

ShortPixel Image Optimizer nu numai că va optimiza documentele JPG, PNG, GIF și PDF pentru dvs., dar vă va permite, de asemenea, să convertiți orice imagine JPEG, PNG sau GIF în WebP . Pluginul funcționează bine cu alte pluginuri de galerie și nu-i pasă dacă site-ul dvs. folosește HTTP sau HTTPS. Vă va permite să eliminați datele EXIF ​​din imagini (ceva ce fotografilor le va plăcea să aibă).

Pluginul recunoaște imaginile pe care le-a optimizat deja, așa că le va sări atunci când este necesar. Trebuie să permiteți sau să nu permiteți optimizarea automată și să faceți mult, mult mai mult cu acest plugin fantastic. Consultați pagina oficială din depozit pentru a vedea toate caracteristicile.

Optimus - Optimizator de imagini WordPress

PRET: Gratuit

La fel ca pluginul menționat anterior, Optimus vă va optimiza imaginile pentru WordPress și va face acest lucru fără a afecta calitatea imaginilor. Puteți lăsa pluginul să rezolve automat lucrurile sau puteți dezactiva opțiunea și optimiza doar imaginile atunci când este necesar.

Optimus funcționează pe mai multe site-uri, nu este străin de site-urile de comerț electronic WordPress și este complet optimizat pentru aplicațiile mobile WordPress și Windows Live Writer. Vă va accelera site-ul fără a fi nevoie să atingeți o linie de cod. Pluginul oferă mult mai mult, dar va trebui să vă înscrieți pentru versiunea premium. Pentru a vedea mai multe, vă rugăm să accesați pagina oficială din depozitul de pluginuri WordPress.

Adăugați încărcare leneșă pentru videoclipurile și imaginile dvs. în WordPress

Odată ce începeți să adăugați o mulțime de materiale video și imagini pe site-ul dvs., este evident că va începe să se încarce mai lent. Indiferent de unde provin, videoclipurile și imaginile mari vor acționa ca o greutate mare pe site-ul dvs. și vor face vizitatorii să aștepte mult mai mult decât este necesar pentru a încărca tot conținutul. Cu WordPress, nu ar trebui să fie o mare problemă și iată cum puteți rezolva cu ușurință situația.

Dacă vă cunoașteți calea în jurul PHP, există un articol minunat despre adăugarea de încărcături leneșe pentru imagini și scroll infinit scris de colegii noștri pe Teme elegante.

Dacă nu, în următoarele rânduri vom menționa unele dintre cele mai populare pluginuri de încărcare leneșe care vor face ca site-ul dvs. să se încarce mai repede . Și nici măcar nu va trebui să faceți mult decât să instalați un plugin și să îl configurați în câțiva pași rapizi.

Încărcare leneșă pentru videoclipuri

PRET: Gratuit

Dacă aveți o mulțime de videoclipuri Youtube și Vimeo, ar trebui să luați în considerare instalarea acestui plugin. După ce îl configurați, pluginul va plasa o imagine pe videoclipul dvs. și, din acest motiv, site-ul dvs. web se va încărca mult mai repede. Odată ce un vizitator trece la un videoclip, această imagine va fi afișată cu un buton „redare” deasupra acestuia. După un clic, videoclipul va începe să se încarce și să se redea. O demonstrație simplă poate fi vizualizată pe site-ul dezvoltatorului.

WP YouTube Lyte

PRET: Gratuit

Acest plugin își va face treaba într-un mod rapid și ușor. După instalare, trebuie doar să adăugați un link la videoclipul dvs. Youtube sau să utilizați un shortcode pentru a adăuga unul. Puteți alege între a adăuga un videoclip normal, o listă de redare sau doar audio din videoclipul selectat. După aceea, videoclipurile dvs. de pe YouTube vor primi o imagine peste ea, care va permite încărcarea leneșă. Doar faceți clic pe imagine pentru a începe videoclipul sau sunetul.
Vedeți o demonstrație pe site-ul dezvoltatorului.

a3 Încărcare leneșă

PRET: Gratuit

Acesta este dedicat site-ului dvs. mobil. Dacă aveți o mulțime de imagini și / sau videoclipuri pe care doriți să le arătați vizitatorilor dvs. pe dispozitive mobile, ar trebui să aruncați o privire la a3 Lazy Load. Vă va permite să adăugați încărcare leneșă la imaginile și videoclipurile dvs. și pluginul vă va permite chiar să alegeți efecte de tranziție care vor apărea utilizatorilor în timp ce derulează prin conținutul care se încarcă.

În zona de administrare, puteți activa și dezactiva cu ușurință conținutul pe care doriți să-l încărcați leneș. Pentru cei activați, conținutul va fi încărcat numai în momentul în care un vizitator parcurge acea parte a conținutului.
Există o demonstrație frumos afișată, care conține 1000 de imagini - fiecare este încărcată numai după ce ați parcurs până la ea. Deoarece acest plugin încearcă și videoclipuri leneșe, există o demonstrație video pe care o puteți vedea dând clic pe linkul de mai sus.

BJ Lazy Load

PRET: Gratuit

Dacă nu aveți nevoie de asistență pentru videoclipuri și doriți doar ca imaginile dvs. să fie încărcate leneș, ar trebui să verificați acest plugin WP. Odată instalat și configurat, acesta va înlocui imaginile, miniaturile, imaginile Gravatar și chiar iframe-urile cu un substituent. Similar unui plugin menționat anterior, acesta va încărca conținutul numai după ce un utilizator vine la el.

Fie că sunt imagini sau videoclipuri pe care doriți să le încărcați leneș, unul dintre pluginurile menționate mai sus vă va ajuta într-o chestiune de secundă. Toate sunt gratuite, deci nu există nicio scuză pentru a nu încerca măcar unul dintre pluginuri și a vedea cât de multă greutate va avea umerii tăi. Desigur, există multe alte pluginuri cu aceeași funcție și sunteți liber să le navigați și să le încercați pe toate.

Afișați înainte și după imagini într-un mod atractiv

Suntem siguri că ați văzut deja multe exemple de imagini înainte / după. Nu știu despre tine, dar primul lucru pe care îl avem în vedere atunci când vedem expresia „înainte și după” este programul de antrenament de fitness în care oamenii își arată corpul înainte și după un program de antrenament.

Dacă vă gândiți la asta, majoritatea site-urilor web utilizează o abordare simplă pentru a prezenta diferențele - iau ambele imagini și le plasează una lângă alta sau chiar una deasupra celeilalte. Dacă doriți același rezultat, nu ați citi acest articol, deoarece știți deja cum să faceți acest lucru.

Ce se întâmplă dacă ți-am spune că există un mod vizual uimitor de a rezolva această problemă înainte / după și este la îndemâna ta? Ei bine, există și după o configurare, veți lăuda dezvoltatorii, deoarece rezultatul final este foarte, foarte cool.

Douăzeci și douăzeci

PRET: Gratuit

Twenty Twenty este numele acestui extraordinar plugin pe care îl puteți descărca gratuit în depozitul de pluginuri WordPress.

Pluginul vă va permite să plasați o imagine peste cealaltă și vă permite să vă jucați cu un glisor, astfel încât să puteți ascunde / dezvălui imaginea. Vă rugăm să vedeți demo-ul și veți vedea despre ce vorbim.

OK, acum, când sunteți conectat la acest mic plugin, să vedem cum să creați acest efect uimitor. Deși este relativ ușor să recreați efectul demonstrativ, va trebui totuși să vă cunoașteți calea în jurul HTML-ului de bază. Să mergem:

1. Creați o postare nouă sau deschideți-o pe cea existentă
2. Introduceți două imagini în postare. Dacă lucrați într-un Editor vizual, ar trebui să vedeți imaginea una deasupra celeilalte. Dacă lucrați într-un editor de text, ar trebui să vedeți un cod similar cu acesta:

 <a href="image1.jpg"> <img src =
„http://www.loactionoftheimage.com” width = „700” 
height = "200" /> </a>

<a href="image2.jpg"> <img src =
„http://www.loactionoftheimage.com” width = „700” 
height = "200" /> </a>

3. Introduceți eticheta [douăzeci și douăzeci] înainte de prima imagine
4. După a doua introduceți eticheta [/ twentytwenty]

Ar trebui să sfârșiți cu așa ceva în Editorul de text:

5. Asigurați-vă că imaginile dvs. au aceeași dimensiune pentru a obține cele mai bune rezultate
6. Previzualizați sau publicați-vă postarea și bucurați-vă de uimitoarele dvs. vizuale înainte și după fotografii

Cum să creați imagini interactive - desenați, adăugați descrieri și linkuri

Astăzi, este greu să rulezi un site web fără multimedia. Imaginile, videoclipurile și muzica fac parte practic din fiecare site web. Un utilizator mediu de internet depinde în mare măsură de stimulii vizuali, deci trebuie să aveți grijă de părțile vizuale și interactive ale site-ului dvs. Articolele cu imagini primesc cu 94% mai multe vizualizări decât cele fără una. De asemenea, este deja cunoscut faptul că multimedia de pe site-uri web poate spori rentabilitatea investiției în marketingul de conținut.

Sperăm că nu este nevoie să vă convingem să aveți grijă de imaginile de pe site-ul dvs. Chiar dacă nu utilizați imagini în articole (pe care ar trebui să le), utilizați imagini recomandate, nu? Există destul de multe pluginuri de galerie care vă pot ajuta să gestionați imagini pe site-ul dvs. WordPress, puteți avea teme legate de fotografie, puteți conecta Instagram la site-ul dvs. WordPress și puteți face multe altele. Dar dacă doriți să creați mai mult conținut interactiv?

Pentru început, s-ar putea să fiți interesat să adăugați un efect de imagine înainte-după, pe care utilizatorii dvs. îl vor iubi. Nu uitați de realitatea virtuală din WordPress, care devine din ce în ce mai populară după ce Automattic a introdus VR pe WordPress.com. Totuși, lipsește ceva. Este posibil să realizați imagini interactive cu piese care pot fi făcute clic? Da, este posibil și suntem pe cale să vă arătăm cât de distractiv și ușor este.

Atrage atentia

PRET: Gratuit

Primul lucru legat de acest plugin este că este complet gratuit! La fel ca în cazul oricărui alt plugin din depozitul WordPress, îl puteți descărca, instala și activa în câteva minute. Versiunea gratuită vă va permite să lucrați cu o singură imagine interactivă. Dacă doriți mai mult, va trebui să vă înscrieți pentru versiunea PRO, dar despre asta vom vorbi mai târziu.

Pluginul este receptiv și nu trebuie să vă faceți griji cu privire la afișarea corectă a imaginilor interactive pe orice dispozitiv. Nu doar că imaginea se va scala în funcție de dimensiunea ecranului, ci va funcționa în majoritatea browserelor moderne și mai vechi (desktop și mobil). Draw Attention folosește elemente de pânză atunci când sunt afișate în browsere noi, în timp ce va reveni la hărțile de imagine dacă o încărcați într-una mai veche.

Caracteristici

Înainte de a ajunge la un exemplu care vă va arăta cât de puternic este acest plugin simplu, să vedem la ce să ne așteptăm de la Draw Attention:

• Desenați - După ce încărcați o imagine, veți avea șansa să desenați forme pe ea. Selectați orice parte a imaginii dvs. care va deveni selectabilă / clicabilă
• Culori - Personalizați culorile, astfel încât să puteți face ca hotspoturile să se potrivească cu designul site-ului dvs.
• Evidențiați la trecerea cu mouse -ul - Afișați o altă parte a imaginii dacă un utilizator trece peste partea selectată
• Afișați mai multe informații - Afișați mai multe informații despre partea selectată a imaginii
• Accesați URL - Redirecționați utilizatorii către orice adresă URL dacă fac clic pe selecție

Exemplu - Harta interactivă a Hawaii

Vom folosi exemplul de pe site-ul demonstrativ pentru a vă arăta exact ce puteți face cu Draw Attention. Deci, haideți să vedem cum arată o hartă interactivă din Hawaii atunci când este creată cu pluginul.

Primul lucru pe care ar trebui să-l faci este să găsești o imagine a insulelor Hawaii. După ce navigați la Draw Attention -> Edit Image, ar trebui să încărcați imaginea în zona din bara laterală dreaptă. Odată ce imaginea se încarcă, distracția poate începe.

Aici puteți alege culorile pentru evidențieri (culoare, chenar, opacitate etc.), stilizați „caseta cu mai multe informații” (imagine, titlu, culoare text etc.). Dacă nu doriți să selectați manual fiecare culoare pentru imagine, puteți alege rapid o schemă de culori din bara laterală din dreapta.

Cea mai magică parte se întâmplă în ecranul de setări Hotspot Areas . Aici veți obține imaginea încărcată la dimensiune completă. Tot ce trebuie să faceți acum este să începeți să desenați și să creați un nou hotspot. Puteți adăuga câte puncte doriți, ceea ce înseamnă că puteți crea selecții cuprinzătoare după cum doriți. Trebuie să creați cât mai multe hotspoturi și fiecare poate avea propriile setări.

Deci, în acest exemplu, ar trebui să selectați una dintre insule. Alegeți un titlu pentru insulă, adăugați o descriere și imaginea suplimentară care va fi afișată odată ce un utilizator trece prin hotspot (partea dreaptă a imaginii GIF prezentată mai sus).

Ar trebui să repetați procesul pentru fiecare dintre insulele pe care doriți să fie interactive. Odată ce vă gatați hotspoturile, copiați codul scurt din partea dreaptă. Lipiți codul scurt într-o postare, pagină, widget sau oriunde doriți să afișați noua dvs. hartă interactivă și ați terminat! Dacă doriți să redirecționați utilizatorii către orice altă pagină odată ce au dat clic pe selecții, trebuie doar să selectați adresa URL în locul descrierii. Ușor ca asta!

Versiunea PRO

În timp ce versiunea gratuită va fi perfectă dacă aveți nevoie de o singură imagine, versiunea PRO vă va permite să aveți cât mai multe imagini interactive pe site-ul dvs. doriți. Deși acesta va fi cel mai important lucru de luat în considerare, versiunea PRO vă va oferi chiar mai mult decât imagini multiple.

Funcția Opțiuni de aspect vă va permite să afișați mai multe informații despre părțile selectate ale imaginii. De exemplu, veți putea afișa informații într-o casetă lightbox sau într-o simplă bara de instrumente care va apărea după ce un utilizator trece peste partea selectată a imaginii.

Există, de asemenea, douăzeci de palete de culoare predefinite, deci nu trebuie să personalizați manual fiecare culoare. Versiunea PRO vă va costa 74 USD pentru o singură licență de site, dar dacă aveți nevoie de mai mult de o imagine interactivă, aceasta va fi o nebunie.

Cum să regenerați dimensiuni suplimentare de imagine

Este relativ ușor să înregistrați noi dimensiuni de imagine în tema dvs. WordPress. După ce ați spus sistemului dvs. cât de mari ar trebui să fie imaginile dvs., le-ați numit și ați decis cum să le decupați, sunteți liber să distribuiți imaginile oriunde doriți. Dar ce zici de vechile imagini?

Dacă ați folosit una dintre tehnicile pe care vi le-am arătat, ați pregătit gazonul pentru noi imagini. Fie că utilizați dimensiuni de înregistrare a imaginilor nou pentru miniaturile postărilor sau permiteți autorilor să le folosească în postări, noile reguli se aplică numai acelor imagini care sunt încărcate după ce ați făcut modificarea fișierului functions.php. Pentru a schimba imaginile mai vechi, vă sugerăm să utilizați pluginul Regenerare miniaturi.

Regenerați miniaturile:

PRET: Gratuit

1. Accesați Plugins-> Add New
2. Căutați „Regenerați miniaturile”
3. Instalați și activați pluginul
4. Navigați la Instrumente-> Regen. Miniaturi

Dacă doriți să redimensionați toate imaginile, pur și simplu faceți clic pe butonul „Regenerați toate miniaturile” și așteptați ca pluginul să facă treaba.

Dacă doriți să vedeți imaginile care urmează să fie redimensionate sau dacă doriți să redimensionați doar unele dintre imagini, accesați biblioteca media unde veți găsi o nouă opțiune sub „Acțiuni în bloc” și una lângă fiecare imagine în Galerie.

Partea bună a pluginului este că nu vă șterge imaginile originale. Acesta va crea doar noi dimensiuni de imagine pe care le puteți utiliza în tema dvs., în timp ce cele originale vor fi lăsate pentru ca dvs. să le utilizați mai târziu sau să le ștergeți manual dacă decideți că nu aveți nevoie de ele.

Asta e. Bucurați-vă de miniaturile dvs. noi sau consultați pluginul Simple Image Sizes, care poate face același lucru.

Eliminați lățimea și înălțimea atributelor imaginii cu jQuery

Când adăugați imagini la o postare WordPress, sistemul adaugă automat atributele sale de înălțime și lățime la imagine. That's usually a good thing, but there are times when you won't like the fact that every image gets those attributes.

If you want to strip the attributes right at the point of upload, you can do that through a simple function which we showed you last time.

But if you read the article or tried the function yourself, you've noticed that it only affects images uploaded after the function was installed into your WP system. If you already have a database full of posts with inserted images, the aforementioned function won't help you much with your old image attributes.

Since you probably can't go through each and every image manually and delete width and height one by one, you are probably in a need of another function which will strip those attributes for all existing images embedded in your posts. In that case, you're in the right spot 'cause we're about to show you a simple way of automatically removing width and height image attributes with few lines of jQuery code. Don't get scared with the previous phrase – you don't even have to know what jQuery is, just follow the next three steps and you'll be done in a jiffy.

Remove width and height image attributes:

1. Open header.php file from your theme folder
2. Copy and paste this code anywhere between <head> and </head> tags:

 <script src="http://code.jquery.com/jquery-latest.js">
</script>
<script>
jQuery.noConflict();
jQuery(document).ready(function($){
$('img').each(function(){
$(this).removeAttr('width')
$(this).removeAttr('height');
});
});
</script>

3. Salvează modificările

Și gata! The code will do its magic after you open a post which contains an image and will remove width and height tags from it.

How to create custom image sizes in Media Uploader

If you are using Media Uploader to deal with images in WordPress, you have probably seen numerous options for images. Between many, you are able to choose an image size which you can send to your article.

There are the thumbnail, medium, large and full-size options to choose from, but all those options have predefined values. So, if you're using a custom theme, more often than not you are stuck with changing width and height for each image over and over again.

Actually, you don't have to do that. There is a neat little function called add_image_size() which is a great tool for developers. And after this article, you will find it useful as well.

Let's say your theme has a custom width and you want to easily embed images to fit in there perfectly. Let's say that width is 666px (we won't go into why you have set the width to this number, it's your choice). To do that, you need to add an extra radio button to Media Uploader. With the code below, you'll be adding one more size which is the half size of the original one.

1. Deschideți fișierul functions.php
2. Copy and paste this piece of code:

 function custom_image_sizes() {
add_image_size( 'one-size', 333, 333, true );
add_image_size( 'another-size', 666, 666, true );
}

add_action( 'init', 'custom_image_sizes' );

function show_image_sizes($sizes) {
$sizes['one-size'] = __( 'Custom Size 1', 'isitwp' );
$sizes['another-size'] = __( 'Custom Size 2', '
isitwp' );
return $sizes;
}

add_filter('image_size_names_choose', 
'show_image_sizes');

3. Salvează modificările
4. Try adding an image from your Media Uploader where you should see your new size options under the “Attachment Display Settings”

Create automatic screenshot of any website and publish it as image in your post

If you want to display a thumbnail of a website, you would have to go to the website, print screen it or take a screenshot with a program or a browser add-on. Then you would need to modify the image, cut it to the right size and upload it to your WordPress so that you can use the screenshot in a post.

If you don't have to take that snapshot every now and then, it won't be a problem, but if you're using screenshots of different websites more often, you will be happy to hear that there is an awesome function which will save you time and your nerves.

In this part of the guide, we are about to show you the complete function which creates a shortcode that you can use for taking snapshots of any web page you want.

Create automatic screenshot:

1. Funcții deschise.php
2. Copiați și lipiți următorul cod:

 function wp_webscreen($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'http://www.firstsiteguide.com',
"alt" => 'wploop',
"w" => '600', // width
"h" => '450' // height
), $atts));

$img = '<img alt="' . $alt . '" src="' . $snap . 
'' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" />';
return $img;
}
add_shortcode("screen", "wp_webscreen");

3. Change default variables in the array
4. Salvează modificările

This function creates a shortcode that you can easily use anywhere on your WordPress website. Whether you want to use the screenshot of a web page in a post, sidebar widget or your footer, for example, simply c/p the shortcode in the right spot:

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

What's great about this function is that it saves the image as dynamic URL which means that once you create a snapshot with the shortcode, it will automatically refresh itself in the future and always show the current looks of the website specified in the shortcode.

Note that you can change the parameters of the shortcode directly from it. You don't have to modify the code in the functions.php file if you want to take the snapshot of another URL or to take the snapshot in a different dimension.

Example:

Let's say that you want to take a screenshot of Google and make it 200×400 pixels big:

[screen url=”http://www.google.com” alt=”Google” w=”200″ h=”400″]

You can make everything even easier by saving the shortcode into a button so that you can insert it into a post with a single click of a button.

Concluzie

You don't have to install all plugins and functions we mentioned in order to improve the images on your WordPress site. But we hope that you have found at least a few tips that will help you to optimize images or make them better in any way.