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 600.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óżnego rodzaju ekranów, jakość zdjęć i znaków zawartych na tych ekranach jest bardzo ważne.

Chociaż są dostępne tylko od kilku lat, wyświetlacze Retina są drogą przyszłości. Wysoka gęstość pikseli na wyświetlaczach Retina sprawia, że ​​obrazy są wyraźne i wyraźne. A kto nie lubi ładnych i ostrych zdjęć?

Ekran gotowości do siatkówki

Nauczenie się, jak stworzyć stronę internetową kompatybilną z wyświetlaczami Retina, jest wielkim atutem dla każdego twórcy stron internetowych. Niestety, nie ma idealnego, 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 będzie się pojawiać w takiej czy innej formie.

Ale zanim zaczniesz, nie spiesz się Jak zainstalować WordPress, Ilu 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” dla 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 , Czyli seria działań w Photoshopie, które pozwalają łatwo zoptymalizować projekty pod kątem wyświetlaczy Retina. Jeśli używasz starszej wersji programu Photoshop (wcześniejszej niż CC), możesz użyć czegoś takiego jak „ Cztery Jest to zasadniczo wszystko, co robi obecne narzędzie Photoshop Generator, ale we wcześniejszych wersjach Photoshopa.

Scalable Vector Graphics (SVG)

Najłatwiejszym sposobem korzystania z trybu Retina jest użycie formatu Scalable Vector Graphics (SVG) na swojej stronie internetowej. SVG to format grafiki wektorowej oparty na języku XML. 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 jednocześnie 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 proponować obrazy WebP zamiast tradycyjnych PNG i JPG

Wektor siatkówki vsraster

Istnieją jednak dwie wady korzystania z SVG na WordPress. Po pierwsze, ponieważ jest to format wektorowy, SVG nie jest odpowiedni dla 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, otwiera go do 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, która umożliwia 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 pozwalają typowi MIME na przesyłanie 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 kompatybilnych z Retina, które mogą znacznie ułatwić Ci życie, próbując założyć stronę internetową kompatybilną z 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 wydłużają 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 o 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 sprawdzić, 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 najpopularniejszych 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 prosty sposób wyświetlania obrazów w formacie pikseli. Skrypt wywołuje metodę inicjalizacji $ .fn.dense (), która celuje w tagi „img”, które w razie potrzeby będą obsługiwały obrazy zgodne z Retiną.

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 generatora magicznego obrazu Retina.

WP Retina 2x to wtyczka, która tworzy pliki obrazów wymagane przez urządzenia o wysokiej rozdzielczości i odpowiednio wyświetla je użytkownikom. W przeciwieństwie do dwóch poprzednich 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, wtyczka Fantazyjna lista autorów WordPress wyświetla listę autorów Twojej witryny w widżecie. Ma prosty interfejs użytkownika, który pozwala aby wyświetlić 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łównymi cechami są między innymi: możliwość aby wyświetlić autorów bloga w zabawny sposób, aby przyciągnąć nowych użytkowników, 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 | Demo | hosting

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 <! - nextpage–>, 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, aby wyświetlić spis treści, więc możesz wybrać tę opcję jako najlepszy wybór.

Pobierz | Demo | hosting

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

Odkryj inne zalecane zasoby, które będą Ci towarzyszyć w tworzeniu witryny i zarządzaniu 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

Twój adres e-mail nie zostanie 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
7 akcji
udział6
ćwierkanie
Enregistrer1