Jakiego typu pliku obrazu użyć w WordPress

Jeśli od jakiegoś czasu prowadzisz witrynę WordPress, prawdopodobnie zastanawiasz się, który typ pliku obrazu jest najlepszy dla Twojej witryny. Czy powinieneś używać JPG lub PNG? Być może chcesz użyć innego typu pliku obrazu, takiego jak WebP, ale nie wiesz, co zrobić. Jeśli to nie to, może chcesz przesłać obraz PSD, AI lub INDD i utkniesz.


Niezależnie od tego, dlaczego tu jesteś, dzisiejszy post pomoże Ci wybrać odpowiedni typ pliku obrazu dla Twojej witryny WordPress. Dlaczego konieczny jest wybór odpowiedniego typu pliku obrazu? O tym też piszemy. Ponadto wyróżniamy zaakceptowane typy plików graficznych, dodawanie innych typów plików i dotykamy kilku najlepszych praktyk dotyczących obrazów WordPress.

Jeśli to brzmi świetnie, zważmy kotwicę i odpłyńmy, ponieważ jest wiele do nauczenia się.

Dlaczego tak ważne jest, aby wybrać odpowiedni typ pliku obrazu?

Wybór idealnego typu pliku obrazu jest trudniejszy, niż ci się wydawało, i rozumiem. Musisz jednak uważnie obserwować używany typ pliku, ponieważ jest on skorelowany z wydajnością witryny. Dlaczego tak ważne jest, aby wziąć pod uwagę wybrany typ pliku obrazu?

  • Szybkość i wydajność – Niektóre typy plików obrazów zajmują więcej miejsca niż inne. Jeśli używasz dużych formatów obrazów, spowalniasz witrynę i zwiększasz koszty serwera. Wybierz jasne obrazy, które gwarantują lepszą szybkość i wydajność strony optymalne wrażenia użytkownika (UX).
  • Wynik SEO – Czy wiesz, że szybkość strony to bezpośredni sygnał rankingowy SEO? Jeśli używasz ciężkich lub niskiej jakości obrazów na swojej stronie, tracisz lepszą UX i powiązane korzyści SEO. Wybierając obrazy wysokiej jakości i gotowe do SEO, przygotuj strony, aby uzyskać lepsze wyniki SEO.
  • Estetyka – Niektóre formaty obrazów zachowują szczegóły lepiej niż inne, nawet po kompresji. Chcesz format obrazu, który wygląda świetnie dla tego dopracowanego, wysokiej jakości i profesjonalnego wyglądu �� Każdy format obrazu jest idealny do określonego zastosowania, więc wybierz mądrze.
  • Elastyczny projekt – Obecnie użytkownicy odwiedzają Twoją witrynę na różnych urządzeniach z różnymi przeglądarkami i rozmiarami ekranu. Musisz wybrać elastyczne typy plików graficznych, które są obsługiwane w większości przeglądarek. Ponadto potrzebujesz obrazów, które wyglądają niesamowicie na różnych ekranach. Więcej o tym później.
  • Konsystencja – Dla zachowania spójności zalecamy trzymanie się jednego głównego typu pliku dla swoich zdjęć. Możesz używać innych formatów plików na żądanie lub w zależności od potrzeb, ale jeden lub dwa formaty powinny być wystarczające.

Poza tym porozmawiajmy o dostępnych typach plików graficznych.

Dostępne typy plików graficznych

Przed wieloma nowicjuszami ukryty jest fakt, że istnieje świat formatów obrazów. Tak, są setki typów plików graficznych że potrzebowalibyśmy eBooka, aby pokryć je wszystkie. Nie martw się jednak; skupiamy się tylko na formatach obrazów, które są idealne dla stron WordPress.

Formaty obrazów są podzielone na dwie szerokie kategorie: RasterWektor obrazy.

Obrazy rastrowe są tworzone przez serię pikseli w celu utworzenia obrazu. Z tego właśnie powodu obrazy rastrowe zwykle tracą rozdzielczość podczas kompresji lub rozciągania. Trzy popularne formaty zdjęć – JPG, PNG i GIF – to obrazy rastrowe, które stanowią większość wszystkich zdjęć wyświetlanych w Internecie.

Z drugiej strony obrazy wektorowe są konstruowane przy użyciu wzorów matematycznych, a nie pikseli, co oznacza, że ​​są bardziej elastyczne, jeśli chodzi o częste zmiany rozmiaru. Popularne typy obrazów wektorowych to między innymi EPS Adobe (Encapsulated PostScript), SVG (Scalable Vector Graphics), PDF, WEBP i format AI programu Adobe Illustrator.

Aby regularnie korzystać z witryny, wybierz obrazy rastrowe. Jednocześnie możesz tworzyć obrazy wektorowe swoich logo i innych obrazów, które wymagają częstych edycji i zmiany rozmiaru. Najlepiej jest przekonwertować wszystkie obrazy wektorowe na obrazy rastrowe przed użyciem ich w witrynie WordPress.

