Jak prawidłowo dodać obrazek w WordPress
, ,

Jak prawidłowo dodawać obrazy na WordPress: poradnik krok po kroku.

Jak prawidłowo dodawać obrazy na WordPress: poradnik krok po kroku.

Tworzenie atrakcyjnej strony internetowej na platformie WordPress to tylko początek. Dodawanie odpowiednio zoptymalizowanych obrazów może znacząco poprawić wrażenia użytkownika i wydajność strony. W tym artykule pokażę Ci, jak zoptymalizować obrazy tak, by nadmiernie nie obciążały strony, jak dodać zoptymalizowane obrazy do WordPress oraz jak umieścić je w treści strony.

Krok 1: optymalizacja obrazów

Dlaczego optymalizacja obrazów jest tak ważna?

Optymalizacja obrazów dla strony opartej na WordPress to kluczowy krok w tworzeniu atrakcyjnej i wydajnej witryny internetowej. Dla laika może brzmieć to skomplikowanie, ale tak naprawdę to proces, który ma ogromny wpływ na szybkość ładowania strony, doświadczenie użytkownika oraz pozycjonowanie w wyszukiwarkach.

Dopasowanie wielkości obrazu.

Wielkość obrazu to pierwsza rzecz, na którą warto zwrócić uwagę. Duże obrazy mogą spowolnić czas ładowania strony, co może zniechęcić odwiedzających. Dlatego ważne jest dopasowanie wielkości obrazu do miejsca, w którym będzie wyświetlany. Jeśli np. obraz ma być wyświetlany w rozmiarze 500 pikseli szerokości, nie ma potrzeby dodawania obrazu o rozmiarze 2000 pikseli i odwrotnie, powinniśmy pilnować by nie wstawiać na stronę obrazów o rozmiarach większych niż mamy w bibliotece mediów. Ja na co dzień zmieniam rozmiar za pomocą GIMPA, jednak tutaj chcę Ci pokazać jak wszystko możesz zrobić online, bez instalowania dodatkowych programów. Co więcej – możesz zrobić to całkowicie za darmo.

Jak zmienić wielkość obrazu?

Do dzieła. Wejdź na stronę: resizepixel.com, przeciągnij tam obraz, który chcesz modyfikować i teraz po lewej stronie masz możliwość zmiany jego rozmiarów. Zostaw zaznaczoną opcję „Ustalone proporcje zdjęcia” no chyba, że chcesz te proporcje zmienić, ale raczej rzadko będziesz tego chciał. Wpisujesz tylko jedną z wartości, druga zmieni się automatycznie. Klikasz „Zmień rozmiar”, następnie „Przejdź do pobierania” i „Pobierz zdjęcie”. No i gotowe.

Kompresja obrazu.

Kompresja to kolejny kluczowy element optymalizacji obrazów. Polega ona na zmniejszeniu rozmiaru pliku obrazu, zachowując przy tym jak najwyższą jakość.

Jak online skompresować obraz?

Wchodzisz na stronę shortpixel.com, tutaj możesz kompresować pliki JPG, GIF i PNG. Pliki w sumie mogą mieć max. 10Mb, jednak jeżeli tego potrzebujesz, można znieść to ograniczenie, rejestrując się na tej stronie. Rejestracja jest darmowa. No i teraz tak: szukasz plik, który chcesz skompresować, przeciągasz go w pole dodawania plików i czekasz aż proces się zakończy. Możesz przeciągnąć ile chcesz plików za jednym razem, natomiast jeżeli się nie zarejestrujesz, no to masz to ograniczenie do 10Mb. Jeszcze może nadmienię, że to ograniczenie dotyczy jednego wejścia na stronę. Jeżeli wyczyścisz ciasteczka i wejdziesz ponownie, to znowu masz 10Mb, no i to ograniczenie dotyczy chyba jednego dnia. Jeżeli wejdziesz następnego dnia, to znowu masz 10Mb. Dobrze, no i teraz jak już proces kompresji się zakończył, to klikasz w tą strzałeczkę, która znajduje się na ikonce pliku i ściągasz plik na komputer. I to tyle. Masz plik skompresowany. Zobacz jaka jest różnica.

Konwersja obrazu do formatu WebP.

Format WebP to nowoczesny format obrazów, który oferuje wysoką jakość przy mniejszym rozmiarze pliku w porównaniu do tradycyjnych formatów jak JPEG czy PNG. Wprowadzenie obrazów w formacie WebP na stronę WordPress może znacznie przyspieszyć ładowanie strony.

