Jak dodawać zdjęcia na stronę internetową i przygotować je do publikacji

Przed przesłaniem dopasuj proporcje zdjęcia do miejsca publikacji, zmniejsz plik do wymiarów potrzebnych w tym miejscu i sprawdź prawa do jego wykorzystania. Wymiary w pikselach określają szerokość i wysokość obrazu, a rozmiar pliku w KB lub MB wpływa na ilość danych pobieranych przez przeglądarkę.

Zacznij od ustalenia, jak obraz będzie użyty. Zdjęcie produktu powinno pokazywać produkt w spójnym kadrze, a baner może potrzebować szerszego ujęcia i wolnej przestrzeni na tekst. Nie przycinaj pliku do jednego uniwersalnego rozmiaru, jeśli motyw lub moduł strony wyświetla obrazy w innych proporcjach.

Przed publikacją sprawdź:
- Kadr: upewnij się, że ważny element nie wypadnie poza obszar przycinania motywu.
- Wymiary: dobierz rozdzielczość do szerokości wyświetlania; nadmiar pikseli nie poprawi widoku, jeśli strona pokazuje obraz w małym rozmiarze.
- Wagę pliku: skompresuj zdjęcie i obejrzyj drobne detale po kompresji.
- Nazwę: użyj krótkiej nazwy opisującej zawartość, na przykład `czarna-lampa-stolowa.webp`, zamiast `IMG_4821.jpg`.
- Prawa: potwierdź zgodę na publikację i zapisz warunki licencji, jeśli dotyczą materiału.

Nazwa pliku pomaga znaleźć zdjęcie w bibliotece, a Google traktuje ją jako sygnał opisujący temat obrazu. Google zaleca też umieszczanie obrazu blisko tekstu, który wyjaśnia jego kontekst, i odradza upychanie słów kluczowych w nazwie oraz tekście alternatywnym. Pozycjonowanie obrazów w Google Images opisuje dodatkowe elementy widoczności grafik.

Jeśli zdjęcie zawiera wizerunek osoby, produkt klienta albo utwór objęty prawami autorskimi, samo otrzymanie pliku nie musi oznaczać zgody na publikację. Zachowaj informację o licencji lub zgodzie razem z materiałami projektu. Z naszych wdrożeń wynika, że ustalenie praw i docelowego kadru przed przesłaniem ogranicza późniejsze podmiany obrazów na wielu podstronach.

JPG sprawdza się przy fotografiach, PNG przy grafice wymagającej przezroczystości, a WebP przy zdjęciach i grafikach, gdy witryna poprawnie obsługuje ten format. SVG jest formatem wektorowym dla ikon i prostych ilustracji, ale przesyłanie SVG do WordPressa może być zablokowane albo wymagać dodatkowej konfiguracji ze względów bezpieczeństwa.

Rozmiar dobieraj do miejsca publikacji, nie do jednego uniwersalnego limitu. WordPress tworzy warianty obrazu, a motyw, blok lub wtyczka może wybrać wersję do konkretnego widoku. Dostępne warianty zależą między innymi od oryginalnego pliku i ustawień witryny.

Tabela pomaga dobrać format do rodzaju materiału. Przed publikacją przetestuj format w swojej witrynie, zwłaszcza przy SVG i WebP.

Do fotografii produktowej zacznij od JPG lub WebP, a do logo z przezroczystym tłem wybierz PNG albo zatwierdzony SVG. Po konwersji porównaj ostrość obrazu z oryginałem.

Przy sklepie internetowym masa zdjęć produktowych może wpływać na szybkość całej karty produktu. Optymalizacja szybkości WooCommerce obejmuje pracę nad wydajnością sklepu, gdy problem dotyczy wielu obrazów i sposobu ich wyświetlania.

W WordPressie prześlesz zdjęcie przez Media > Dodaj nowe albo przez przycisk przesyłania w bibliotece mediów. Biblioteka przechowuje pliki dostępne do ponownego użycia, ale samo przesłanie nie umieszcza zdjęcia automatycznie w treści strony.

