Przejdź do głównej treści

Jak tworzyć obrazy gotowe do siatkówki dla swojej witryny

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 901.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Żyjemy w świecie wysokiej rozdzielczości. A ponieważ większość z nas spędza ponad osiem godzin dziennie na oglądaniu różnych typów ekranów, jakość zdjęć i znaków zawartych na tych ekranach jest bardzo ważne.

Chociaż są one dostępne dopiero od kilku lat, wyświetlacze Retina to przyszłość. Wysoka gęstość pikseli w wyświetlaczach Retina sprawia, że ​​obrazy są wyraźne i wyraźne. A kto nie lubi ładnych, wyraźnych obrazów?

Ekran gotowości do siatkówki

Nauczenie się, jak stworzyć witrynę internetową kompatybilną z wyświetlaczami Retina, jest ważnym atutem dla każdego programisty internetowego. Niestety, nie ma jednego, idealnego rozwiązania, które uczyniłoby Twoją witrynę przyjazną dla użytkownika dzięki wyświetlaczom Retina-Ready.

Dlatego czekając, aż ktoś znajdzie najbardziej kompletne rozwiązanie, przyjrzeliśmy się niektórym z najlepszych możliwych opcji przygotowania witryny. W ten sposób nie dasz się zwieść, gdy nadejdzie czas, gdy na wszystkich urządzeniach siatkówka pojawi się w takiej czy innej formie.

Ale zanim zaczniesz, nie spiesz się Jak zainstalować WordPressIlu wtyczki należy zainstalować na WordPress.

Więc chodźmy do pracy!

Tworzenie wielu plików obrazów

Zacznijmy od podstaw. Najłatwiejszym sposobem uzyskania obsługi trybu Retina dla Twojej witryny jest tworzyć wiele odmian obrazu w różnych rozdzielczościach. Oznacza to, że dla każdego typu rozdzielczości (tj. 1x) należy utworzyć wersję tego klipu w wysokiej rozdzielczości (tj. 2x).

Zasadniczo możesz utworzyć wiele wersji tego samego pliku i użyć wtyczki, takiej jak WP Retina 2x lub skryptu, takiego jak retina.js, aby automatycznie wygenerować wersje „@ 2x” każdego rozmiaru obrazu lub znaleźć obrazy „@ 2x” i wyświetlić rozmiar odpowiadający każdemu urządzeniu.

Prawdą jest, że tworzenie wielu wersji tego samego obrazu może być procesem czasochłonnym. Niestety nie ma szybkiej metody, która automatycznie generuje te obrazy za Ciebie. Jednak, istnieje kilka wtyczek programu Photoshop, które umożliwiają szybką naprawę obrazów.

Wtyczki typu „ Retinize It Jest to seria działań programu Photoshop, które pozwalają łatwo zoptymalizować projekty pod kątem wyświetlaczy Retina. Jeśli używasz starszej wersji programu Photoshop (sprzed wersji CC), możesz użyć czegoś takiego jak „ Cztery Który w zasadzie robi wszystko, co robi obecne narzędzie Photoshop Generator, ale dla starszych wersji Photoshopa.

Scalable Vector Graphics (SVG)

Najłatwiejszym sposobem korzystania z trybu Retina jest użycie Scalable Vector Graphics (SVG) na swojej stronie internetowej. SVG to oparty na XML format grafiki wektorowej. Jak sama nazwa wskazuje, obraz SVG jest skalowalny, co oznacza, że ​​obrazy można rozciągać tak daleko (lub tak mało), jak potrzeba, zachowując przy tym ostry i wyraźny obraz. Może to być szybki i łatwy sposób na wdrożenie trybu Retina bez większego wysiłku.

Czytaj także: Jak udostępniać obrazy WebP zamiast tradycyjnych plików PNG i JPG

Wektor siatkówki vsraster

