Jak najlepiej prezentować swoje obrazy online?

Niezależnie od tego, jaką masz witrynę, treść prawdopodobnie jest mieszanką tekstu i obrazów. Dla fotografów, artystów i innych twórców obrazy w Twojej witrynie prawdopodobnie stanowią najważniejszą część treści, dlatego ważne jest, aby wiedzieć, jak je odpowiednio zaprezentować.

Jasne, możesz śmiało przesyłać zdjęcia i grafikę za pośrednictwem pulpitu WordPress bez zastanowienia, ale jeśli chcesz mieć pewność, że Twoja witryna ładuje się szybko, jest łatwa do odczytania i zoptymalizowana pod kątem wyszukiwarek, dobrze byłoby to przeczytać krótki przewodnik po najlepszych praktykach, jeśli chodzi o używanie obrazów w witrynie.

Zapisywanie i przesyłanie obrazów

Chociaż WordPress umożliwił przesyłanie dużych obrazów bezpośrednio z komputera i automatyczne wyświetlanie ich w celu dopasowania do szerokości bloga, nie zalecamy przesyłania nieprzetworzonych obrazów.

Każda przeglądarka internetowa może wyświetlać obrazy w mniejszym rozmiarze niż są w rzeczywistości, jeśli tak nakazano w kodzie, ale nie prowadzi to do zmniejszenia rzeczywistego rozmiaru pliku. Obraz o wielkości 500 kb wyświetlany w 50% pełnej szerokości i wysokości nadal będzie miał 500 kb. Blogerzy, którzy nie są zaznajomieni z HTML i WordPress, mogą zakładać, że ponieważ ich obrazy nie są duże na ekranie, oznacza to, że będą szybko pobierane, ale nie zawsze tak jest.

Aby sprawdzić rozmiar obrazu, kliknij prawym przyciskiem myszy lub kliknij z wciśniętym klawiszem Control na obrazie w swoim blogu i wybierz z menu opcję wyświetl/otwórz obraz (słownictwo będzie się nieznacznie różnić w zależności od używanej przeglądarki). Jeśli obraz, który się otwiera, jest znacznie większy niż ten, który widzisz na swoim blogu, oznacza to, że Twoje obrazy nie mają odpowiedniego rozmiaru.

Jeśli masz bloga z dużą ilością obrazów i nie zmieniasz rozmiaru obrazów przed ich przesłaniem, łączny rozmiar Twojej strony internetowej może być niepotrzebnie duży.

Warto poświęcić kilka dodatkowych minut na zmianę rozmiaru i kompresję obrazów przed ich przesłaniem. Można to łatwo zrobić w Photoshopie lub dowolnym innym oprogramowaniu do edycji obrazów, którego używasz. Możesz także skorzystać z bezpłatnych narzędzi online, takich jak PicMonkey i Dynamic Drive's Image Optimizer.

Ręczna zmiana rozmiaru obrazów zapewnia pełną kontrolę nad kompresją i znacznie skróci czas przesyłania, ale jeśli chcesz, możesz również użyć obrazów o zmienionym rozmiarze, które WordPress automatycznie generuje przy każdym przesłaniu. Gdy wstawiasz zdjęcie do posta, masz możliwość wstawienia pełnowymiarowych, dużych, średnich lub miniaturowych obrazów. Możesz edytować te rozmiary, aby dopasować je do projektu swojego bloga, wybierając Ustawienia > Media . Pamiętaj, że jeśli wybierzesz tę metodę, Twoje oryginalne obrazy w pełnym rozmiarze będą dostępne dla każdego do bezpłatnego pobrania z Twojej witryny — nie jest to najlepsza opcja dla fotografów i ilustratorów!

Optymalizacja obrazu i użyteczność

