Dlaczego obraz nie wyświetla się na mojej stronie?

Ikona uszkodzonego obrazu, puste miejsce i zastępcza grafika, która nigdy nie znika, to różne wskazówki. Pliku może brakować, przeglądarka może nie umieć go wyświetlić albo strona może ukrywać obraz, który został prawidłowo wczytany.

Zacznij od jednego obrazu, którego dotyczy problem. Pierwsze kontrole wykonasz w edytorze witryny i przeglądarce. Opcjonalna sekcja dla administratorów opisuje żądania, HTML, CSS i komunikaty bezpieczeństwa przeglądarki.

Jeśli obraz widać na stronie, ale nie ma go w wynikach wyszukiwania, skorzystaj z poradnika o Grafice Google. Jeśli ostatecznie się pojawia, lecz trwa to zbyt długo, sprawdź przyczyny wolnego ładowania obrazów.

1. Zacznij od opublikowanej strony

Otwórz publiczną stronę zamiast podglądu w edytorze. W edytorze upewnij się, że obraz jest wybrany, zmiana zapisana, a strona opublikowana. Zanotuj, których obrazów dotyczy problem i czy zaczął się po przesłaniu plików, zmianie wyglądu czy przeniesieniu witryny.

Sprawdź publiczną stronę także w oknie prywatnym. Inny wynik jest przydatną wskazówką, choć między oknami mogą różnić się stan logowania, zapisane dane i rozszerzenia.

2. Znajdź i sprawdź adres obrazu

Kliknij brakujący obraz lub jego ikonę prawym przyciskiem myszy i poszukaj opcji Otwórz grafikę w nowej karcie albo Kopiuj adres obrazu. Dla obrazu tła lub pustego miejsca te opcje mogą być niedostępne.

Możesz też wybrać obraz w edytorze i otworzyć jego szczegóły w bibliotece mediów. Skopiuj adres URL pliku, a nie strony załącznika czy strony udostępniania w chmurze. Strona udostępniania może pokazywać obraz w interfejsie pobierania lub wymagać logowania.

Publiczna strona może korzystać z miniatury, kadru mobilnego lub kopii w osobnej usłudze dostarczania obrazów. Jeśli znajdujesz tylko oryginał w bibliotece, potraktuj go jako punkt wyjścia. Kontrola w Network pozwoli ustalić, której wersji żąda strona.

Otwórz adres obrazu w oknie prywatnym bez logowania i wybierz kolejny krok:

• Obraz się otwiera: przejdź do kontroli widoczności na stronie. Jeśli nie ujawnią przyczyny, sprawdź rzeczywiste żądanie strony.
• Pojawia się błąd, strona logowania lub ostrzeżenie o dostępie: przejdź do lokalizacji pliku i uprawnień.
• Problem występuje tylko na telefonie: przejdź do wersji mobilnych i ładowania, nawet jeśli oryginał się otwiera.
• Przeglądarka pobiera plik: przejdź do kontroli nagłówków odpowiedzi. Ustawienia pobierania mogą tłumaczyć to zachowanie, ale nie rozstrzygają, czy obraz działa wewnątrz strony.

Udany test w nowej karcie potwierdza, że plik da się wyświetlić w tym kontekście. Strona nadal może żądać innej wersji lub napotkać ograniczenie osadzania.

3. Przywróć plik lub popraw dostęp

Jeśli pliku brakuje albo adres jest nieprawidłowy

1. Znajdź właściwy obraz w bibliotece mediów. Porównaj jego adres z adresem, który nie działa. Sprawdź domenę, folder, nazwę, rozszerzenie i wielkość liter. Niektóre serwery odróżniają Photo.JPG od photo.jpg.
2. Zmień niedziałający wybór w odpowiednim bloku obrazu lub widżecie. Wybierz istniejący, działający plik, zapisz i opublikuj. Jeśli oryginał usunięto, najpierw prześlij sprawdzony plik zastępczy.
3. Ponownie otwórz publiczną stronę. Sprawdź, czy odwołuje się teraz do działającego obrazu. Jeśli nadal żąda brakującej miniatury, wykonaj opisaną niżej kontrolę generowanych rozmiarów.

Po przeniesieniu witryny porównaj również host obrazu, nie tylko nazwę pliku. Strona może nadal wskazywać starą domenę lub folder przesyłania. Ręcznie zapisane ścieżki opisują kontrole techniczne.

Jeśli oryginał działa, ale brakuje miniatury