Dlaczego?

Ponieważ obrazy rastrowe są jaśniejsze i obsługiwane przez wszystkie przeglądarki, powinieneś wybrać JPG lub PNG. Jeśli potrzebujesz animacji, masz format GIF. Obecnie mamy tylko trzy z setek dostępnych formatów graficznych.

To nasuwa pytanie: Ale jakie typy plików obrazów obsługuje WordPress?

Akceptowane typy plików graficznych

Według Kodeks, WordPress domyślnie akceptuje formaty JPG, JPEG, PNG, ICO i GIF. Jeśli się mylisz, JPEG to po prostu JPG, a ICO to format obrazu używany przez ikony. W witrynie WordPress ikona jest zwykle używana w Twojej ulubionej ikonie, a nie w obrazach we wpisach lub na stronach.

Domyślnie możesz przesyłać tylko JPG i PNG na swoje strony i posty. Jeśli chcesz z dowolnego powodu dodać inne typy plików graficznych, możesz użyć wtyczki takiej jak Dodatkowe typy plików WP. Jeśli nie lubisz wtyczek, możesz dodać następujący kod do swojego wp-config.php plik.

zdefiniuj ('ALLOW_UNFILTERED_UPLOADS', prawda);

Aby uzyskać alternatywną metodę, dodaj następujący kod do swojego functions.php plik:

Powyższy kod doda obsługę rozszerzeń SVG i JSON. Jeśli chcesz dodać rozszerzenia dla innych formatów graficznych, odpowiednio zmodyfikuj powyższy kod. Aby dowiedzieć się więcej, sprawdź jak przesłać dodatkowe typy plików w WordPress.

Jeśli wystąpią problemy z dodawaniem nowych typów plików, najpierw skontaktuj się z dostawcą usług hostingowych, ponieważ mogą one mieć ograniczenia. Poza tym, który jest najlepszym formatem plików graficznych do użycia?

Jaki jest najlepszy typ pliku obrazu do użycia?

W poniższej sekcji rozważamy trzy najpopularniejsze formaty obrazów dla stron internetowych. Zajmujemy się JPG, PNG i GIF, podkreślając najlepszy format do różnych zastosowań. Zacznijmy od JPG.

JPG

JPG (znany również jako JPEG) oznacza Joint Photographic Experts Group. Obrazy JPG dobrze nadają się do wysokich poziomów kompresji i mogą wyświetlać miliony kolorów, dzięki czemu idealnie nadają się do zdjęć i obrazów o żywych kolorach.

Ten format obrazu obsługuje kompresję stratną, co powoduje niewielki spadek jakości obrazu po optymalizacji. Możesz jednak kontrolować poziom kompresji, aby zapewnić najlepszą jakość i wydajność. Obrazy JPG nie obsługują przezroczystego tła.

PNG

PNG to skrót od Portable Network Graphics, formatu obrazu, który początkowo został zaprojektowany do przesyłania obrazów przez Internet. Obrazy PNG wyświetlają miliony kolorów, ale mogą być cięższe niż JPG. Są fantastyczne do zrzutów ekranu, logo, infografiki i grafiki w nagłówku, które identyfikują markę.

Obsługuje bezstratną kompresję PNG, co oznacza, że ​​żadne dane nie zostaną utracone podczas optymalizacji. W związku z tym obrazy PNG są wyraźniejsze i ostrzejsze niż obrazy JPG po kompresji. Ponadto typ pliku obrazu PNG obsługuje przezroczyste tło.

GIF

GIF to skrót od Graphics Interchange Format. Jest to format obrazu, który obsługuje zarówno obrazy animowane, jak i statyczne. Większość animacji wyświetlanych w mediach społecznościowych to obrazy GIF. W przeciwieństwie do JPEG i PNG, typ pliku obrazu GIF obsługuje tylko 256 kolorów, co czyni go nieodpowiednim do fotografii kolorowych i innych ilustracji z gradientem kolorów.

GIF stosuje bezstratną kompresję, aby zmniejszyć rozmiary plików bez utraty jakości wizualnej. Co więcej, GIF obsługuje etykiety tekstowe i przezroczyste tła, co czyni ten format idealnym do prostych animacji i filmów w niskiej rozdzielczości.

A więc z tych trzech, którego powinieneś użyć? Wszystko zależy od twoich potrzeb. PNG jest idealny do tworzenia logo, zrzutów ekranu, wykresów, infografik i obrazów marki wysokiej jakości. JPEG doskonale nadaje się do małych zdjęć w witrynie, a także zdjęć o żywych kolorach. GIF jest niesamowity w przypadku animacji i prostych filmów.

Ale wybranie typu pliku obrazu nie wystarczy, jeśli nieostrożnie korzystasz z obrazów. W poniższej sekcji przedstawiamy kilka najlepszych praktyk i wskazówek dotyczących obrazu WordPress.

Najlepsze praktyki WordPress Image