Aby dodać plik przez panel:
1. Zaloguj się do WordPressa i wybierz Media > Dodaj nowe.
2. Przeciągnij plik do obszaru przesyłania albo kliknij wybór pliku.
3. Poczekaj na zakończenie przesyłania.
4. Otwórz zdjęcie w bibliotece i sprawdź nazwę, wymiary oraz tekst alternatywny.

Możesz też otworzyć stronę lub wpis, dodać blok Obraz i wybrać Prześlij. WordPress zapisze nowy plik w bibliotece i wstawi go w edytowaną treść. Ekran dodawania mediów pokazuje maksymalny rozmiar przesyłanego pliku ustawiony przez dostawcę hostingu.

Jeśli plik przekracza wyświetlony limit, zmniejsz jego wymiary albo skompresuj kopię przed przesłaniem. Nie zmieniaj limitu hostingu bez sprawdzenia, czy problem dotyczy jednego pliku, czy całego procesu. Użytkownik zarządza mediami przez panel; ręczna edycja katalogów serwera nie jest potrzebna przy zwykłym dodawaniu zdjęcia.

Blok Obraz dodasz w edytorze WordPressa przez przycisk plusa albo wpisując `/image` w nowym bloku. Następnie prześlij nowy plik, wybierz obraz z biblioteki mediów albo wstaw adres zewnętrzny, jeśli masz prawo korzystać z tego pliku.

Wykonaj kolejne kroki:
1. Otwórz stronę lub wpis i ustaw kursor w miejscu obrazu.
2. Kliknij +, wyszukaj blok Obraz i dodaj go.
3. Kliknij Prześlij lub Biblioteka mediów, a następnie wskaż zdjęcie.
4. Ustaw wyrównanie i rozmiar dostępny w ustawieniach bloku.
5. Zapisz zmiany i sprawdź publiczny widok strony.

W ustawieniach bloku można zmienić wyrównanie, rozmiar i podpis, a dostępne opcje zależą od motywu i wtyczek. Obraz wstawiony z zewnętrznego adresu zależy od dostępności pliku na obcej witrynie. Gdy właściciel przeniesie albo usunie plik, zdjęcie może przestać się wyświetlać; przy materiale, do którego masz prawa, zapisz kopię w bibliotece WordPressa.

Jeśli strona zawiera wiele ciężkich zdjęć, poprawne wstawienie pliku może nie wystarczyć do utrzymania szybkiego ładowania. Poradnik o przyspieszaniu WordPressa opisuje kolejność sprawdzania wydajności witryny.

Tekst alternatywny opisuje informację lub funkcję obrazu osobom, które go nie widzą; obraz wyłącznie dekoracyjny może mieć pusty tekst alternatywny. Opis powinien mówić, co konkretne zdjęcie wnosi na danej stronie, zamiast automatycznie powtarzać frazę SEO.

W bibliotece mediów otwórz szczegóły zdjęcia i uzupełnij pole Tekst alternatywny. W edytorze blokowym zaznacz obraz, otwórz ustawienia bloku i wpisz opis. Wartość ustawiona dla konkretnego bloku może dotyczyć tylko tego użycia zdjęcia, a dane w bibliotece mogą działać jako wartość domyślna przy kolejnych wstawieniach.

Przykładowy tekst alternatywny dla zdjęcia produktu: `Czarna lampa stołowa z metalowym kloszem na jasnym biurku`. Opis wskazuje produkt i widoczny szczegół, zamiast powtarzać frazę `lampa sklep internetowy tanio`. Jeśli obraz jest linkiem, tekst alternatywny powinien wyjaśniać cel linku.

Podpis pojawia się pod zdjęciem i jest widoczny dla wszystkich użytkowników. Użyj go, gdy trzeba wskazać autora, źródło lub wariant produktu albo wyjaśnić szczegół, którego nie da się krótko przekazać w tekście alternatywnym. Nie kopiuj automatycznie tego samego zdania do tekstu alternatywnego, podpisu i sąsiedniego akapitu.

Google wykorzystuje tekst alternatywny w rozumieniu obrazu, a pole służy również dostępności. Google odradza nasycanie altu słowami kluczowymi. Jeśli obraz jest ozdobnikiem bez informacji lub funkcji, oznacz go jako dekoracyjny albo pozostaw alt pusty zgodnie z możliwościami edytora.

