Živimo u svijetu visoke definicije. A budući da većina nas provodi više od osam sati dnevno gledajući različite vrste zaslona, kvalitetu slika a znakovi sadržani na ovim ekranima vrlo su važni.
Iako su dostupni tek nekoliko godina, Retina zasloni put su budućnosti. Velika gustoća piksela na Retina zaslonima čini slike jasnima i oštrijima. A tko ne voli lijepe, oštre slike?
Naučiti stvoriti web stranicu kompatibilan s Retina zaslonima važna je prednost za svakog web programera. Nažalost, ne postoji idealno, savršeno rješenje da svoju web stranicu učinite prilagođenom korisniku sa zaslonima spremnim za retinu.
Dakle, dok čekamo da netko pronađe najcjelovitije rješenje, pregledali smo neke od najboljih mogućih opcija za pripremu vaše web stranice. Na taj način nećete zalutati kada dođe vrijeme kada će se svi uređaji pojaviti Retina u jednom ili drugom obliku.
Ali prije nego što započnete, odvojite vrijeme i pogledajte Kako instalirati WordPress temu, Koliko dodaci bih trebao instalirati na WordPress.
Onda krenimo na posao!
Izrada više slikovnih datoteka
Krenimo s osnovama. Najlakši način da dobijete podršku za način rada Retina za svoje web mjesto je da stvoriti više varijacija slike u različitim rezolucijama. To znači da za svaku vrstu razlučivosti (tj. 1x) trebate stvoriti verziju tog isječka visoke razlučivosti (tj. 2x).
U osnovi možete stvoriti više verzija iste datoteke i koristiti dodatak poput WP Retina 2x ili skriptu poput retina.js da biste automatski generirali "@ 2x" verzije svake veličine slike ili pronašli slike "@ 2x" i prikazali veličina koja odgovara svakom uređaju.
Istina je da stvaranje više verzija iste slike može biti dugotrajan proces. Nažalost, ne postoji brza metoda koja automatski generira ove slike umjesto vas. Međutim, postoji nekoliko dodataka Photoshopa koji vam omogućuju brzo popravljanje slika.
Dodaci poput " Retiniziraj Što je niz Photoshop radnji koje vam omogućuju jednostavnu optimizaciju vašeg dizajna za Retina zaslone. Ako upotrebljavate stariju verziju Photoshopa (pre-CC), možete upotrijebiti nešto poput " Četiri Što u osnovi čini sve što čini trenutni alat Photoshop Generator, ali za starije verzije Photoshopa.
Skalabilna vektorska grafika (SVG)
Najlakši način za napredak s Retina načinom je upotreba skalabilne vektorske grafike (SVG) na svojoj web stranici. SVG je format vektorske slike zasnovan na XML-u. Kao što i samo ime govori, SVG slika je skalabilna, što znači da se slike mogu razvući koliko god je potrebno (ili koliko je malo potrebno), a da pritom ostanu oštre i jasne. To može biti brz i jednostavan način da implementirate Retina način rada bez puno napora.
Pročitajte također: Kako pružiti WebP slike umjesto tradicionalnih PNG i JPG
Međutim, postoje dva nedostatka korištenja SVG-a na WordPressu. Prvo je da, budući da je vektorski format, SVG nije prikladan za sve slike. Dakle, SVG možete koristiti za logotipe i ikone, ali ne i za datoteke poput fotografija (što je malo bolno ako želite koristiti slike visoke rezolucije za svoju web stranicu). Ali ako želite koristiti jednostavne ikone, animacije ili ilustracije, SVG datoteke sigurno mogu biti opcija za web-mjesto koja je kompatibilna s mrežnicom.
Drugi nedostatak upotrebe SVG-a na WordPressu je što to nije službeno kompatibilan format s WordPressom zbog sigurnosnih razloga. Budući da je SVG datoteka u osnovi XML datoteka, ovo je otvara za sve poznate ranjivosti povezane s formatom XML datoteke, kao što su prisilna analiza, XML napadi na vanjske entitete (XEE), XML napadi uskraćivanja usluge (XDoS) itd.
Međutim, postoji način da omogućite SVG podršku za vaše web mjesto što će vaše SVG datoteke učiniti sigurnima.
Kako omogućiti SVG sigurno na WordPressu
Sigurna SVG je dodatak koji vam omogućuje da sigurno omogućite podršku za SVG datoteke na vašem web mjestu. Ovaj dodatak osigurava dezinfekciju SVG datoteka kako bi se spriječile potencijalne XML ranjivosti koje utječu na vaše web mjesto.
Klonite se dodataka koji dopuštaju da tip MIME dopušta prijenos sa SVG-a u WordPress medijsku knjižnicu jer su oni opasni i potencijalno štetni za vašu web stranicu. Dakle, ako ste u iskušenju koristiti SVG format na WordPressu, pobrinite se da to radite sigurno i nemojte preuzimati prvi SVG dodatak koji vidite.
Potaknite više konverzija na svom blogu čitajući naš 15 vrste sadržaja koji generiraju više posjetitelja na svoj blog
Neki dodaci za integraciju Retina kompatibilnosti u WordPress
Postoji nekoliko skripti i dodataka za Retina kompatibilnost koji vam mogu puno olakšati život prilikom pokušaja postavljanja web mjesta kompatibilnog s Retina Modeom. Međutim, kao što je ranije spomenuto, većina dostupnih dodataka i skripti zamijenite slike slikama visoke rezolucije samo za zaslone visoke razlučivosti. Ne istežu se poput SVG-a: još uvijek trebate stvoriti više slika različitih rezolucija.
1 - retina.js
retina.js jedna je od najčešće korištenih skripti za posluživanje slika visoke razlučivosti. Ovo je skripta otvorenog koda koja olakšava posluživanje slika visoke rezolucije na uređajima s Retina zaslonima.
Skripta provjerava svaku sliku na stranici da li postoji verzija te slike u visokoj rezoluciji na poslužitelju. Ako postoji varijanta visoke rezolucije, skripta zamjenjuje standardnu rezoluciju sa slikom visoke rezolucije. Ovo je jedan od najčešćih načina posluživanja slika za Retina zaslone na vašem web mjestu.
Vidi također: GIF, Emojis ili Memes: dobra ideja za WordPress web stranice?
2 - gusto
Slično kao retina.js, gust je dodatak jQuery koji nudi jednostavan način posluživanja slika u formatu omjera piksela. Skripta poziva metodu $ .fn.dense () inicijalizacije koja cilja "img" oznake koje će po potrebi služiti kao slike kompatibilne s Retina načinom.
Dakle, zamjenjuje sve slike odgovarajućom verzijom visoke rezolucije, baš kao i skripta retina.js.
3 - WP mrežnica 2x
Potonji se može usporediti s čarobnim Retina generatorom slike.
WP Retina 2x dodatak je koji stvara slikovne datoteke potrebne za High-DPI uređaje i u skladu s tim prikazuje ih posjetiteljima. Za razliku od prethodne dvije skripte, ona generira slike različite razlučivosti od početne slike. Dakle, ako niste previše zadovoljni ručnim stvaranjem različitih slika u različitim rezolucijama, ova je opcija za vas.
To je sve za ovaj tutorial, nadam se da će vam omogućiti pretvoriti svoje slike u Retina Ready sliku.
Otkrijte i neke premium WordPress dodatke
Možete koristiti druge WordPress plugins dati moderan izgled i optimizirati rukovanje vašim blogom ili web stranicom.
Ovdje vam nudimo nekoliko premium WordPress dodataka koji će vam pomoći u tome.
1. Fancy WordPress Popis autora
Kao što i samo ime govori, dodatak Fancy WordPress Popis autora u widgetu prikazuje popis autora za vaše web mjesto. Ima jednostavno korisničko sučelje koje omogućuje prikazati podatke bilo kojeg autora u bočnoj traci. Sve što trebate učiniti je povući autorski widget na bočnu traku i dodatak će obaviti posao.
Njegova su glavna obilježja između ostalog: mogućnost za prikaz autora bloga na zabavan način privlačenja novih posjetitelja, mogućnost prikazivanja popisa autora na bočnoj traci ili na stranici, mogućnost započeti natjecanje između autora vašeg bloga, responzivan izgled, podrška za kratke kodove i još mnogo toga.
Preuzmi | demo | Web hosting
2. Jednostavna sadržina
Ce WordPress plugin prilagođen korisniku omogućuje umetanje tablice sadržaja u vaše postove, stranice i prilagođene vrste postova. Ima mnogo značajki, a glavne su:
automatsko upravljanje sadržajem, podrška za oznaku , Podrška za dodatak Rankin Math, kompatibilnost s nekoliko uređivača stranica kao što je Gutenberg, Divi, Elementor, WPBakery Page Builder i drugi, mogućnost izbora na kojim stranicama želite da ih prikazuju vaše publikacije, automatsko umetanje sadržaja na određene stranice i mnoge druge.
To je WordPress plugin besplatni softver koji ima sve što vam je potrebno za prikaz vašeg sadržaja, pa ga slobodno odaberite kao svoj prvi izbor.
Preuzmite | demo | Web hosting
3. Uređivanje naprednog rasporeda WooCommercea
Uređujete li redovito svoj katalog proizvoda? Bilo da imate 100 proizvoda ili 10.000 XNUMX, ovo WordPress plugin premium je po mom skromnom mišljenju “A must have”: (To je prva riječ koja mi pada na pamet).
Samo za nekoliko dolara, čep WooCommerce Napredni skupni uređivanje olakšat će vam život i uštedjeti vam monstruozno vrijeme. Nema oklijevanja da je to bomba.
Preuzmite | demo | Web hosting
Preporučeni resursi
Saznajte više o drugim preporučenim resursima koji će vam pomoći u izgradnji i upravljanju web mjesta.
- 5 izvore prometa što vjerojatno znate
- Studija slučaja: Content marketing, kako učiti iz pogrešaka
- Zašto freelanceri trebaju dnevni raspored
- 7 aspekte koji će vam pomoći stvoriti uspješan blog
Zaključak
Ovdje! To je sve za ovaj vodič, nadam se da će vam omogućiti stvaranje slika spremnih za mrežnicu za vaše web mjesto. Ne ustručavajte se dijelite sa svojim prijateljima na svojim omiljenim društvenim mrežama.
Međutim, možete se konzultirati naši resursi, ako vam je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na Izrada bloga WordPress.
Ako imate prijedloge ili primjedbe, ostavite ih u našem odjeljku Komentari.
...
