PPI, DPI ...
Во-первых, давайте уточним терминологию. И PPI (пиксели на дюйм) и DPI (точка на дюйм) являются коэффициентами, которые определяют преобразование пикселей в физические единицы (в данном случае дюйм). В цифровом мире - компьютеры, изображения, ... DPI ошибочно используется там, где вместо PPI следует использовать . DPI на самом деле существуют только в мире печати. Но для нас сейчас DPI = PPI . >> Подробнее
Информация о разрешении (иногда ее называют DPI, но это PPI) хранится в заголовках (метаинформация изображения). JPG и PNG поддерживают это; но GIF не поддерживает DPI - его нет в заголовке GIF .
Изменение PPI в PHP
Итак, вы, вероятно, спрашиваете, как установить PPI (DPI) в заголовке изображения? В PHP вы можете сделать это с помощью библиотеки Imagick (конечно, не для GIF):
$image = new Imagick('img.jpg'); // default 72 dpi image
$image->setImageResolution(500, 500);
$image->writeImage("img-500dpi.jpg"); // this image will have 500 dpi
Если вы загружаете эти изображения и пытаетесь их распечатать, например, в IrfanView он фактически использует информацию dpi для преобразования пикселей в целевую физическую единицу. Оба изображения будут напечатаны в разном размере.
Изображение PPI не будет работать в Интернете
Плохая новость заключается в том, что это не изменит ничего при отображении изображения на веб-странице. Якорная единица для дисплея всегда является пикселем в CSS. Так что img.jpg
и img-500dpi.jpg
будут иметь одинаковый размер в браузере. Даже если вы откроете изображения напрямую. Даже если вы используете физические единицы, такие как cm
:
img { width: 8cm; height: 6cm; }
оба изображения будут отображаться в одинаковом размере; физические единицы преобразуются в пиксели независимо от разрешения изображения с использованием фиксированное соотношение . И что удивительно, даже если вы попытаетесь напечатать необработанные изображения (не страницу) в Firefox, они оба будут напечатаны в одном размере. Не могу комментировать другие браузеры. Достаточно странно - это работает, как и ожидалось в Irfanview.
изображения PPI и сетчатки
Теперь с iPhone и т. Д. Изображения на сетчатке (то есть с высоким разрешением) становятся модными. Здесь много говорят о DPI (на самом деле PPI), но все это относится только к целевому устройству и медиазапросам CSS .
Нет ничего, что действительно распознало бы PPI вашего изображения; Вы должны указать фактические размеры изображения сетчатки с высоким разрешением в пикселях. Это пример значка 66x66 ( отсюда ):
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.box {
background:url('images/icon66x66.png') no-repeat top left;
background-size: 33px 33px;
}
}
Таким образом, вы можете «уменьшить» изображения с высоким разрешением, установив для них меньшие размеры в CSS . Но я бы рекомендовал делать это только для изображений сетчатки и в пределах правильного медиазапроса.
Итак, вам нужно сделать повторную выборку в PHP
Таким образом, на самом деле, если вы хотите, чтобы загруженное изображение выглядело меньше «в Интернете», лучшим способом будет его повторная выборка. Повторная выборка означает не только изменение заголовка, но и изменение фактической пиксельной матрицы изображения. Вот код, который я использую в PHP, который использует библиотеку GD:
$t = imagecreatefromjpeg($old_img_path);
$s = imagecreatetruecolor($new_width, $new_height);
$x = imagesx($t);
$y = imagesy($t);
imagecopyresampled($s, $t, 0, 0, 0, 0, $new_width, $new_height, $x, $y);
imagejpeg($s, $new_img_path);
chmod($new_img_path, 0644);
Имейте в виду, что для этого требуется довольно много памяти, которая может быть ограничена вашим хостинг-провайдером.