Ponowne przesłanie nie musi naprawić strony, która wciąż wskazuje brakującą wersję. Przekaż administratorowi adres działającego oryginału i niedziałającej miniatury. Poproś o ponowne wygenerowanie brakującego rozmiaru i aktualizację list obrazów, które się do niego odwołują. Panel Network pokazuje błędny URL i status.

Na przykład: „Oryginał się otwiera, ale ta strona żąda mniejszej wersji, która zwraca 404. Proszę przywrócić ten rozmiar i sprawdzić odwołania do obrazów responsywnych na stronie”. W ten sposób określasz potrzebną naprawę bez znajomości narzędzi generowania obrazów danej platformy.

Jeśli dostęp jest zabroniony lub wymagane jest logowanie

Najpierw ustal, czy obraz ma być publiczny. Jeśli tak, wybierz plik dodany zwykłą ścieżką publikowania publicznych mediów w witrynie. Lokalny adres file:///C:/..., tymczasowy podgląd blob: lub prywatny link z chmury nie jest stałym, publicznym adresem obrazu.

Przy odpowiedzi 401 lub 403 wyślij dostawcy hostingu dokładny niedziałający URL, stronę, która go używa, i czas testu. Zapytaj, która reguła uwierzytelniania lub dostarczania odrzuciła żądanie. Możliwymi przyczynami są wygasające linki i ochrona przed hotlinkowaniem, ograniczająca osadzanie na innych witrynach. Popraw regułę lub użyj publicznego adresu obrazu obsługiwanego przez dostawcę. Zachowaj zamierzone ograniczenia dostępu do prywatnych zasobów.

4. Sprawdź widoczność obrazu na stronie

Jeśli obraz otwiera się bezpośrednio, zacznij od jego ustawień w edytorze:

• Sprawdź obraz i sekcję nadrzędną. Szukaj opcji typu „Ukryj na telefonie” lub „Tylko komputer”. Ukryta sekcja ukrywa również znajdujące się w niej obrazy.
• Tła sprawdzaj osobno. Tło sekcji wymaga widocznego kontenera. Nadaj pustej sekcji właściwą wysokość w edytorze, a następnie sprawdź pozycję tła i nakładkę.
• Obejrzyj przezroczystą grafikę na innym kolorze. Białe logo może zlewać się z białą stroną mimo poprawnego wczytania. Jeśli motyw wydaje się niewidoczny, skorzystaj z poradnika o przezroczystości.

Zapisz odpowiednią zmianę i obejrzyj publiczną stronę. Jeśli obrazu nadal nie ma, kontrole techniczne pomogą odróżnić zablokowane żądanie od obrazu ukrytego przez układ strony.

5. Sprawdź obrazy mobilne i zawieszone grafiki zastępcze

Jeśli problem występuje tylko na telefonie

Otwórz widok mobilny edytora i sprawdź, czy obraz lub sekcja są ukryte. Jeśli jest osobne ustawienie obrazu mobilnego, upewnij się, że wskazuje dostępny plik. Następnie przetestuj publiczną stronę na telefonie, na którym występuje problem.

Witryny mogą generować kilka rozmiarów i pozostawiać wybór przeglądarce. Telefon może żądać brakującej małej wersji, podczas gdy laptop korzysta z działającej dużej. Poproś administratora o porównanie wybranych adresów przy działających i niedziałających rozmiarach ekranu, a następnie o przywrócenie brakującej wersji. Ustalanie wybranego pliku opisują kontrole techniczne.

Jeśli w widocznym miejscu pozostaje grafika zastępcza

Opóźnianie ładowania obrazu niżej na stronie lub jeszcze nieotwartego slajdu galerii może być zamierzone. Zbadaj problem, gdy obraz pozostaje pusty po przewinięciu do niego lub otwarciu slajdu i odczekaniu na załadowanie. Nieudane żądanie i takie, które nigdy się nie rozpoczyna, wymagają różnych napraw.

Na kopii testowej sprawdź ustawienie galerii lub leniwego ładowania na jednej stronie. Jeśli obraz wróci, zleć poprawienie tego komponentu przed szerszą zmianą. Dla głównego obrazu widocznego od razu po otwarciu strony oceń, czy opóźnianie ładowania jest właściwe. Nasz poradnik o lazy loading wyjaśnia dostępne opcje.

6. Porównaj edytor z tym, co otrzymują odwiedzający

Jeśli obraz pojawia się tylko w edytorze, upewnij się, że zmiana została opublikowana na właściwej stronie. Następnie porównaj adres z biblioteki mediów z żądaniem strony publicznej. Prywatny podgląd w edytorze i publicznie dostępny plik to różne rzeczy.