Oprócz upewnienia się, że obrazy mają odpowiedni rozmiar i są zoptymalizowane pod kątem czasu ładowania strony, należy również upewnić się, że są one odpowiednio oznaczone pod kątem SEO (optymalizacji wyszukiwarek). SEO ułatwia wyszukiwarkom znalezienie i zindeksowanie Twojej witryny, a witryna wykorzystująca dobre techniki SEO prawdopodobnie pojawi się wyżej na stronach wyników wyszukiwania w porównaniu z witryną niezoptymalizowaną.

Pełne omówienie SEO wykracza poza zakres tego artykułu (wiele motywów WordPress jest i tak przyjaznych dla SEO od razu po wyjęciu z pudełka), ale optymalizacja metainformacji o obrazie jest łatwym sposobem na zwiększenie SEO na stronie i może pomóc użytkownikom znaleźć Twoją witrynę za pomocą wyszukiwarki grafiki Google i innych wyszukiwarek graficznych.

Właściwe oznaczanie obrazów jest również ważne dla użyteczności, zwłaszcza jeśli obrazy ilustrują ważne informacje. W przypadku, gdy obraz nie ładuje się lub nie można go zobaczyć (z powodu wolnego połączenia internetowego, ponieważ obrazy są wyłączone, lub dla osób niedowidzących), konieczne jest podanie alternatywnego opisu tekstowego.

1. Nazwa pliku

Po pierwsze, gdy zapisujesz obrazy, upewnij się, że mają opisową nazwę pliku. Pozostawienie zdjęć pod nazwą IMG_013445.jpg lub jakąkolwiek inną po zdjęciu ich z aparatu nie da wyszukiwarkom żadnych wskazówek co do tego, co przedstawiają. Użyj odpowiednich opisowych słów kluczowych oddzielonych myślnikami, np. dzieci-bawiące się-ocean.jpg

2. Tekst alternatywny

Gdy przesyłasz obraz za pomocą programu do przesyłania multimediów, WordPress oferuje kilka pól na opisy plików. Chociaż można je pozostawić puste (a wielu blogerów robi to, aby zaoszczędzić czas), im więcej pól wypełnisz, tym lepsze dla SEO i użyteczności. najważniejszym z nich jest tekst alternatywny, skrót od „tekst alternatywny”.

Jest to tekst, który jest wyświetlany, gdy obrazy są wyłączone lub nie mogą być pokazane z jakiegoś innego powodu, więc powinien działać jako opis tego, czym jest obraz. Wyszukiwarki również czytają ten tekst i używają go do decydowania, o czym jest strona i gdzie umieścić swoją witrynę w wykazach. Jeśli na przykład jesteś fotografem ślubnym z siedzibą w Teksasie, upewnij się, że tekst alternatywny wszystkich obrazów na blogu zawiera dużo tekstu opisowego, w tym słowa kluczowe, takie jak „fotograf ślubny” i „fotografia ślubna Teksas”. Ostrzegam jednak, że podobnie jak w przypadku tekstu na blogu, ważne jest, aby nie przesadzać ze słowami kluczowymi w opisach obrazów.

Kopiowanie i wklejanie tego samego tekstu alternatywnego do wszystkich obrazów może być kuszące, aby zaoszczędzić czas, ale najlepiej, aby każdy z obrazów miał unikalny tekst alternatywny, który prawidłowo go opisuje.

3. Tytuł obrazu

Tytuł obrazu jest podobny do tekstu alternatywnego, ale ma nieco inny cel. Zamiast podawać informacje alternatywne do obrazu, tytuł powinien zawierać dodatkowe informacje. Tytuł obrazu to tekst „podpowiedzi”, który pojawia się w wyskakującym okienku po najechaniu na obraz. Ten tekst jest ważny zarówno ze względu na użyteczność, jak i SEO i powinien dostarczać szybkich, istotnych informacji o obrazie lub miejscu, do którego prowadzi.

Tytuł obrazu powinien nieznacznie różnić się od tekstu alternatywnego i ponownie powinien być unikalny dla każdego obrazu.

4. Podpis obrazu

