Trăim într-o lume de înaltă definiție. Și întrucât majoritatea dintre noi petrecem mai mult de opt ore pe zi privind diferite tipuri de ecrane, calitatea imaginilor iar caracterele conținute în aceste ecrane este foarte important.
Deși sunt disponibile doar de câțiva ani, ecranele Retina sunt calea viitorului. Densitatea ridicată a pixelilor din afișajele Retina face imaginile clare și clare. Și cine nu iubește imaginile frumoase și clare?
Invata sa creați un site web compatibil cu ecranele Retina este un atu important pentru orice dezvoltator web. Din păcate, nu există o soluție ideală și perfectă pentru a face site-ul dvs. ușor de utilizat cu afișaje Retina-Ready.
Așadar, în timp ce așteptăm ca cineva să găsească cea mai completă soluție, am analizat câteva dintre cele mai bune opțiuni posibile pentru a vă pregăti site-ul web. În acest fel, nu veți fi înșelați când va veni momentul în care toate dispozitivele vor avea afișarea Retinei într-o formă sau alta.
Dar înainte de a începe, acordați-vă timp să aruncați o privire Cum se instalează o temă WordPress, Cât de multe plugin-uri ar trebui să instalez pe WordPress.
Atunci hai să trecem la treabă!
Crearea mai multor fișiere imagine
Să începem cu elementele de bază. Cel mai simplu mod de a obține asistență pentru modul Retina pentru site-ul dvs. web este să creați mai multe variante de imagine în diferite rezoluții. Aceasta înseamnă că pentru fiecare tip de rezoluție (adică 1x) trebuie să creați o versiune de înaltă rezoluție a clipului respectiv (adică 2x).
Practic, puteți crea mai multe versiuni ale aceluiași fișier și puteți utiliza un plugin precum WP Retina 2x sau un script precum retina.js pentru a genera automat versiunile „@ 2x” ale fiecărei dimensiuni ale imaginii sau pentru a găsi imagini „@ 2x” și pentru a afișa dimensiunea corespunzătoare fiecărui dispozitiv.
Este adevărat că crearea mai multor versiuni ale aceleiași imagini poate fi un proces care necesită mult timp. Din păcate, nu există nicio metodă rapidă care să genereze automat aceste imagini pentru dvs. In orice caz, există mai multe pluginuri Photoshop care vă permit să reparați rapid imaginile.
Plugin-uri precum " Retinizați-l Care este o serie de acțiuni Photoshop care vă permit să vă optimizați cu ușurință desenele pentru afișajele Retina. Dacă utilizați o versiune mai veche de Photoshop (pre-CC), puteți folosi ceva de genul „ Patru Ceea ce face practic tot ceea ce face instrumentul curent Photoshop Generator, dar pentru versiunile mai vechi ale Photoshop.
Scalable Vector Graphics (SVG)
Cel mai simplu mod de a merge mai departe cu modul Retina este să utilizați Scalable Vector Graphics (SVG) pe site-ul dvs. web. SVG este un format de imagine vectorială bazat pe XML. După cum sugerează și numele, o imagine SVG este scalabilă, ceea ce înseamnă că imaginile pot fi întinse cât de mult (sau cât de puțin) este necesar, în timp ce sunt încă clare și clare. Poate fi o modalitate rapidă și ușoară de a implementa modul Retina fără prea mult efort.
Citiți și: Cum să furnizați imagini WebP în loc de PNG și JPG tradiționale
Cu toate acestea, există două dezavantaje ale utilizării SVG pe WordPress. Primul este că, deoarece este un format vector, SVG nu este potrivit pentru toate imaginile. Deci, puteți utiliza SVG pentru sigle și pictograme, dar nu și pentru fișiere precum fotografii (ceea ce este puțin dureros dacă doriți să utilizați imagini de înaltă rezoluție pentru site-ul dvs. web). Dar dacă doriți să utilizați pictograme simple, animații sau ilustrații, fișierele SVG pot fi cu siguranță o opțiune pentru un site web compatibil cu retina.
Al doilea dezavantaj al utilizării SVG pe WordPress este că nu este un format oficial compatibil cu WordPress din motive de securitate. Deoarece un fișier SVG este în esență un fișier XML, acesta îl deschide toate vulnerabilitățile cunoscute asociate cu formatul de fișier XML, cum ar fi analiza coercitivă, atacurile XML External Entity Attacks (XEE), atacurile XML Denial of Service Attack (XDoS) etc.
Cu toate acestea, există o modalitate de a activa asistența SVG pentru site-ul dvs. web, ceea ce vă va face fișierele SVG sigure.
Cum să activați SVG în siguranță pe WordPress
SVG sigur este un plugin care vă permite să activați în siguranță suportul pentru fișiere SVG pe site-ul dvs. web. Acest plugin vă asigură că fișierele dvs. SVG sunt dezinfectate pentru a preveni eventualele vulnerabilități XML care vă afectează site-ul web.
Stai departe de pluginurile care permit tipului MIME să permită încărcarea de la SVG la biblioteca media WordPress, deoarece acestea sunt periculoase și potențial dăunătoare pentru site-ul tău. Deci, dacă sunteți cu adevărat tentați să utilizați formatul SVG pe WordPress, asigurați-vă că o faceți în siguranță și nu descărcați primul plugin SVG pe care îl vedeți.
Afișați mai multe conversii pe blogul dvs. citind site-ul nostru 15 tipuri de conținut care generează mai mulți vizitatori pe blogul dvs.
Câteva pluginuri pentru a integra compatibilitatea Retina pe WordPress
Există mai multe scripturi și pluginuri pentru compatibilitatea Retina care vă pot face viața mult mai ușoară atunci când încercați să configurați un site web compatibil cu modul Retina. Cu toate acestea, așa cum am menționat anterior, majoritatea pluginurilor și scripturilor disponibile, înlocuiesc imaginile dvs. cu imagini de înaltă rezoluție numai pentru afișaje de înaltă rezoluție. Nu se întind ca un SVG: trebuie totuși să creați mai multe imagini cu rezoluții diferite.
1 - retina.js
retina.js este unul dintre cele mai utilizate scripturi pentru a servi imagini de înaltă rezoluție. Acesta este un script open source care facilitează deservirea imaginilor de înaltă rezoluție pe dispozitivele cu afișaje Retina.
Scriptul verifică fiecare imagine din pagină pentru a vedea dacă există o versiune de înaltă rezoluție a acelei imagini pe server. Dacă există o variantă de înaltă rezoluție, scriptul schimbă rezoluția standard cu imaginea de înaltă rezoluție. Acesta este unul dintre cele mai comune moduri de a difuza imagini pentru afișajele Retina pe site-ul dvs. web.
Vezi și: GIF, Emojis sau Memes: o idee bună pentru site-urile WordPress?
2 - Dens
Similar cu retina.js, dens este un plugin jQuery care oferă o modalitate ușoară de a servi imagini în format de raport pixel. Scriptul numește metoda $ .fn.dense () a inițializării, care vizează etichetele „img” care vor servi ca imagini compatibile cu modul Retina, după cum este necesar.
Deci, înlocuiește toate imaginile cu versiunea respectivă de înaltă rezoluție, la fel ca scriptul retina.js.
3 - WP Retina 2x
Acesta din urmă poate fi asemănat cu un generator de imagini Retina magic.
WP Retina 2x este un plugin care creează fișiere de imagine cerute de dispozitivele High-DPI și le afișează vizitatorilor în mod corespunzător. Spre deosebire de cele două scripturi anterioare, generează imagini cu rezoluție diferită dintr-o imagine inițială. Deci, dacă nu sunteți prea mulțumit de crearea manuală a diferitelor imagini cu rezoluții diferite, această opțiune este pentru dvs.
Asta este totul pentru acest tutorial, sper că vă va permite să vă convertiți imaginile în imagine Retina Ready.
Descoperiți și câteva plugin-uri premium WordPress
Puteți folosi altele WordPress plugin-uri pentru a oferi un aspect modern și pentru a optimiza gestionarea blogului sau site-ului dvs.
Vă oferim aici câteva plugin-uri WordPress premium care vă vor ajuta să faceți asta.
1. O listă de autor WordPress Fancy
După cum sugerează și numele, pluginul Lista de autori fanteziste WordPress afișează lista de autori pentru site-ul dvs. web într-un widget. Are o interfață simplă de utilizator care permite afișează informațiile oricărui autor în bara laterală. Tot ce trebuie să faceți este să trageți widgetul autor în bara laterală și pluginul va face treaba.
Principalele sale caracteristici sunt printre altele: posibilitatea pentru a afișa autorii blogului într-un mod distractiv de a atrage noi vizitatori, posibilitatea de a afișa o listă de autori în bara laterală sau pe pagină, posibilitatea de a începe o competiție între autorii blogului dvs., o structură receptivă, suport pentru shortcodes și multe altele.
Descărcați | Demo | web hosting
2. Cuprins ușor
Ce WordPress plug-in ușor de utilizat vă permite să inserați un cuprins în postările, paginile și tipurile de postări personalizate. Are multe caracteristici, principalele fiind:
gestionarea automată a unui cuprins, suport pentru etichetă , Suport pentru pluginul Rankin Math, compatibilitate cu mai mulți editori de pagini precum Gutenberg, Divi, Elementor, WPBakery Page Builder și altele, posibilitatea de a alege pe ce pagini doriți să o afișați publicațiile dvs., inserarea automată a cuprinsului pe anumite pagini și multe altele.
Este o WordPress plug-in program gratuit care are tot ce aveți nevoie pentru a vă afișa cuprinsul, așa că nu ezitați să îl alegeți ca prima alegere.
Descarca | Demo | web hosting
3. WooCommerce Advanced Bulk Edit
Editați în mod regulat catalogul de produse? Indiferent dacă ai 100 de produse sau 10.000, asta WordPress plug-in premium este după umila mea părere „A must have”: (Acesta este primul cuvânt care îmi vine în minte).
Pentru doar câțiva dolari, plugin-ul WooCommerce Advanced bulk Edit vă va ușura viața și vă va economisi timp monstruos. Nu există nicio ezitare că este o bombă.
Descarca | Demo | web hosting
Resurse recomandate
Aflați despre alte resurse recomandate pentru a vă ajuta să construiți și să gestionați site-ul dvs. web.
- Sursele de trafic 5 pe care probabil nu le cunoașteți
- Studiu de caz: Conținutul de marketing, cum să învețe din greșeli
- De ce independentii au nevoie de un program zilnic
- Aspecte 7 care vă vor ajuta să creați un blog de succes
Concluzie
Aici ! Gata pentru acest tutorial, sper că vă va permite să creați imagini pregătite pentru retină pentru site-ul dvs. web. Nu ezita sa împărtășiți cu prietenii de pe rețelele de socializare preferate.
Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru pentru Creare blog WordPress.
Dacă aveți sugestii sau observații, lăsați-le în secțiunea noastră comentarii.
...
