Živimo u svijetu visoke definicije. A budući da većina nas provodi više od osam sati dnevno gledajući različite tipove ekrana, kvalitet slika a likovi sadržani na ovim ekranima su vrlo važni.
Iako su dostupni tek nekoliko godina, Retina ekrani put su budućnosti. Velika gustina piksela na Retina ekranima čini slike jasnim i oštrim. A ko ne voli lijepe, oštre slike?
Naučiti stvoriti web stranicu kompatibilnost sa Retina ekranima je važna prednost za svakog web developera. Nažalost, ne postoji idealno, savršeno rješenje da svoju web stranicu učinite prilagođenom korisniku uz Retina-Ready displeje.
Dakle, dok čekamo da netko pronađe najcjelovitije rješenje, pogledali smo neke od najboljih mogućih opcija za pripremu vaše web stranice. Na taj način nećete zalutati kad dođe vrijeme kada će se Retina pojaviti na svim uređajima u jednom ili drugom obliku.
Ali prije nego što počnete, odvojite vrijeme i pogledajte Kako instalirati WordPress temu, Kako plugin treba instalirati na WordPress.
Onda krenimo na posao!
Izrada više slika
Počnimo s osnovama. Najlakši način da dobijete podršku za Retina Mode za svoju web lokaciju je stvoriti više varijacija slike u različitim rezolucijama. To znači da za svaki tip rezolucije (tj. 1x) trebate stvoriti verziju tog isječka visoke rezolucije (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 za vas. Kako god, postoji nekoliko Photoshop dodataka koji vam omogućavaju brzo popravljanje slika.
Dodaci poput " Retinizovati Što je niz Photoshop radnji koje vam omogućavaju da lako optimizirate svoj dizajn za Retina ekrane. Ako koristite stariju verziju Photoshopa (pre-CC), možete koristiti 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 da napredujete s Retina načinom je upotreba skalabilne vektorske grafike (SVG) na svojoj web lokaciji. SVG je format vektorskih slika 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 Mode bez mnogo napora.
Pročitajte takođe: Kako pružiti WebP slike umjesto tradicionalnih PNG i JPG
Međutim, postoje dvije nedostatke upotrebe SVG-a na WordPressu. Prva je da s obzirom da je u vektorskom formatu, SVG nije pogodan 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žom.
Drugi nedostatak korištenja SVG-a na WordPressu je taj što on nije službeno kompatibilan format s WordPressom zbog sigurnosnih razloga. Budući da je SVG datoteka u osnovi XML datoteka, ovo je otvara 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šu web lokaciju koja će vaše SVG datoteke učiniti sigurnima.
Kako omogućiti SVG sigurno na WordPressu
Sigurna SVG je dodatak koji vam omogućava da sigurno omogućite podršku za SVG datoteke na vašoj web lokaciji. Ovaj dodatak osigurava dezinfekciju SVG datoteka kako bi se spriječile potencijalne XML ranjivosti koje utječu na vašu web lokaciju.
Klonite se dodataka koji omogućavaju da MIME tip dopušta prijenos sa SVG-a u WordPress medijsku biblioteku jer su oni opasni i potencijalno štetni za vašu web lokaciju. Dakle, ako ste u iskušenju da koristite SVG format na WordPressu, pobrinite se da to radite sigurno i nemojte preuzimati prvi SVG dodatak koji vidite.
Potaknite više konverzija na svoj blog čitajući naš 15 vrste sadržaja koje stvaraju 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 znatno olakšati život prilikom pokušaja postavljanja web stranice kompatibilne s Retina Modeom. Međutim, kao što je ranije spomenuto, većina dostupnih dodataka i skripti zamjenjuju slike slikama visoke rezolucije samo za zaslone visoke rezolucije. Ne istežu se poput SVG-a: i dalje morate stvoriti više slika različitih rezolucija.
1 - retina.js
retina.js je jedna od najčešće korištenih skripti za posluživanje slika visoke rezolucije. Ovo je skripta otvorenog koda koja olakšava posluživanje slika visoke rezolucije na uređajima s Retina ekranima.
Skripta provjerava svaku sliku na stranici da li postoji verzija te slike u visokoj rezoluciji na serveru. Ako postoji varijanta visoke rezolucije, skripta zamjenjuje standardnu rezoluciju sa slikom visoke rezolucije. Ovo je jedan od najčešćih načina prikazivanja slika za Retina ekrane na vašoj web lokaciji.
Vidi takođe: 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 modom.
Dakle, zamjenjuje sve slike odgovarajućom verzijom visoke rezolucije, baš kao i skripta retina.js.
3 - WP Retina 2x
Potonje možemo uporediti s magičnim Retina generatorom slika.
WP Retina 2x je dodatak koji stvara slikovne datoteke potrebne za High-DPI uređaje i prikazuje ih posjetiteljima u skladu s tim. Za razliku od prethodne dvije skripte, ona generira slike različite rezolucije 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 da pretvorite svoje slike u Retina Ready sliku.
Otkrijte i neke premium WordPress dodatke
Možete koristiti druge WordPress plugins da date moderan izgled i da optimizujete rukovanje vašim blogom ili web sajtom.
Ovdje vam nudimo nekoliko premium WordPress dodataka koji će vam pomoći u tome.
1. Fancy WordPress autorska lista
Kao što i samo ime govori, dodatak Fancy WordPress Lista autora u widgetu prikazuje listu autora za vašu web lokaciju. Ima jednostavno korisničko sučelje koje to omogućava prikazati informacije bilo kog autora u bočnoj traci. Sve što trebate učiniti je povući autorski widget na bočnu traku i dodatak će obaviti posao.
Njegove glavne karakteristike su između ostalog: mogućnost za prikaz autora bloga na zabavan način privlačenja novih posjetitelja, mogućnost prikazivanja autorskog popisa na bočnoj traci ili na stranici, mogućnost započeti takmičenje između autora vašeg bloga, odazivnog izgleda, podrške za kratke kodove i još mnogo toga.
Preuzmi | Demo | web hosting
2. Jednostavna sadržina
Ce WordPress dodatak user-friendly vam omogućava da umetnete sadržaj u svoje postove, stranice i prilagođene vrste postova. Ima mnogo karakteristika, 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 a WordPress dodatak besplatni softver koji ima sve što vam je potrebno za prikaz vašeg sadržaja, pa ga slobodno odaberite kao svoj prvi izbor.
download | Demo | web hosting
3. WooCommerce Advanced Bulk Edit
Da li redovno uređujete svoj katalog proizvoda? Bilo da imate 100 proizvoda ili 10.000, ovo WordPress dodatak premium je po mom skromnom mišljenju “A must have”: (to je prva riječ koja mi pada na pamet).
Za samo nekoliko dolara, plugin WooCommerce Napredni skup uređivanja olakšat će vam život i uštedjeti vam monstruozno vrijeme. Nema oklevanja da je to bomba.
download | Demo | web hosting
Preporučeni resursi
Saznajte više o drugim preporučenim resursima koji će vam pomoći da izgradite i upravljate svojom web stranicom.
- 5 izvori saobraćaja koje verovatno ne znate
- Studija slučaja: marketing sadržaja, kako se učiti od grešaka
- Zašto freelanceri trebaju dnevni raspored
- 7 aspekti koji omogućavaju da stvorite uspješan blog
zaključak
Evo! To je sve za ovaj vodič, nadam se da će vam omogućiti da kreirate slike spremne za mrežnicu za vašu web lokaciju. Ne ustručavajte se dijelite sa svojim prijateljima na svojim omiljenim društvenim mrežama.
Međutim, možete se posavjetovati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem o Izrada bloga WordPress.
Ako imate prijedloge ili primjedbe, ostavite ih u našem odjeljku komentari.
...