Istnieją jednak dwie wady korzystania z formatu SVG na WordPress. Po pierwsze, ponieważ jest to format wektorowy, SVG nie nadaje się do wszystkich obrazów. Możesz więc używać SVG do logo i ikon, ale nie do plików takich jak zdjęcia (co jest nieco bolesne, jeśli lubisz używać obrazów o wysokiej rozdzielczości dla swojej witryny). Ale jeśli chcesz korzystać z prostych ikon, animacji lub ilustracji, pliki SVG z pewnością mogą być opcją dla witryny internetowej zgodnej z Retina.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

Drugą wadą korzystania z SVG na WordPressie jest to, że nie jest to oficjalnie zgodny format z WordPress ze względów bezpieczeństwa. Ponieważ plik SVG jest zasadniczo plikiem XML, powoduje to otwarcie pliku wszystkie znane luki związane z formatem pliku XML, takie jak analiza przymusu, ataki XML External Entity Attack (XEE), ataki XML Denial of Service Attack (XDoS) itp.

Istnieje jednak sposób, aby włączyć obsługę SVG w Twojej witrynie, co zapewni bezpieczeństwo plików SVG.

Jak bezpiecznie włączyć SVG w WordPress

Bezpieczne SVG to wtyczka umożliwiająca bezpieczne włączenie obsługi plików SVG w Twojej witrynie. Ta wtyczka zapewnia wyleczenie plików SVG, aby zapobiec potencjalnym lukom XML w Twojej witrynie.

Trzymaj się z dala od wtyczek, które umożliwiają typowi MIME przesyłanie plików z SVG do biblioteki multimediów WordPress, ponieważ są one niebezpieczne i potencjalnie szkodliwe dla Twojej witryny. Jeśli więc naprawdę kusi Cię użycie formatu SVG w WordPress, upewnij się, że robisz to bezpiecznie i nie pobieraj pierwszej wtyczki SVG, którą widzisz.

Zwiększ liczbę konwersji na swoim blogu, czytając nasze typy zawartości 15 które generują więcej odwiedzających bloga

Niektóre wtyczki do integracji kompatybilności Retina z WordPress

Istnieje kilka skryptów i wtyczek dla kompatybilności z Retina, które mogą znacznie ułatwić Ci życie podczas próby skonfigurowania strony internetowej zgodnej z trybem Retina. Jednak, jak wspomniano wcześniej, większość dostępnych wtyczek i skryptów zastępuje obrazy obrazami o wysokiej rozdzielczości tylko w przypadku wyświetlaczy o wysokiej rozdzielczości. Nie rozciągają się jak SVG: nadal musisz tworzyć wiele obrazów o różnych rozdzielczościach.

1 - retina.js

retina.js jest jednym z najczęściej używanych skryptów do obsługi obrazów w wysokiej rozdzielczości. Jest to skrypt typu open source, który ułatwia wyświetlanie obrazów w wysokiej rozdzielczości na urządzeniach z wyświetlaczami Retina.

Skrypt sprawdza każdy obraz na stronie, aby zobaczyć, czy na serwerze znajduje się wersja tego obrazu w wysokiej rozdzielczości. Jeśli istnieje wariant o wysokiej rozdzielczości, skrypt zamienia rozdzielczość standardową na obraz o wysokiej rozdzielczości. Jest to jeden z najczęstszych sposobów wyświetlania obrazów wyświetlaczy Retina w Twojej witrynie.

Zobacz także: GIF, emotikony lub memy: dobry pomysł na strony WordPress?

2 - Gęsty

Podobne do retina.js, Gęsty to wtyczka jQuery, która oferuje łatwy sposób na wyświetlanie obrazów w formacie ze współczynnikiem pikseli. Skrypt wywołuje metodę inicjalizacji $ .fn.dense (), która jest ukierunkowana na znaczniki „img”, które w razie potrzeby będą służyć jako obrazy zgodne z trybem Retina.

Zastępuje więc wszystkie obrazy odpowiednią wersją wysokiej rozdzielczości, podobnie jak skrypt retina.js.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

3 - WP Retina 2x

