Dlaczego obrazy na mojej stronie są rozmyte?

Ustal, na którym etapie obraz traci ostrość

Obraz jest fotografowany lub projektowany, eksportowany, przesyłany, przetwarzany i wyświetlany. Znajdź pierwszy etap utraty szczegółów i zmieniaj jedną rzecz naraz.

Otwórz oryginał przy powiększeniu 100%, następnie przesłany plik i obraz pobierany przez opublikowaną stronę. Porównaj to samo oko, etykietę lub słowo. Miniatury ukrywają różnice; bardzo duże powiększenie pokazuje piksele także w dobrych zdjęciach. Jeśli oryginał jest poruszony lub źle wyostrzony, wybierz lepszy albo zrób zdjęcie ponownie. Jeśli problem dotyczy tylko eksportu, popraw go najpierw.

Dobierz sprawdzenie do objawu

Sprawdź plik rzeczywiście pobierany przez stronę

System zarządzania treścią może zachować duży oryginał, a w bloku lub szablonie używać miniatury. Otwórz żądanie obrazu w panelu Sieć narzędzi przeglądarki. Sprawdź wymiary pliku i porównaj je z miejscem zajmowanym na stronie, zamiast opierać się tylko na oryginalnym przesłanym pliku.

Miniatura szeroka na 300 pikseli jest powiększana w kolumnie o szerokości 900. Cały oryginał może być zbyt ciężki: wybierz odpowiedni rozmiar pośredni w edytorze lub szablonie zamiast ponownie kompresować miniaturę. Przy kilku źródłach wybór może zależeć od okna. Sprawdź telefon i komputer; zobacz poradnik obrazów responsywnych i dokumentację MDN o wyborze źródła i gęstości pikseli.

Zapewnij wystarczającą liczbę pikseli

Dla zdjęcia wyświetlanego na szerokości 600 pikseli CSS porównaj kopie o szerokości 600 i 1200 pikseli, również na telefonie o dużej gęstości ekranu. Oceń szczegóły i wagę pliku. To propozycje do testu, nie uniwersalny wymóg.

Użyj narzędzia zmiany rozmiaru z dostatecznie dużym oryginałem i zablokuj proporcje. Powiększenie z 300 do 1200 pikseli nie tworzy fotograficznych szczegółów. Zobacz rozmiary obrazów na stronach. Ciasny kadr wokół małej twarzy też zmniejsza liczbę dostępnych pikseli; sprawdź wymiary po przycięciu.

Oceń kompresję i mały tekst oddzielnie

Bloki w gradientach, rozmazane faktury i zakłócenia wokół liter mogą wskazywać na zbyt silną kompresję stratną. Eksportuj z najlepszej wersji źródłowej w tych samych wymiarach z mniejszą kompresją. Zapis uszkodzonego JPG jako PNG zachowuje wady.

Przeczytaj najmniejszy istotny tekst na zrzutach i diagramach w docelowym rozmiarze. Porównaj PNG z obecnym plikiem dzięki poradnikowi JPG i PNG. Zbyt mały tekst może wymagać nowego układu. Twórz osobne próby z oryginału, oznaczając w nazwach wymiary i format, zamiast wielokrotnie konwertować stratne kopie.

100% oznacza tutaj rzeczywisty rozmiar w przeglądarce obrazów: jeden piksel obrazu odpowiada jednemu pikselowi ekranu. Powiększenie strony w przeglądarce internetowej to osobne ustawienie.

Przykład: ostry plik staje się rozmytym obrazem artykułu

Zdjęcie 2400 × 1600 jest ostre lokalnie, ale rozmyte w bloku szerokim na 600 pikseli. Strona pobiera miniaturę 300 × 200. To przykład diagnozy, a nie pomiar konkretnej witryny.

1. Zachowaj oryginał i potwierdź użycie miniatury na stronie.
2. Wybierz większą wersję w bloku lub szablonie.
3. Porównaj 600 × 400 i 1200 × 800 przy tej samej szerokości wyświetlania.
4. Sprawdź telefon, komputer i rozmiary faktycznie pobieranych plików.
5. Zachowaj najmniejszą wersję pokazującą potrzebne szczegóły.

Rozwiązaniem jest właściwa wersja obrazu; kompresja miniatury nie dodaje szczegółów. Jeśli nadal widać starą wersję, sprawdź żądany adres i odśwież odpowiednią pamięć podręczną przed kolejnym eksportem.

Najczęstsze pytania

Czy zmiana DPI poprawi ostrość?

Sama etykieta rozdzielczości nie dodaje pikseli. Sprawdź wymiary, rozmiar wyświetlania i pobraną wersję. Zobacz DPI, PPI i piksele.

Czy WebP naprawi rozmycie?

Zmiana formatu nie odzyskuje szczegółów. Zacznij od ostrego oryginału i porównaj jakość oraz wagę eksportów.

Dlaczego w bibliotece mediów obraz jest ostry?

Biblioteka i strona mogą pokazywać inne wersje w innych rozmiarach. Porównaj opublikowany plik z podglądem.