Po poprawieniu nieaktualnej strony lub odwołania do obrazu użyj udokumentowanych narzędzi systemu publikacji do odświeżenia pamięci podręcznej danej strony lub pliku. Sieć dostarczania treści, czyli CDN, może mieć własną pamięć podręczną. Usunięcie danych przeglądarki nie odświeża współdzielonej pamięci witryny.

Jeśli problem dotyczy jednego profilu przeglądarki, przetestuj bez rozszerzeń i sprawdź uprawnienia witryny w tym profilu. Tryb prywatny nie w każdej konfiguracji wyłącza rozszerzenia. Zapisz nieudane żądanie, zanim zdecydujesz, czy trzeba zmienić blokadę treści, czy sposób dostarczania obrazów w witrynie.

Sekcja dla administratorów wyjaśnia testowanie bez zwykłej pamięci HTTP przeglądarki. Poradnik MDN o pamięci podręcznej opisuje pamięć przeglądarki i pamięci współdzielone.

7. Zmień plik, gdy przyczyną jest format lub rozmiar

Przed wyborem konwertera sprawdź rzeczywisty typ pliku i wymagania miejsca docelowego. Konwersja może rozwiązać niezgodność formatu, ale nie przywróci brakującego adresu ani nie pokaże ukrytej sekcji.

• Plik jest w formacie HEIC lub HEIF, a miejsce docelowe wymaga JPG: użyj HEIC na JPG, aby utworzyć kopię w postaci statycznego obrazu. Sprawdź wynik i zachowaj oryginał. Zdjęcie z iPhone’a może już być plikiem JPEG, więc najpierw sprawdź format.
• Platforma odrzuca SVG, ale przyjmuje PNG: utwórz kopię PNG o odpowiednich wymiarach w pikselach. Przed przesłaniem obejrzyj grafikę.
• Plik nie otwiera się również na twoim urządzeniu: odzyskaj działający oryginał lub ponownie wyeksportuj go z aplikacji, w której powstał. Zmiana rozszerzenia nie naprawia uszkodzonych danych.
• Przesyłany plik przekracza podany limit: przygotuj kopię mieszczącą się w limicie, a potem potwierdź ukończenie przesyłania i użycie tego pliku przez stronę.

Poradnik MDN o formatach porównuje obsługę w przeglądarkach i możliwości formatów. Jeśli SVG wygląda inaczej po eksporcie, sprawdź poradnik SVG. Jeśli obraz jest widoczny, ale mało ostry, skorzystaj z poradnika o rozmytych obrazach.

Przykład: zdjęcie produktu znika na telefonie

W tym przykładowym scenariuszu po migracji sklepu zdjęcie produktu działa na laptopie, ale na telefonie pojawia się uszkodzony obraz. Oryginał w bibliotece mediów otwiera się, więc właścicielka sprawdza rzeczywiste żądanie telefonu.

Telefon wybiera /media/blue-mug-640.webp, który zwraca 404. Laptop używa /media/blue-mug-1280.webp. Podczas migracji skopiowano większy plik, ale pominięto mniejszą wersję.

Administrator ponownie generuje brakujący rozmiar, sprawdza pozostałe zadeklarowane wersje i w razie potrzeby aktualizuje stare odwołania. Właścicielka odświeża publiczną stronę na telefonie i potwierdza, że żądany plik zwraca właściwy obraz. Przyczyną był brak wygenerowanego pliku; zmiana formatu oryginału nie naprawiłaby tego odwołania.

8. Sprawdź naprawę z perspektywy odwiedzającego

Powtórz nieudany test na tej samej publicznej stronie, przy tej samej wielkości ekranu i tym samym slajdzie galerii. Upewnij się, że pojawia się właściwy obraz i pozostaje dostępny po odświeżeniu. Testuj bez konta administratora, jeśli obraz ma być dostępny dla wszystkich.

Po zmianie szablonu lub sposobu dostarczania sprawdź inną stronę z tym samym komponentem, zarówno na komputerze, jak i na telefonie. Zapisz krótko przyczynę oraz zmieniony plik lub ustawienie.

Jeśli ktoś inny ma dokończyć naprawę, przekaż URL strony, URL wybranego obrazu, czas błędu, dane przeglądarki i urządzenia oraz odpowiedni komunikat. Napisz, czy obraz działa w edytorze, bezpośrednio w nowej karcie lub przy innym rozmiarze ekranu. Usuń prywatne tokeny i dane osobowe z materiałów udostępnianych publicznie.