Ten ostatni można porównać do magicznego generatora obrazu Retina.

WP Retina 2x to wtyczka, która tworzy pliki graficzne wymagane przez urządzenia o wysokiej rozdzielczości i odpowiednio wyświetla je odwiedzającym. W przeciwieństwie do poprzednich dwóch skryptów, generuje obrazy o różnej rozdzielczości z obrazu początkowego. Jeśli więc nie jesteś zbyt zadowolony z ręcznego tworzenia różnych obrazów o różnych rozdzielczościach, ta opcja jest dla Ciebie.

To wszystko w tym samouczku, mam nadzieję, że pozwoli ci on przekonwertować twoje obrazy na obraz Retina Ready.

Odkryj także niektóre wtyczki premium WordPress  

Możesz użyć innych wtyczek WordPress, aby nadać nowoczesny wygląd i zoptymalizować chwyt swojego bloga lub strony internetowej.

Oferujemy tutaj kilka premium wtyczek WordPress, które pomogą Ci to zrobić.

1. Fancy Lista autorów WordPress

Jak sama nazwa wskazuje, plugin Fantazyjna lista autorów WordPress wyświetla listę autorów Twojej witryny w widżecie. Ma prosty interfejs użytkownika, który pozwala wyświetlać informacje dowolnego autora na pasku bocznym. Wystarczy przeciągnąć widget autora na pasek boczny, a wtyczka wykona pracę.

Fantazyjna wtyczka Wordpress z listą autorów

Jego główne cechy to między innymi: możliwość aby wyświetlić autorów bloga w zabawny sposób, aby przyciągnąć nowych gości, możliwość wyświetlania listy autorów na pasku bocznym lub na stronie, możliwość rozpocząć zawody między autorami Twojego bloga, responsywny układ, obsługa skrótów i wiele więcej.

Pobierz | Demohosting

2. Łatwy spis treści

Ta przyjazna dla użytkownika wtyczka WordPress umożliwia wstawianie spisu treści do spersonalizowanych publikacji, stron i rodzajów publikacji. Ma wiele funkcji, z których główne to:Łatwy spis treści Wordpress plugin table matieres

automatyczne zarządzanie spisem treści, obsługa tagu , Obsługa wtyczki Rankin Math, kompatybilność z kilkoma edytorami stron, takimi jak Gutenberg, Divi, Elementor, Program do tworzenia stron WPBakery i inne, możliwość wyboru, na których stronach publikacje mają być wyświetlane, automatyczne wstawianie spisu treści na niektórych stronach i wiele innych.

Jest to bezpłatna wtyczka WordPress, która ma wszystko, czego potrzebujesz do wyświetlenia spisu treści, więc możesz ją wybrać jako najlepszy wybór.

Pobierz | Demohosting

3. Zaawansowana edycja WooCommerce

Czy regularnie publikujesz swój katalog produktów? Niezależnie od tego, czy masz 100 produktów, czy 10.000 XNUMX, ta wtyczka premium WordPress to IMHO „A must have”: (To pierwsze słowo, które przychodzi na myśl).Zaawansowana wtyczka Wordpress do edycji zbiorczej Woocommerce

Tylko za kilka dolarów, wtyczka WooCommerce Zaawansowana edycja zbiorcza sprawi, że życie stanie się łatwiejsze i zaoszczędzisz potworny czas. Bez wahania to bomba.

Pobierz Demo | hosting

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

Polecane zasoby

Dowiedz się o innych zalecanych zasobach, które pomogą Ci zbudować witrynę i zarządzać nią.

Wnioski

Tutaj! To wszystko w tym samouczku, mam nadzieję, że pozwoli Ci on stworzyć obrazy Retina-Ready dla Twojej witryny. Nie wahaj się udostępnij znajomym w swoich ulubionych sieciach społecznościowych

Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na temat Tworzenie bloga WordPress.

Jeśli masz sugestie lub uwagi, zostaw je w naszej sekcji commentaires.

... 

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry