6 najlepszych praktyk dotyczących obrazów na blogu

Opublikowany: 2023-03-20

Jako inni użytkownicy sieci wiemy, że nie czytamy każdego słowa na blogu – raczej „przeskanujemy” stronę. W rezultacie aspekt wizualny ma również kluczowe znaczenie dla budowania zaufania i autorytetu wśród odwiedzających. Wydajność i konwersje w dużym stopniu zależą od wyboru obrazów, dlatego wymieniliśmy 6 sprawdzonych metod dodawania zoptymalizowanych obrazów do postów na blogu.

Zanurzmy się!

Dlaczego warto dobrze wybrać obrazy na swoim blogu

Typowy gość przeczyta tylko około 20% słów na Twoim blogu. Dlatego konieczne jest dodanie odpowiednich elementów wizualnych, aby przykuć jego uwagę na nieco dłużej. Poniższy wykres pokazuje maksymalną ilość tekstu, jaką użytkownicy mogą przeczytać podczas przeciętnej wizyty na stronach o różnej liczbie słów.

Czytelnicy mają tendencję do czytania mniejszej ilości treści, gdy artykuł jest dłuższy – Źródło: NNGroup, które specjalizuje się w doświadczeniach użytkowników opartych na badaniach.

Jeśli więc użytkownicy nie będą czytać całej treści, przyjrzą się układowi, projektowi i oczywiście: obrazom . Oto dlaczego powinieneś starannie wybrać zdjęcia do następnego posta:

1. Wysokiej jakości obrazy na stronie internetowej budują zaufanie i autorytet w Twojej firmie i marce

Zaufanie powinno być ostatecznym celem marketingowym podczas tworzenia strony internetowej lub pisania posta na blogu. Chcesz, aby czytelnicy traktowali Cię poważnie, opowiadali się za Twoją firmą i ostatecznie kupowali Twoje produkty. Jak zdobyć zaufanie? Klienci mają większe zaufanie do kogoś, kogo uważają za eksperta w danej dziedzinie, a autorytet ten jest budowany poprzez projekt, dobór słów, kolorów, logo i oczywiście obrazów. Infografiki idealnie nadają się do zwiększania wiarygodności i pomagają zrozumieć ideę w zaledwie kilka sekund.

Trafność i zaufanie — źródło: Imagify
Trafność i zaufanie – źródło: Imagify

2. Obrazy mogą wyróżniać treść i zapadać w pamięć

Zawsze staraj się wybierać zdjęcia, które sprawią, że czytelnik będzie chciał podzielić się nimi w mediach społecznościowych. Na przykład, który post na blogu udostępniłbyś na Facebooku, gdybyś chciał ogłosić swoją kolejną podróż na Malediwy? Kiedy myślimy o tym miejscu, post „A” ma atrakcyjniejsze zdjęcie niż post „B”.

Przykład atrakcyjnego i mniej atrakcyjnego obrazu we wpisie na blogu podróżniczym — źródło: Imagify
Przykład atrakcyjnego i mniej atrakcyjnego obrazu we wpisie na blogu podróżniczym – źródło: Imagify

3. Zdjęcia pomagają zilustrować to, co chcesz powiedzieć swoimi słowami

Być może słyszałeś popularne powiedzenie „jeden obraz jest wart tysiąca słów”, co oznacza, że ​​pojedynczy obraz może przekazać złożone idee. Właśnie to powinny robić twoje obrazy: wzmacniać swój pisemny pomysł z perspektywy wizualnej.

Na przykład, jeśli piszesz o faktach opartych na danych, pomocne może być tworzenie wizualizacji kluczowych danych, tak jak robi to Google na swoim blogu:

Podkreślenie kluczowych postaci w tekście - Źródło: ThinkwithGoogle
Podkreślenie kluczowych postaci w tekście – Źródło: ThinkwithGoogle

Ostatnią radą dotyczącą wyboru odpowiedniego obrazu jest wybranie tych, które nie wpłyną na wydajność Twojego bloga, a które poprawią Twoje SEO. To prowadzi nas do następnej sekcji: naszych 6 wskazówek, dzięki którym Twoje zdjęcia będą doskonale zoptymalizowane przed ich opublikowaniem.

