Konwersja stron PDF na obrazy dla witryny internetowej wymaga określonych wymiarów w pikselach, a nie ogólnego ustawienia DPI. Strona PDF przekonwertowana w rozdzielczości 300 DPI tworzy obraz o szerokości tysięcy pikseli, znacznie większy niż jakikolwiek układ witryny internetowej. Przesyłanie tego obrazu na stronę internetową marnuje przepustowość i spowalnia ładowanie strony. Konwertowanie dokładnie takich wymiarów w pikselach, jakie są potrzebne do układu witryny, powoduje, że obrazy ładują się szybko i są ostro wyświetlane. Konwersja PDF do obrazu do użytku internetowego polega na dopasowaniu wymiarów wyjściowych do konkretnego miejsca, jakie obraz będzie zajmował na stronie.
Najważniejsze wnioski
Wymiary obrazu witryny internetowej mierzone są w pikselach, a nie w calach. Aby przekonwertować stronę PDF na prawidłowy rozmiar w pikselach, określ maksymalną szerokość wyświetlania obrazu w witrynie, a następnie ustaw wynik konwersji na tę szerokość, zachowując proporcje strony. Standardowe szerokości treści witryn internetowych wahają się od 720 pikseli w przypadku układów zoptymalizowanych pod kątem urządzeń mobilnych do 1920 pikseli w przypadku układów o pełnej szerokości na komputery stacjonarne. Konwersja przy tych konkretnych wymiarach tworzy obrazy, które nie są ani niepotrzebnie duże, ani rozczarowująco rozmyte.
Określ dokładne wymiary w pikselach, jakich potrzebuje Twoja witryna
W przypadku witryn korzystających z systemu zarządzania treścią z automatyczną zmianą rozmiaru obrazu, konwertuj w rozdzielczości wyższej niż rozmiar wyświetlacza i pozwól CMS zająć się zmianą rozmiaru. System CMS, który generuje wiele rozmiarów z jednego przesłanego pliku, potrzebuje obrazu źródłowego wystarczająco dużego, aby obsłużyć największy wygenerowany rozmiar. Konwersja przy dwukrotnie większym rozmiarze wygenerowanym przez CMS gwarantuje, że wszystkie wygenerowane warianty będą ostre.
W przypadku responsywnych stron internetowych szerokość wyświetlania obrazu zmienia się w zależności od rozmiaru ekranu. Konwertuj z największą szerokością, przy jakiej będzie wyświetlany obraz, co zazwyczaj stanowi punkt przerwania na pulpicie wynoszący od 1200 do 1400 pikseli dla obrazów treści. Przeglądarka skutecznie skaluje obrazy w celu dostosowania ich do mniejszych ekranów. Dodatkowy rozmiar pliku wynikający z większej konwersji jest udostępniany wszystkim użytkownikom, w tym użytkownikom mobilnym, którzy zobaczą zmniejszoną wersję. W przypadku implementacji wrażliwych na przepustowość użyj responsywnych znaczników obrazu, aby wyświetlać obrazy o różnych rozmiarach w różnych punktach przerwania.
Zmierz szerokość obszaru zawartości swojej witryny w pikselach. Otwórz witrynę w przeglądarce, kliknij obszar zawartości prawym przyciskiem myszy i wybierz opcję Sprawdź, aby otworzyć narzędzia programistyczne. Obliczona szerokość kontenera zawartości jest wyświetlana na diagramie modelu pudełkowego. Jest to maksymalna szerokość, jaką powinny mieć Twoje obrazy. Jeśli Twoja witryna jest responsywna i dostosowuje się do różnych rozmiarów ekranów, wybierz najszerszy punkt przerwania, zazwyczaj układ pulpitu o szerokości od 1200 do 1400 pikseli. Obrazy o tej szerokości będą wyglądać ostro na komputerze, a na tabletach i telefonach będą proporcjonalnie zmniejszane.
W przypadku galerii obrazów i lightboxów przekonwertuj je w wyższej rozdzielczości, aby umożliwić oglądanie na pełnym ekranie. Obraz z galerii wyświetlany w układzie siatki o szerokości 400 pikseli może wymagać rozszerzenia do 1600 pikseli po kliknięciu w celu wyświetlenia na pełnym ekranie. Konwersja do rozmiaru wyświetlania pełnoekranowego gwarantuje, że powiększony obraz będzie ostry. Widok siatki ładuje pomniejszoną wersję, z którą przeglądarki dobrze sobie radzą. Konwersja w rozmiarze wyświetlania galerii i wyświetlanie tego samego obrazu w trybie pełnoekranowym powoduje rozmycie powiększenia. Weź pod uwagę maksymalny scenariusz wyświetlania swojej witryny, a nie tylko widok domyślny.
Wypróbuj PDF do obrazu
Nie wymaga instalacji. Działa bezpośrednio w Twojej przeglądarce.
Konwertuj strony PDF z zachowaniem dokładnych wymiarów w pikselach
W przypadku stron PDF zawierających zarówno tekst, jak i obrazy, konwersja przy 2-krotnej szerokości wyświetlania pozwala zachować ostrość tekstu na ekranach o wysokiej rozdzielczości DPI. Tekst renderowany przy szerokości ekranu 1x może wyglądać na nieco miękki na wyświetlaczach Retina, ponieważ drobne pociągnięcia liter korzystają z dodatkowej gęstości pikseli. Konwersja 2x z grubsza podwaja rozmiar pliku, co jest opłacalnym kompromisem w przypadku stron dokumentów, gdzie priorytetem jest czytelność tekstu. W przypadku stron zawierających głównie zdjęcia wystarczy konwersja 1x, ponieważ oko jest mniej wrażliwe na różnice w rozdzielczości treści fotograficznych.
Otwórz narzędzie do konwersji plików PDF na obrazy i poszukaj ustawień rozmiaru wyjściowego. Niektóre narzędzia wykorzystują wymiary w pikselach, np. szerokość 1200 pikseli. Inni używają DPI w połączeniu z fizycznym rozmiarem strony. Jeśli narzędzie wykorzystuje DPI, oblicz wymagane DPI, dzieląc docelową szerokość piksela przez szerokość strony w calach. Strona w formacie Letter ma szerokość 8,5 cala. Aby uzyskać obraz o szerokości 1200 pikseli, ustaw DPI na 1200 podzielone przez 8,5, co równa się w przybliżeniu 141 DPI. Wpisanie 141 DPI daje dokładnie 1200 pikseli szerokości potrzebnej dla witryny.
W przypadku Digital Publishing, gdzie obrazy są osadzone w artykułach lub postach na blogu, przekonwertuj przy 2x szerokości wyświetlania, aby obsługiwać Retina o wysokiej rozdzielczości i podobne wyświetlacze. Obszar zawartości wyświetlający obrazy o szerokości 800 pikseli wymaga obrazów źródłowych o szerokości 1600 pikseli. Przeglądarka wyświetla obraz o powiększeniu 2x na ekranach o wysokiej rozdzielczości DPI i skaluje go do obszaru wyświetlania o rozdzielczości 800 pikseli, dzięki czemu tekst i grafika są ostrzejsze niż obraz źródłowy o rozdzielczości 800 pikseli. Konwersja 2x podwaja rozmiar pliku, ale zapewnia wyraźnie lepszą jakość na nowoczesnych ekranach. Konwerter plików PDF na obraz WukongPDF akceptuje szerokość pikseli jako bezpośrednie dane wejściowe, więc wprowadzasz docelową szerokość, a narzędzie automatycznie oblicza odpowiednią wartość DPI.
Wybierz odpowiedni format obrazu do dostarczenia do witryny internetowej
| Format | Najlepsze dla | Kompresja | Notatki |
|---|---|---|---|
| PNG | Tekst, wykresy, grafika liniowa | Bezstratny | Większe pliki, ostry tekst, obsługuje przezroczystość |
| JPG | Fotografie, zeskanowane strony | Stratny | Mniejsze pliki, fotorealistyczne, bez przezroczystości |
| WebP | Nowoczesne strony internetowe, cała treść | Obydwa | Najlepsza kompresja, nieobsługiwana przez bardzo stare przeglądarki |
| AVIF | Najnowocześniejsza wydajność sieciowa | Obydwa | Najmniejsze pliki, ograniczona obsługa narzędzi do konwersji plików PDF |
W przypadku większości konwersji plików PDF na strony internetowe WebP zapewnia najlepszą równowagę między jakością i rozmiarem pliku. Obraz typowej strony dokumentu w formacie WebP o szerokości 1200 pikseli jest od 40 do 60 procent mniejszy niż równoważny obraz PNG przy zachowaniu identycznej jakości wizualnej. Jeśli Twoja witryna nie obsługuje protokołu WebP, kolejnym najlepszym wyborem w przypadku stron dokumentów zawierających tekst będzie format PNG, a w przypadku stron zawierających zdjęcia najlepszym wyborem będzie format JPEG o jakości od 85 do 90%.
Konwersja zbiorcza wielostronicowych plików PDF na potrzeby galerii internetowych
W przypadku bardzo dużych plików PDF zawierających setki stron konwersję wsadową podziel na grupy po 50 stron. Niektóre narzędzia do konwersji mają ograniczenia pamięci, które powodują awarie w przypadku bardzo dużych partii. Przetwarzanie w mniejszych grupach zajmuje łącznie ten sam czas, ale pozwala uniknąć frustracji związanej z nieudaną konwersją na stronie 347 z 400, która wymaga ponownego uruchomienia całej partii.
W przypadku wielostronicowego pliku PDF, który stanie się galerią obrazów witryny internetowej, przekonwertuj wszystkie strony w jednej operacji wsadowej z tymi samymi wymiarami w pikselach. W ramach tej partii powstają obrazy o stałym rozmiarze, które są jednakowo wyświetlane w układzie galerii. Nazwij pliki wyjściowe przy użyciu spójnej konwencji nazewnictwa, która obejmuje numer strony, na przykład dokument-strona-01.webp, dokument-strona-02.webp i tak dalej. Ta konwencja nazewnictwa łatwo integruje się z wtyczkami galerii i niestandardowym kodem JavaScript, który oczekuje plików obrazów ponumerowanych sekwencyjnie.
Po konwersji przeprowadź obrazy za pomocą narzędzia do optymalizacji obrazu, aby jeszcze bardziej zmniejszyć rozmiar pliku bez widocznej utraty jakości. Narzędzia takie jak ImageOptim, TinyPNG i Squoosh stosują dodatkową kompresję, której mógł nie zastosować konwerter PDF. Drugi przebieg kompresji może zmniejszyć rozmiar pliku o dodatkowe 20–40 procent w przypadku plików PNG i JPEG. W przypadku galerii składającej się z 50 stron dokumentów skumulowane oszczędności w przepustowości mają znaczenie zarówno dla kosztów hostingu witryny, jak i czasu ładowania strony odwiedzającego.
Często zadawane pytania
Czy powinienem konwertować strony PDF na obrazy w przestrzeni kolorów sRGB do użytku w Internecie? Tak. Większość obrazów stron internetowych powinna być w przestrzeni kolorów sRGB, ponieważ jest to standardowa przestrzeń kolorów dla przeglądarek internetowych. Konwersja do sRGB zapewnia spójny wygląd kolorów w różnych przeglądarkach i systemach operacyjnych. Jeśli plik PDF korzysta z przestrzeni kolorów CMYK lub Adobe RGB, konwersja do sRGB może spowodować niewielkie przesunięcia kolorów. Przed publikacją wyświetl podgląd przekonwertowanego obrazu w przeglądarce, aby upewnić się, że kolory są akceptowalne.
Co się stanie, jeśli moja witryna internetowa będzie responsywna i szerokość wyświetlanego obrazu zmieni się wraz z rozmiarem ekranu?
Konwertuj przy największej szerokości wyświetlania, przy której obraz będzie wyświetlany, zazwyczaj w punkcie przerwania pulpitu. Przeglądarka automatycznie skaluje obraz do mniejszych ekranów. Obraz o szerokości 1200 pikseli wyświetlany na telefonie w rozdzielczości 400 pikseli wygląda ostro, ponieważ jest skalowany w dół, a nie w górę. Dodatkowy rozmiar pliku wynikający z konwersji zoptymalizowanej pod kątem komputerów stacjonarnych jest udostępniany wszystkim użytkownikom, co jest kompromisem w zakresie obsługi pełnego zakresu rozdzielczości. W przypadku implementacji wrażliwych na przepustowość użyj responsywnych znaczników obrazu, które obsługują różne rozmiary obrazów w różnych punktach przerwania.
Czy mogę przekonwertować stronę PDF na obraz z przezroczystym tłem?
Tylko jeśli sama strona PDF nie ma tła. Większość stron PDF ma wyraźnie białe tło, które jest konwertowane jako białe tło obrazu. Aby utworzyć obraz z przezroczystym tłem, przed konwersją usuń tło strony z pliku PDF. Wymaga to edytora PDF, który może usunąć obiekt tła ze strumienia zawartości strony. Powstała strona PDF będzie miała przezroczyste tło, a konwersja jej do formatu PNG zachowa przezroczystość.
Czy powinienem konwertować strony PDF na obrazy w rozdzielczości 72 DPI do użytku w Internecie, jak jest to powszechnie zalecane?
Zalecenie 72 DPI jest przestarzałe. Powstał, gdy większość monitorów komputerowych miała fizyczną gęstość pikseli wynoszącą około 72 piksele na cal. Nowoczesne monitory mają gęstość pikseli od 100 do 200 lub więcej pikseli na cal. Konwertowanie strony PDF w rozdzielczości 72 DPI i wyświetlanie jej przy 100-procentowym powiększeniu na nowoczesnym monitorze daje wyraźnie miękki obraz. Użyj opisanej powyżej metody wymiarowania w pikselach zamiast stałego DPI. Prawidłowe DPI to wszystko, co zapewnia właściwe wymiary w pikselach dla konkretnego układu witryny.
Wypróbuj PDF do obrazu
Nie wymaga instalacji. Działa bezpośrednio w Twojej przeglądarce.