Treci la conținutul principal

Cum să creați imagini gata de retină pentru site-ul dvs. web

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

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?

Ecran pregătit pentru retină

Învățarea modului de creare a unui site web compatibil cu afișajele Retina este un atu important pentru orice dezvoltator web. Din păcate, nu există o singură soluție perfectă pentru a face site-ul dvs. ușor de utilizat cu afișajele 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ă WordPressCâ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

Retina vectorvsraster

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.

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

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.

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

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 utiliza alte plugin-uri WordPress pentru a da un aspect modern și a optimiza aderența blogului sau a site-ului dvs. web.

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.

Un plugin fantezist pentru lista de autori wordpress

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 | Demoweb hosting

2. Cuprins ușor

Acest plugin WordPress ușor de utilizat vă permite să introduceți un tabel de conținut în publicațiile, paginile și tipurile de publicații personalizate. Are multe caracteristici, principalele fiind:Cuprins ușor Wordpress plugin matières table

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 un plugin WordPress gratuit care are tot ce aveți nevoie pentru a afișa cuprinsul dvs., așa că nu ezitați să îl alegeți ca alegere de top.

Descarca | Demoweb hosting

3. WooCommerce Advanced Bulk Edit

Publicați în mod regulat catalogul dvs. de produse? Fie că aveți 100 de produse sau 10.000, acest plugin WordPress premium este IMHO „A must have”: (Acesta este primul cuvânt care îmi vine în minte).Plugin Woocommerce pentru editare în vrac în bloc

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

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

Resurse recomandate

Aflați despre alte resurse recomandate pentru a vă ajuta să construiți și să gestionați site-ul dvs. web.

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.

... 

Acest articol conține comentarii 0

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top
7 acțiuni
acțiune6
tweet
Registru1