6 najlepszych praktyk dotyczących obrazów na blogu

Oto 6 najlepszych praktyk, których należy przestrzegać przed przesłaniem zdjęć na bloga. Przydadzą się w następnym artykule, zwłaszcza jeśli chcesz zapewnić wydajność, wzmocnić SEO i uniknąć problemów z prawami autorskimi.

1. Wybierz odpowiedni rozmiar i format obrazu

Wybór odpowiedniego rozmiaru i formatu obrazu ma kluczowe znaczenie dla uniknięcia problemów z wydajnością. Gdy stworzysz idealną infografikę lub wybierzesz odpowiednie zdjęcie, pamiętaj o sprawdzeniu ostatecznego rozmiaru pliku. W przypadku posta na blogu zalecamy użycie maksymalnej szerokości obrazów wynoszącej 800 pikseli.

Rozmiar obrazów do posta na blogu — Źródło: Imagify
Rozmiar obrazów do posta na blogu – Źródło: Imagify

Jeśli chodzi o format, sugerujemy użycie formatów nowej generacji, takich jak WebP lub AVIF, zamiast tradycyjnego png lub JPG. W przypadku tej samej jakości Google zauważył, że średni rozmiar pliku WebP był o 25–34% mniejszy niż plik JPEG.

Pliki WebP mniejsze niż JPEG – Źródło: Google

Rozwiązania do konwersji obrazów do WebP:

  • Narzędzia online, takie jak xConvert – możesz konwertować swoje obrazy do WebP za pomocą kilku kliknięć i później ręcznie przesyłać je do WordPress.
  • Wtyczki WordPress, takie jak Imagify – które umożliwiają konwersję obrazów do WebP bezpośrednio z poziomu administratora WordPress.
Konwersja obrazów do najlepszego formatu internetowego (WebP) — Źródło: Imagify
Konwersja obrazów do najlepszego formatu internetowego (WebP) – Źródło: Imagify
Jeśli chcesz dowiedzieć się więcej, mamy dwa wnikliwe przewodniki poświęcone najlepszemu rozmiarowi obrazu w Internecie, a także najlepszym formatom obrazu.

2. Kompresuj swoje największe obrazy

Kompresja dużych obrazów jest niezbędna do utrzymania dobrej wydajności i szybkiego ładowania strony. Jednak nie chcesz też rezygnować z jakości. Tutaj przydaje się kompresja (za pomocą odpowiedniego narzędzia)!

Najlepiej, jeśli chcesz utrzymać wagę strony poniżej 1 – 1,5 MB. Możesz przeprowadzić audyt swojej witryny i sprawdzić te dane w GTMetrix > Szczegóły strony > Całkowity rozmiar strony.

Sprawdzanie rozmiaru mojej strony i wagi zajmowanej przez obrazy - Źródło: GTMetrix
Sprawdzanie rozmiaru mojej strony i wagi zajmowanej przez obrazy – źródło: GTMetrix

Rozwiązania do kompresji dużych obrazów:

  • Photoshop i Lightroom, ale możesz obniżyć jakość podczas eksportowania ostatecznych obrazów.
  • Wtyczka Imagify – umożliwia masową optymalizację i kompresję obrazów bezpośrednio z WordPress. Możesz zaoszczędzić do 90% na rozmiarze pliku przy zachowaniu wysokiej jakości.

W naszym przykładzie poniżej Imagify skompresował obraz o prawie 50%, dzięki czemu strona była znacznie jaśniejsza.

Ogólne oszczędności dzięki kompresji Imagify — źródło: Imagify
Ogólne oszczędności dzięki kompresji Imagify – Źródło: Imagify

Imagify zachowuje również jakość. Nie możemy stwierdzić, który obraz jest skompresowany:

Imagify zachowując jakość podczas kompresji obrazów – Źródło: Imagify
Warto wiedzieć: Imagify pomaga zoptymalizować obrazy do niektórych audytów PageSpeed ​​Insights.

3. Używaj responsywnych obrazów

Kolejną radą przed opublikowaniem posta na blogu jest sprawienie, by obraz był responsywny. Na szczęście wiele kreatorów stron oferuje opcję wyświetlania obrazów zgodnie z wybranym urządzeniem.

