Преобразование PDF-страниц в изображения для веб-сайта требует определенных размеров в пикселях, а не общей настройки DPI. Страница PDF, преобразованная с разрешением 300 точек на дюйм, создает изображение шириной в тысячи пикселей, что намного больше, чем может отобразить любой макет веб-сайта. Загрузка этого изображения на веб-сайт тратит трафик и замедляет загрузку страницы. Преобразование с точными размерами в пикселях, необходимыми для макета веб-сайта, позволяет получить изображения, которые быстро загружаются и отображаются четко. Преобразование PDF в изображение для использования в Интернете заключается в сопоставлении выходных размеров с конкретным местом, которое изображение будет занимать на странице.
Основные выводы
Размеры изображений на веб-сайте измеряются в пикселях, а не в дюймах. Чтобы преобразовать страницу PDF в правильный размер пикселей, определите максимальную ширину отображения изображения на веб-сайте, а затем установите для вывода преобразования эту ширину, сохраняя при этом соотношение сторон страницы. Стандартная ширина содержимого веб-сайта варьируется от 720 пикселей для макетов, оптимизированных для мобильных устройств, до 1920 пикселей для полноразмерных макетов для настольных компьютеров. Преобразование в этих конкретных размерах дает изображения, которые не являются ни излишне большими, ни разочаровывающе размытыми.
Определите точные размеры пикселей, необходимые вашему веб-сайту
Для веб-сайтов, использующих систему управления контентом с автоматическим изменением размера изображения, конвертируйте с разрешением, превышающим размер дисплея, и позвольте CMS обрабатывать изменение размера. CMS, которая генерирует несколько размеров за одну загрузку, нуждается в исходном изображении, достаточно большом, чтобы поддерживать наибольший сгенерированный размер. Преобразование в два раза большего размера, созданного CMS, гарантирует, что все сгенерированные варианты будут четкими.
На адаптивных веб-сайтах ширина изображения меняется в зависимости от размера экрана. Преобразуйте с максимальной шириной, в которой будет отображаться изображение, что обычно составляет точку останова рабочего стола от 1200 до 1400 пикселей для изображений контента. Браузер эффективно уменьшает изображения для экранов меньшего размера. Дополнительный размер файла в результате более крупного преобразования предоставляется всем пользователям, включая мобильных пользователей, которые увидят уменьшенную версию. Для реализаций, чувствительных к пропускной способности, используйте адаптивную разметку изображений, чтобы отображать изображения разных размеров в разных точках останова.
Измерьте ширину области контента вашего сайта в пикселях. Откройте веб-сайт в браузере, щелкните правой кнопкой мыши область содержимого и выберите «Проверить», чтобы открыть инструменты разработчика. Вычисленная ширина контейнера содержимого отображается на диаграмме блочной модели. Это максимальная ширина, которой должны быть ваши изображения. Если ваш веб-сайт адаптивный и адаптируется к экранам разных размеров, выберите самую широкую точку останова, обычно это макет рабочего стола шириной от 1200 до 1400 пикселей. Изображения такой ширины будут выглядеть четкими на настольных компьютерах и будут пропорционально уменьшены на планшетах и телефонах.
Для галерей изображений и лайтбоксов конвертируйте их с более высоким разрешением для поддержки полноэкранного просмотра. Изображение галереи, которое отображается шириной 400 пикселей в виде сетки, возможно, потребуется расширить до 1600 пикселей в ширину при щелчке для полноэкранного просмотра. Преобразование в полноэкранный режим обеспечивает четкость увеличенного изображения. Представление сетки загружает уменьшенную версию, с которой браузеры хорошо справляются. Преобразование размера отображения галереи и предоставление того же изображения для полноэкранного просмотра приводит к размытому увеличению. Учитывайте максимальный сценарий отображения вашего веб-сайта, а не только вид по умолчанию.
Попробуйте PDF в изображение
Никакой установки не требуется. Работает прямо в вашем браузере.
Преобразование страниц PDF с точными размерами в пикселях
Для страниц PDF, содержащих как текст, так и изображения, преобразование в 2 раза больше ширины экрана сохраняет четкость текста на экранах с высоким разрешением. Текст, отображаемый при ширине дисплея 1x, может выглядеть немного мягким на дисплеях Retina, поскольку тонкие штрихи букв выигрывают от дополнительной плотности пикселей. Преобразование в 2 раза увеличивает размер файла примерно вдвое, что является выгодным компромиссом для страниц документов, где читаемость текста является приоритетом. Для страниц, содержащих в основном фотографии, преобразования 1x достаточно, поскольку глаз менее чувствителен к различиям в разрешении фотографического контента.
Откройте инструмент преобразования PDF в изображение и найдите настройки размера вывода. Некоторые инструменты используют размеры в пикселях, например ширину 1200 пикселей. Другие используют DPI в сочетании с физическим размером страницы. Если инструмент использует DPI, рассчитайте необходимое DPI, разделив ширину целевого пикселя на ширину страницы в дюймах. Страница формата Letter имеет ширину 8,5 дюймов. Чтобы создать изображение шириной 1200 пикселей, установите значение DPI равное 1200, разделенное на 8,5, что соответствует примерно 141 DPI. Ввод 141 DPI дает ширину в 1200 пикселей, необходимую для веб-сайта.
Для Digital Publishing, где изображения встроены в статьи или сообщения в блогах, конвертируйте в 2 раза большую ширину дисплея для поддержки Retina с высоким разрешением и аналогичных дисплеев. Область контента, в которой отображаются изображения шириной 800 пикселей, требует исходных изображений шириной 1600 пикселей. Браузер отображает изображение, увеличенное в 2 раза, на экранах с высоким разрешением и масштабирует его до области отображения 800 пикселей, создавая более четкий текст и графику, чем исходное изображение с разрешением 800 пикселей. Преобразование в 2 раза увеличивает размер файла вдвое, но обеспечивает заметно лучшее качество на современных экранах. Конвертер PDF в изображение WukongPDF принимает ширину в пикселях в качестве прямых входных данных, поэтому вы вводите целевую ширину, и инструмент автоматически вычисляет соответствующее значение DPI.
Выберите правильный формат изображения для показа на веб-сайте
| Формат | Наилучший вариант для | Сжатие | Примечания |
|---|---|---|---|
| PNG | Текст, диаграммы, штриховая графика | без потерь | Файлы большего размера, четкий текст, поддержка прозрачности. |
| JPEG | Фотографии, сканированные страницы. | с потерями | Файлы меньшего размера, фотореалистичные, без прозрачности. |
| ВебП | Современные сайты, весь контент | Оба | Лучшее сжатие, не поддерживается очень старыми браузерами. |
| АВИФ | Передовая веб-производительность | Оба | Наименьшие файлы, ограниченная поддержка инструментов для преобразования PDF |
Для большинства преобразований PDF в веб-сайт WebP предлагает наилучший баланс качества и размера файла. Изображение типичной страницы документа в формате WebP шириной 1200 пикселей на 40–60 процентов меньше, чем эквивалентное изображение PNG, сохраняя при этом визуально идентичное качество. Если ваш веб-сайт не поддерживает WebP, PNG — следующий лучший выбор для страниц документа, содержащих текст, а JPEG с качеством от 85 до 90 процентов — следующий лучший выбор для страниц, содержащих фотографии.
Пакетное преобразование многостраничных PDF-файлов для галерей веб-сайтов
Для очень больших PDF-файлов с сотнями страниц разбейте пакетное преобразование на группы по 50 страниц. Некоторые инструменты преобразования имеют ограничения по памяти, что приводит к сбоям при работе с очень большими пакетами. Обработка меньшими группами занимает такое же общее время, но позволяет избежать разочарования в случае неудачного преобразования на странице 347 из 400, требующего перезапуска всего пакета.
Для многостраничного PDF-файла, который станет галереей изображений веб-сайта, преобразуйте все страницы за одну пакетную операцию с одинаковыми размерами в пикселях. Пакет создает изображения одинакового размера, которые равномерно отображаются в макете галереи. Назовите выходные файлы, используя согласованное соглашение об именовании, включающее номер страницы, например document-page-01.webp, document-page-02.webp и т. д. Это соглашение об именах легко интегрируется с плагинами галереи и пользовательским JavaScript, который ожидает файлы изображений с последовательной нумерацией.
После преобразования пропустите изображения через инструмент оптимизации изображений, чтобы еще больше уменьшить размер файла без видимой потери качества. Такие инструменты, как ImageOptim, TinyPNG и Squoosh, применяют дополнительное сжатие, которое, возможно, не применялось PDF-конвертером. Второй этап сжатия может уменьшить размер файла PNG и JPEG еще на 20–40 процентов. Для галереи из 50 страниц документов совокупная экономия полосы пропускания значима как для затрат на хостинг веб-сайта, так и для времени загрузки страницы посетителя.
Часто задаваемые вопросы
Должен ли я конвертировать PDF-страницы в изображения в цветовом пространстве sRGB для использования в Интернете? Да. Большинство изображений веб-сайтов должны быть в цветовом пространстве sRGB, поскольку это стандартное цветовое пространство для веб-браузеров. Преобразование в sRGB обеспечивает единообразную цветопередачу в разных браузерах и операционных системах. Если в PDF-файле используется цветовое пространство CMYK или Adobe RGB, преобразование в sRGB может вызвать небольшие сдвиги цвета. Перед публикацией просмотрите преобразованное изображение в браузере, чтобы убедиться, что цвета приемлемы.
Что, если мой веб-сайт адаптивный и ширина изображения меняется в зависимости от размера экрана?
Преобразуйте при максимальной ширине экрана, на которой будет отображаться изображение, обычно это точка останова на рабочем столе. Браузер автоматически уменьшает изображение для экранов меньшего размера. Изображение шириной 1200 пикселей, отображаемое на телефоне с разрешением 400 пикселей, выглядит четким, потому что оно уменьшается, а не увеличивается. Дополнительный размер файла в результате преобразования, оптимизированного для настольных компьютеров, предоставляется всем пользователям, что является компромиссом для поддержки полного диапазона разрешений. Для реализаций, чувствительных к пропускной способности, используйте адаптивную разметку изображений, которая обрабатывает изображения разных размеров в разных точках останова.
Можно ли преобразовать страницу PDF в изображение с прозрачным фоном?
Только если сама страница PDF не имеет фона. Большинство страниц PDF имеют явный белый фон, который преобразуется в белый фон изображения. Чтобы создать изображение с прозрачным фоном, перед преобразованием удалите фон страницы из PDF-файла. Для этого требуется редактор PDF, который может удалять фоновый объект из потока содержимого страницы. Результирующая страница PDF будет иметь прозрачный фон, а преобразование ее в PNG сохранит прозрачность.
Следует ли мне конвертировать PDF-страницы в изображения с разрешением 72 DPI для использования в Интернете, как это обычно рекомендуется?
Рекомендация 72 DPI устарела. Он возник, когда большинство компьютерных мониторов имели физическую плотность пикселей примерно 72 пикселя на дюйм. Современные мониторы имеют плотность пикселей от 100 до 200 и более пикселей на дюйм. Преобразование страницы PDF с разрешением 72 точки на дюйм и ее отображение при 100-процентном увеличении на современном мониторе дает заметно мягкое изображение. Используйте описанный выше метод измерения пикселей вместо фиксированного разрешения. Правильный DPI — это то, что обеспечивает правильные размеры в пикселях для вашего конкретного макета веб-сайта.
Попробуйте PDF в изображение
Никакой установки не требуется. Работает прямо в вашем браузере.