Postępuj zgodnie z poniższymi sprawdzonymi metodami i wskazówkami, aby jak najlepiej wykorzystać swoje obrazy. Krótko omawiamy takie obszary, jak rozmiar obrazu, maksymalny rozmiar wysyłania, SEO obrazu, optymalizacja i jak używać Google Analytics do informowania o strategii obrazu WordPress.

Rozmiar obrazu

Ustaliliśmy już, że rozmiar używanych obrazów może wpływać na szybkość Twojej witryny. Jako taki, powinieneś dążyć do używania jasnych obrazów. Jednocześnie nie rezygnuj z jakości wizualnej, próbując tworzyć jasne obrazy, co oznacza, że ​​musisz zachować ostrożność przy kompresji.

Ponadto nie zmieniaj rozmiarów obrazów przy użyciu HTML lub CSS. Jeśli potrzebujesz obrazu o wymiarach 300 na 300 pikseli, nie używaj obrazu o wymiarach 400 na 400 pikseli. Dodatkowo wybierz wysokiej jakości hosting WordPress, zaimplementuj buforowanie i CDN, aby przyspieszyć swoją witrynę.

Maksymalny rozmiar przesyłania

Czasami może być konieczne użycie dużego pliku obrazu z tego czy innego powodu. Ale możesz mieć problemy z przesyłaniem pliku, ponieważ WordPress ma domyślny rozmiar przesyłania 2 MB. Nie martw się, ponieważ możesz szybko zwiększyć maksymalny rozmiar przesyłanego pliku.

Rozmiar przesyłanego pliku CLoudways

W wielu przypadkach dostawcy hostingu oferują wbudowane ustawienie, które można edytować, aby samodzielnie zwiększyć rozmiar przesyłanego pliku. Na przykład w Cloudways wystarczy zalogować się na swoje konto, przejść do zarządzania serwerem i wybrać sekcję Ustawienia i pakiety (jak pokazano powyżej). Stąd możesz ręcznie zwiększyć limit rozmiaru przesyłanych plików, edytując dozwolony rozmiar MB.

Ale to może i różni się w zależności od hosta. GoDaddy wykorzystuje opcję w swoim panelu C, Media Temple, musisz zmodyfikować pliki php.ini, a wraz z WP Engine musisz skontaktować się z ich zespołem pomocy technicznej, aby poprosić o zwiększenie.

Image SEO

Poza przekazywaniem wiadomości i poprawianiem wyglądu witryny, czy wiesz, że możesz użyć obrazów, aby poprawić swoje wyniki SEO? Zgadza się; możesz użyć SEO image, aby zwiększyć ruch na swojej stronie. W jaki sposób? Na początek odpowiednio nazwij swoje zdjęcia. Na przykład zamiast „picture001.png” użyj „how-to-image-seo.png” i tak dalej. Ponadto po przesłaniu dodaj tekst alternatywny do wszystkich zdjęć. Dzięki tekstom alternatywnym wyszukiwarki i czytniki ekranu mogą „zobaczyć” twoje obrazy.

Przydatne wtyczki optymalizacji obrazu WordPress

WordPress jest dość łatwym w użyciu systemem CMS dzięki wtyczkom. Chociaż optymalizacja zdjęć jest pomocna przy użyciu oprogramowania do obróbki zdjęć (np. Photoshop) przed przesłaniem, możesz wykorzystać wtyczki, aby zoptymalizować swoje zdjęcia po przesłaniu.

Godne uwagi wtyczki do optymalizacji obrazu WordPress Smush, EWWW Image Optimizer, i Wyobraź sobie, pośród innych. Wybierz wtyczkę, która jest idealna dla Twoich potrzeb, ponieważ każda z nich ma unikalny zestaw funkcji.

Użyj Google Analytics

Kiedy wszystko zostanie powiedziane, chcesz zapewnić użytkownikom jak najlepsze wrażenia. W tym celu musisz znać swoich odwiedzających i urządzenia, których używają do uzyskania dostępu do Twojej witryny. W ten sposób możesz wybrać idealne formaty i rozmiary obrazów. Na przykład, jeśli większość odwiedzających korzysta z przeglądarki Apple Safari, konieczne będzie zapewnienie dodatkowej pomocy przy korzystaniu z plików graficznych WEBP w WordPress.


Wybór idealnego typu pliku obrazu dla witryny WordPress jest niezbędny, jeśli chodzi o szybkość, UX, wydajność witryny, SEO i spójność.

Nie możesz pozwolić sobie na pozostawienie tego obszaru bez opieki, ponieważ możesz czerpać korzyści z opracowania dobrej strategii wizerunkowej. Przewodnik po stylu powinien zawierać wytyczne dotyczące obrazów dla wszystkich użytkowników.

Na koniec skompresuj i zoptymalizuj swoje zdjęcia, aby uzyskać idealną równowagę między jakością a wydajnością.

Czy masz pytania dotyczące typów plików graficznych? Daj nam znać w sekcji komentarzy poniżej!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me