Opcjonalnie: kontrole techniczne dla administratorów witryn

Wybierz kontrole pasujące do zebranych wskazówek. Pomogą odróżnić niedostępny plik, nieudane żądanie oraz obraz wczytany, ale ukryty.

Sprawdź żądanie obrazu w panelu Network

1. Otwórz publiczną stronę z problemem. W menu Chrome wybierz Więcej narzędzi → Narzędzia dla deweloperów, a następnie Network. Inne przeglądarki oferują podobne funkcje.
2. Pozostaw rejestrowanie włączone i odśwież stronę. Wybierz filtr Img lub wyszukaj nazwę pliku. Przewiń do obrazu albo otwórz jego slajd, jeśli zwykle uruchamia to ładowanie.
3. Wybierz żądanie. W Headers zanotuj Request URL, status i nagłówki odpowiedzi. Użyj Preview lub Response, aby obejrzeć otrzymaną zawartość.
4. Jeśli nic nie pasuje, usuń filtry. URL mógł się zmienić albo skrypt może pobierać obraz przez Fetch/XHR.

Aby porównać świeże pobranie, włącz Disable cache, pozostaw narzędzia otwarte i odśwież stronę. Omija to zwykłą pamięć HTTP przeglądarki, nie pamięć CDN. Jeśli witrynę obsługuje service worker, sprawdź jego zapisane odpowiedzi osobno. Zobacz dokumentację Network w Chrome.

Status zawęża poszukiwania, ale nie wskazuje każdej przyczyny. MDN wyjaśnia kody statusu HTTP i zwykłą walidację 304. Przy błędach nazwy hosta lub certyfikatu sprawdź DNS i HTTPS hosta obrazów.

Oczekuj rzeczywistych danych obrazu oraz właściwego Content-Type, np. image/jpeg lub image/webp. URL kończący się na .jpg może zwracać HTML, a usługa obrazów może prawidłowo dostarczać inny format pod tą samą końcówką.

Jeśli otwarcie adresu pobiera plik

Oprócz typu zawartości sprawdź Content-Disposition. Odpowiedź z Content-Disposition: attachment może uruchamiać pobieranie przy bezpośrednim otwarciu adresu. To nie dowodzi, że obraz nie działa na stronie: zbadaj też żądanie osadzonego obrazu. Jeśli skopiowano link do pobrania, użyj obsługiwanego przez hosting adresu do wyświetlania obrazów. Zobacz dokumentację Content-Disposition.

Znajdź URL wybranego obrazu responsywnego

W Chrome lub Edge kliknij obraz prawym przyciskiem i wybierz Zbadaj. W Elements wybierz rzeczywisty <img>, nie jego kontener ani <picture>. Otwórz Console i wpisz to wyrażenie, które tylko odczytuje dane:

$0.currentSrc

$0 oznacza ostatnio wybrany element w tych narzędziach. Wynikiem jest wybrany adres obrazu, nie gwarancja udanego ładowania. Sprawdź go w Network. Dokumentacja Console Utilities wyjaśnia $0, a MDN opisuje currentSrc.

Przeglądarka może wybrać plik z srcset lub pasującego źródła <picture>. Działający src nie naprawia brakującego wybranego wariantu. Mechanizm zastępczy picture zależy od warunków źródeł i ich obsługi; nie zakładaj, że zastąpi plik wybrany, gdy ten zwróci 404. Zobacz wybór obrazów responsywnych i dokumentację picture.

Ustal ścieżki obrazów w HTML i CSS

Na stronie https://example.com/services/kitchens/, jeśli nie ustawiono innego bazowego URL, te dwa źródła żądają różnych lokalizacji:

<img src="images/kitchen.jpg" alt="Gotowa kuchnia z dębowymi szafkami">
<img src="/images/kitchen.jpg" alt="Gotowa kuchnia z dębowymi szafkami">

Pierwsze żąda /services/kitchens/images/kitchen.jpg, a drugie /images/kitchen.jpg na tym hoście. Wybierz adres zgodny z rzeczywistym wdrożeniem, uwzględniając ewentualny prefiks podkatalogu. MDN wyjaśnia ścieżki względne i bezwzględne. W zewnętrznym CSS względny URL obrazu jest rozwiązywany względem adresu arkusza stylów; zobacz dokumentację URL w CSS.

Sprawdź układ i sposób ładowania