Jak skonwertować plik do formatu WebP?

Możesz przekonwertować obrazki na convertio.co. Tutaj sprawa wygląda bardzo podobnie, tyle że bez rejestracji możesz przekonwertować max 100Mb. No i postępujesz tak jak poprzednio, czyli chwytasz plik, przeciągasz, klikasz konwertuj. Ta konwersja chwilkę potrwa, kiedy się zakończy klikasz pobieranie i masz pobrany plik w formacie WebP. Jest to o tyle ważne, że Google patrzy przychylnie na tego typu pliki i dzięki temu będziesz miał kilka dodatkowych punkcików jeżeli chodzi o wypozycjonowanie strony. Do tego w tym przypadku znowu ubyło kilka kb, ale nawet jeżeli było by odrobinę więcej niż przed konwersją, a to czasami się zdarza, to i tak warto umieścić na stronie WebP. Oczywiście tutaj trzeba zadecydować. No bo jeżeli ta różnica będzie na prawdę duża no to jednak może się okazać, że lepiej umieścić na stronie plik JPG lub PNG.

Co zyskujesz wykonując powyższy krok?

Optymalizacja obrazów ma ogromne znaczenie dla strony internetowej z kilku powodów:

  • Szybsze ładowanie strony: Obniża czas ładowania, co jest kluczowe dla doświadczenia użytkownika. Szybsza strona zachęca do dłuższego pozostania na stronie.
  • Oszczędność miejsca na serwerze: Mniejsze rozmiary plików obrazów oznaczają mniejsze zużycie przepustowości serwera.

Podsumowanie

Optymalizacja obrazów dla strony WordPress to nie tylko kwestia estetyki, ale też istotny czynnik wpływający na działanie strony. Dopasowanie wielkości, kompresja i wykorzystanie nowoczesnych formatów, takich jak WebP, są kluczowe dla szybkości ładowania strony i poprawy jej widoczności w sieci. Dzięki prostym krokom optymalizacji, każdy może uczynić swoją stronę internetową bardziej efektywną i atrakcyjną dla użytkowników.

Krok 2: Przygotowanie Do Dodania Obrazu.

Zaloguj się do panelu WordPress i przejdź do edytora strony lub postu, do którego chcesz dodać obraz. Kliknij opcję „Dodaj nowy wpis” lub „Edytuj” istniejący, aby rozpocząć. Teraz wybierz blok do którego chcesz dodać obrazek.

Krok 3: Dodawanie obrazu do biblioteki mediów w WordPress.

Teraz czas na dodanie obrazka. Możesz przeciągnąć plik bezpośrednio do edytora, lub skorzystać z opcji „Dodaj obraz” i wybrać go z biblioteki. Ja klikam dodaj obraz i przechodzę do biblioteki. Tutaj klikam „Prześlij pliki”. No i mam obraz dodany.

Ustawienia obrazu w bibliotece mediów w WordPress.

Tutaj musisz ustawić kilka istotnych opcji. Pierwszą z nich jest tekst alternatywny. Jest to bardzo ważne pole. Standardowo to pole służy do opisania celu obrazka. Jest to przydatne dla osób słabo lub w ogóle nie widzących, po prostu czytnik ekranowy odczyta treść tego pola. Ten opis pojawi się również na miejscu obrazka, gdyby ten z jakiegoś powodu nie został załadowany. Jednakże możemy to pole wykorzystać również do lepszego wypozycjonowania naszej strony. W opisie, który będzie przydatny dla osób niewidzących możemy umieścić słowa kluczowe. Dzięki temu może ktoś trafi na naszą stronę poprzez obrazek. Drugie ważne dla pozycjonowania pole, to tytuł. I tutaj najlepiej jest ustawić ten tytuł taki by zawierał jedno słowo kluczowe i zrobić to przed dodaniem obrazka do WordPressa. Jak to robić no to już nie pokazuję, bo zmienić nazwę pliku raczej każdy już w dzisiejszych czasach umie, a jak nie to znajdzie sobie bez problemu w Google. Tutaj w to pole automatycznie jest wstawiana nazwa pliku.

Krok 4: Dodanie obrazu do strony lub wpisu na blogu w WordPress

Jak już to wszystko poustawiasz, klikasz dodaj i to tyle. Obraz jest dodany a ustawienia poszczególnych bloków, wykorzystujących obrazy, to już temat na inny artykuł.

Zobacz film instruktarzowy na YouTube

Przeczytaj inne ciekawe wpisy