Obraz wyróżniający ustawisz w panelu ustawień strony lub wpisu, a zdjęcie tła dodasz w bloku albo sekcji motywu obsługującej tło. Obraz wyróżniający może pojawić się w listach wpisów i podglądach, natomiast tło należy do konkretnej sekcji i może inaczej kadrować się na telefonie.

W edytorze blokowym otwórz ustawienia strony lub wpisu ikoną koła zębatego, znajdź pole Obrazek wyróżniający i wybierz plik z biblioteki albo prześlij nowy. Dostępność pola oraz sposób wyświetlania obrazu zależą od motywu. Po zmianie sprawdź też podgląd listy wpisów, jeśli motyw wykorzystuje miniatury na stronie archiwum.

Dla tła zaznacz blok obsługujący obraz tła, na przykład Okładkę, i wybierz zdjęcie w ustawieniach. Ustaw pozycję kadru oraz nakładkę, jeśli tekst znajduje się na obrazie. Przed publikacją sprawdź kontrast tekstu po zwężeniu ekranu i przy innym przycięciu kadru.

Sprawdź opublikowaną stronę na szerokim i wąskim ekranie, bo motyw może zmieniać szerokość, proporcje i kadr obrazu. Podgląd edytora pomaga ocenić układ, ale nie zawsze pokazuje dokładnie wynik na urządzeniu użytkownika.

Po zapisaniu zmian sprawdź:
- Czy zdjęcie jest ostre i ma właściwe proporcje.
- Czy ważny element pozostaje w kadrze po zmniejszeniu szerokości okna.
- Czy po odświeżeniu strony widać aktualny plik, a nie wersję z cache.
- Czy obraz pojawia się bez opóźnienia zauważalnego podczas przewijania.

Wymiary obrazu i rozmiar pliku odpowiadają na różne pytania: piksele określają szczegółowość obrazu, a KB lub MB określają ilość danych do przesłania. Zdjęcie o małej wadze może być rozmyte, jeśli ma za mało pikseli dla miejsca wyświetlania. Duży plik może z kolei wydłużyć ładowanie strony.

Jeśli motyw ucina produkt, użyj zdjęcia z szerszym kadrem albo zmień położenie obrazu w bloku. Jeśli obraz jest rozmyty na telefonie, sprawdź rozdzielczość pliku źródłowego. Przy dalszych pracach nad wydajnością przydatny będzie przewodnik po przyspieszaniu strony internetowej.

Jeśli zdjęcia produktów w sklepie są ciężkie lub źle kadrują się na urządzeniach mobilnych, analiza wydajności sklepu WooCommerce może objąć kontrolę sposobu ładowania obrazów i ustawień witryny.

Gdy zdjęcie nie wyświetla się po publikacji, sprawdź kolejno adres pliku, jego dostępność w bibliotece, cache i sposób wyświetlania w motywie. Objaw pomaga zawęzić przyczynę, dlatego zacznij od sprawdzenia strony w przeglądarce i zdjęcia w panelu WordPressa.

Tabela pokazuje typowe objawy oraz pierwsze działania diagnostyczne. Wykonuj je po kolei, aby nie zmieniać kilku ustawień jednocześnie.

Jeśli plik jest widoczny w bibliotece, ale strona nadal pokazuje błąd, porównaj adres obrazu w przeglądarce z adresem w szczegółach pliku. Nie wyłączaj wielu wtyczek na działającej stronie, bo mogą odpowiadać za inne funkcje. Test konfliktu wykonaj na kopii testowej lub z pomocą administratora witryny.

Perspektywa KC Mobile. Przy diagnozie zaczynamy od testów, które nie zmieniają działania strony: otwieramy plik, sprawdzamy adres i odświeżamy cache. Jeśli błąd dotyczy wielu zdjęć naraz, sprawdzamy konfigurację hostingu i motywu, zamiast poprawiać pojedyncze pliki.

• Darmowe zdjęcia do pobrania na stronę WWW: skąd brać i jak używać
• EWWW Image Optimizer w WordPressie: jak skonfigurować i sprawdzić optymalizację obrazów
• Lazy load images w PrestaShop: kiedy użyć modułu i jak go sprawdzić
• Jak CDN może poprawić wydajność Twojego sklepu internetowego