Rozwiązania do wykorzystania responsywnych obrazów:

  • Ręcznie, za pomocą kodu – używając atrybutów „srcset” i „sizes”, aby obrazki były responsywne.
  • Korzystanie z edytora bloków lub dowolnego narzędzia do tworzenia stron, które umożliwia wyświetlanie różnych rozmiarów obrazów w zależności od urządzenia:
Elementor i funkcja responsywnego obrazu - Źródło: Elementor
Elementor i funkcja responsywnego obrazu – Źródło: Elementor
Sprawdź nasz przewodnik, aby dowiedzieć się więcej o tym, jak tworzyć obrazy z responsywnym projektem.

4. Poprawnie zmień nazwę pliku obrazu i użyj znacznika Alt

Obrazy z opisowymi nazwami i znacznikami alt będą częściej wyszukiwane przez wyszukiwarki – zwiększając szansę na pojawienie się w wynikach wyszukiwania. Tagi Alt są przydatne w SEO, ponieważ Google nie może (jeszcze) interpretować obrazów. Dlatego tagi alt rozwiązują ten problem, wskazując, o czym jest obraz.

Wskazówki dotyczące używania właściwej nazwy pliku i znacznika alt:

Jeśli chodzi o nazwę pliku, oto kilka wskazówek:

  • Opisz zwięźle, czego dotyczy obraz, aby pomóc użytkownikom go znaleźć
  • Użyj maksymalnie 4-5 słów
  • Wielkie litery nie są potrzebne
  • Użyj łącznika (-), a nie podkreślenia, aby oddzielić każde słowo od siebie.

W przypadku znacznika alt tekst powinien być krótki, aby zmaksymalizować jego wpływ, i nie zapomnij wspomnieć o temacie w tekście alternatywnym.

W poniższym przykładzie możesz łatwo zobaczyć różnice:

Nazwy plików i znaczniki alt — Źródło: Imagify
Nazwy plików i znaczniki alt – Źródło: Imagify

5. Zwróć uwagę na kwestie związane z prawami autorskimi

Teraz, gdy znalazłeś idealnie pasujący obraz do swojego posta na blogu. Pora też sprawdzić prawa autorskie do niego. Zwykle obok obrazu znajduje się notatka z „” i możesz nie być w stanie użyć go na swoim blogu. W razie wątpliwości zawsze skonsultuj się z fotografem lub projektantem, czy możesz ponownie wykorzystać pracę i ostatecznie opisz ich.

Na przykład, jeśli Twój obraz pochodzi z Pixabay, poniżej znajdziesz zalecenia dotyczące treści wolnych od praw autorskich:

Co robić, a czego nie z treściami wolnymi od praw autorskich: - Źródło: Pixabay
Co robić, a czego nie z treściami wolnymi od praw autorskich: – Źródło: Pixabay

6. Utwórz mapę witryny z obrazami

Mapa witryny z obrazami to najlepszy sposób poinformowania Google o wszystkich obrazach w Twojej witrynie. Jest nieoceniony przy indeksowaniu obrazów i zapewnianiu ich uwzględnienia w wynikach wyszukiwania.

Przykład mapy witryny — Źródło: Imagify
Przykład mapy witryny – Źródło: Imagify

Rozwiązania do tworzenia graficznej mapy witryny:

  • Użyj wtyczki WordPress, takiej jak XML Sitemap. Przejdź do UstawieniaMapa witryny XML . Wtyczka mapy witryny XML automatycznie tworzy mapę witryny w WordPress, a adres URL zostanie wyświetlony u góry strony ustawień.

Podsumowanie

Nasza lista kontrolna powinna pomóc Ci wybrać najlepiej pasujące obrazy do Twojego bloga. Chodzi o spójność, jakość, rozmiar, prawa autorskie i wydajność!

Dobrą wiadomością jest to, że części kompresji i optymalizacji można łatwo zaimplementować za pomocą Imagify. Wtyczka pozwala również przejść kilka audytów obrazu w PageSpeed ​​Insights! Dostępna jest bezpłatna wersja próbna Imagify, dzięki której możesz zoptymalizować obrazy do następnego artykułu i zobaczyć, jak poprawia się wydajność strony przy zachowaniu wysokiej jakości efektów wizualnych.