Podpis to tekst, który jest zwykle wyświetlany pod obrazem i zawiera dodatkowy opis lub tekst pomocniczy. Korzystanie z podpisów jest opcjonalne, ale mogą być przydatne do podania dodatkowych informacji o obrazie lub cytowania źródła, jeśli używasz obrazów z innej witryny. Pomyśl o podpisie jako o etykiecie informacyjnej na wystawie w galerii sztuki.

Łączenie obrazu

Domyślnie, gdy wstawiasz obraz do strony lub posta, WordPress połączy go z nową stroną z samym obrazem. Nie ma ku temu prawdziwego powodu, a może to nawet zaszkodzić Twojej witrynie pod względem SEO.

Może to być również duży problem z użytecznością — jeśli użytkownik najedzie kursorem na Twój obraz i zobaczy, że jest to link, może założyć, że prowadzi on do strony z przydatnymi informacjami. Klikanie na te strony zawierające wyłącznie obrazy jest stratą czasu dla odwiedzających, a nawet może spowodować utratę odwiedzających.

Aby rozwiązać ten problem, po prostu wybierz „Brak” jako pole „Link URL” podczas przesyłania obrazu do WordPress, chyba że faktycznie chcesz połączyć je z określoną stroną. Jeśli to zrobisz, upewnij się, że używasz tytułu lub podpisu obrazu, aby wskazać, do którego linku obraz jest.

Umieszczenie obrazu

Oprócz upewnienia się, że Twoje obrazy są zoptymalizowane pod kątem SEO i przyjazne dla użytkownika, ważne jest również, aby zastanowić się, jak pasują do tekstu ze względów estetycznych i czytelności.

Możesz chcieć używać obrazów wbudowanych (mniejszych niż główne kolumny, aby tekst otaczał je), obrazów o pełnej szerokości lub kombinacji obu. Należy unikać używania samodzielnych obrazów, które nie mają pełnej szerokości, lub serii obrazów o różnej szerokości, ponieważ wygląda to nieprofesjonalnie i nieatrakcyjnie.

Aby to osiągnąć, należy upewnić się, że obrazy portretowe mają tę samą szerokość, co obrazy poziome. Miej oko na wysokość swoich obrazów — jeśli są zbyt wysokie, mogą się przepełniać na ekranach o mniejszej rozdzielczości. Spowoduje to, że użytkownicy będą musieli przewijać, aby zobaczyć pełny obraz, czego należy unikać. Jeśli Twoje obrazy są zbyt duże, aby można je było wyświetlić w pełnej szerokości w formacie pionowym, możesz utworzyć kolaż dwóch lub więcej obrazów portretowych umieszczonych obok siebie.

Obrazy w tekście mogą urozmaicić treść i pomóc w rozbiciu dużych ścian tekstu. Są również dobrym rozwiązaniem w przypadku mniejszych lub wąskich obrazów, które nie nadają się do wyświetlania na pełnej szerokości.

Kiedy używasz obrazów w wierszu, najlepiej jest zdecydować się na ustaloną szerokość, aby uzyskać spójność wizualną. Powinno to być nie więcej niż połowa szerokości kolumny tekstu, ponieważ obrazy szersze od tej wartości zbytnio skompresują tekst i utrudnią jego czytanie.

Obrazy w tekście powinny być zawsze wyrównywane do prawej, a nie do lewej strony tekstu, aby nie rozbijać lewego marginesu i nie zmniejszać czytelności.

Upiększ swój blog obrazami

Korzystanie z obrazów jest ważne przy tworzeniu ciekawego i atrakcyjnego wizualnie bloga, a są one jeszcze ważniejsze, jeśli chodzi o marketing Twojej kreatywnej firmy.

Postępuj zgodnie ze wskazówkami, które omówiliśmy w tym artykule, aby uzyskać dobrze zoptymalizowane, dobrze prezentujące się obrazy, a Twoja witryna będzie nie tylko pięknie wyglądać, ale również szybko się wczytuje, będzie przyjemniejsza w czytaniu i atrakcyjniejsza dla wyszukiwarek. Miłego publikowania!