W Elements → Computed sprawdź obraz i jego przodków: display: none, visibility: hidden, zerową nieprzezroczystość, zapadnięte wymiary, przycinanie lub zasłaniającą nakładkę. Obraz tła nie nadaje pustemu kontenerowi wysokości zdjęcia. Popraw odpowiedzialną regułę w edytorze lub źródłowym arkuszu; tymczasowa zmiana w narzędziach zwykle znika po odświeżeniu. Zobacz poradnik Chrome o inspekcji CSS i dokumentację background-image.

Jeśli rzeczywisty URL jest tylko w data-src, sprawdź skrypt przypisujący źródło i odpowiednie błędy Console. Przy natywnym loading="lazy" podaj właściwe wymiary i zadbaj o miejsce dla obrazu w układzie jeszcze przed wczytaniem. Poradnik o leniwym ładowaniu w przeglądarce opisuje to zachowanie.

Content Security Policy: sprawdź, czy zamierzony host obrazów pasuje do img-src, albo do default-src, jeśli brak dyrektywy dotyczącej obrazów. Zobacz dokumentację źródeł obrazów w CSP.

Zawartość mieszana: odwołanie HTTP do obrazu na stronie HTTPS może zostać podniesione do HTTPS lub zablokowane, zależnie od użycia. Potwierdź dostępność obrazu przez HTTPS i zaktualizuj odwołanie. Zobacz wskazówki MDN o zawartości mieszanej.

CORS i zasady osadzania: wyświetlenie zwykłego obrazu z innego źródła i odczyt jego pikseli przez canvas mają różne wymagania. Dodanie crossorigin może zepsuć ładowanie, jeśli host nie dostarcza wymaganej odpowiedzi CORS. Sprawdź dokumentację CORS dla obrazów oraz zgłoszone ograniczenia Cross-Origin Resource Policy.

Najczęstsze pytania

Dlaczego ja widzę obraz, a odwiedzający nie?

Edytor może pokazywać nieopublikowany lub tymczasowy podgląd, a zalogowana sesja może mieć dostęp niedostępny dla odwiedzających. Sprawdź publiczną stronę bez tego logowania. Jeśli plik ma być publiczny, użyj publicznego mechanizmu mediów witryny; w innym przypadku poproś o kontrolę wyświetlania wymagającego uwierzytelnienia.

Dlaczego obraz otwiera się w nowej karcie, ale nie działa na stronie?

Najpierw porównaj dokładne adresy: strona może żądać innego rozmiaru. Jeśli są takie same, sprawdź osadzone żądanie pod kątem błędu dostępu lub polityki przeglądarki. Udane żądanie obrazu kieruje dalej do ustawień widoczności i układu strony.

Czy odpowiedź 200 dowodzi, że obraz działa?

Nie. Sprawdź zawartość odpowiedzi. Strona logowania zwrócona ze statusem 200 nie jest obrazem. Jeśli odpowiedź zawiera właściwy obraz, przejdź do odpowiednich komunikatów Console i jego wyświetlania na stronie. Sam kod nie potwierdza widocznego rezultatu.

Czy zmniejszenie wymiarów lub kompresja naprawią niedziałający obraz?

Pomagają, gdy przesyłanie przekracza podany limit lub zbyt duży obraz przesyła się wolno. Błędna ścieżka, brakująca miniatura lub ukryta sekcja wymaga innej naprawy. Przed zmianą pliku ustal rodzaj problemu na podstawie błędu przesyłania lub żądania obrazu.

Czy zmienić nazwę pliku albo jego rozszerzenie?

Zmień nazwę, by rozwiązać konkretny problem ze ścieżką lub nazewnictwem, a potem zaktualizuj odwołania do starej nazwy. Zmiana .heic na .jpg nie konwertuje obrazu. Użyj konwertera, jeśli rzeczywisty format nie jest obsługiwany, i zachowaj oryginał.

Czy tekst alternatywny, robots.txt lub Search Console sprawią, że obraz się pojawi?

Tekst alternatywny opisuje obraz, gdy nie można go zobaczyć; nie pobiera pliku. Instrukcje robots i Search Console dotyczą skanowania witryny przez roboty wyszukiwarek oraz widoczności w wynikach wyszukiwania. Gdy obrazu brakuje odwiedzającemu na stronie, najpierw sprawdź plik, żądanie i układ.

Podsumuj za pomocąChatGPT (otwiera się w nowej karcie)Grok (otwiera się w nowej karcie)Google (otwiera się w nowej karcie)Perplexity (otwiera się w nowej karcie)Claude (otwiera się w nowej karcie)