Наверняка каждый из вас делал сайт, где администратор, или даже пользователи, могу закачивать изображения, которые должны отобразится на сайте. Такие изображения можно разделить условно на 2 группы: те, которые вставляются в тело статей, скажем с помощью wysiwyg-редактора, и те, которые закачиваются в отдельное поле и потом выводятся в заранее отведенном месте. Ко вторым относятся всевозможные картинки к новостям, фотографии в фото-галереях, какие-нибудь логотипы партнеров и прочее.
И те и другие требуют какой-то обработки после размещения, но каждая группа имеет свои особенности.
Первая группа изображений (вставляемая через wysiwyg) сложно поддается нахождению, потому что изображения приходится доставать из супа тегов. Но зато такие изображения зачастую требует достаточно простой обработки, пропорционального изменения размеров. Именно из-за сложности нахождения и простоты обработки, чаще всего их не обрабатывают автоматически, а оставляют на откуп администраторам сайтов. Те, в зависимости от своей грамотности и лени, меняют размеры перед размещением на сайте, или нет. Но иногда администраторы даже самых опрятных сайтов не заморачиваются по этому поводу, отчего изображения ужасно долго грузятся, и, в зависимости от браузера, либо выглядят паршиво, либо тормозят при прорисовке. Конечно, скриншоты — еще не самый плохой вариант. Зачастую на разных сайтах можно встретить фотографии с фотокамер, разрешением 3000 пикселей и выше.
Скажу по секрету, мой коллега nex работает над решением этой проблемы с помощью не безызвестного проекта jevix. Думаю, скоро он опубликует статью на эту тему.
Вторая группа изображений отличается простотой получения изображения для обработки и сложностью самой обработки. Часто для одной фотографии нужно создать несколько изображений разного размера и разного качества, так называемые превьюшки, thumbnails. Честно говоря, меня просто удивляет огромное количество библиотек и способов создания превьюшек, имеющих в своем арсенале только 2 параметра — ширина и высота нужной картинки, и, иногда, еще логическая переменная, означающая, сохранять ли пропорции. А между тем, различных способов кадрирования изображения очень много. Тем не менее, на мой взгляд, они прекрасно поддаются класификации и алгоритмизации. Именно этому я бы хотел посвятить большую часть топика.
Итак, есть закаченные изображения и есть разные места, где они должны выводиться. Начнем с простого — отдельное окно, либо lightbox. Нужно сохранить соотношение сторон и как-то ограничить размеры изображение, чтобы пользователю не пришлось долго ждать загрузки. Скажем 1024×768 пикселей, что для фотографий на сайте вполне достаточно.
Именно с этой простой задачей обычно призваны справиться большинство библиотек для создания превьюшек (хотя изображения таких размеров не называют превьюшками, технически разницы нет, нам нужно откорректировать размер изображения по некоторым правилам).
Некоторые библиотеки позволяют дополнительно указать флаг, указывающий на то, что не нужно соблюдать пропорции. Результат получается таким:
Честно говоря, мне ни разу не приходилось встречаться со случаями, где такой способ масштабирования был бы уместен.
С большими картинками разобрались. Что же с маленькими, которые самые настоящие превьюшки. Очень часто такие превьюшки располагаются одним списком и к ним добавляется требование — они должны иметь строго указанный размер. Но искажать пропорции попрежнему нельзя. Что же делать? Выручает добавление паддингов — однотонных, в случае однотонного фона под превьюшками, либо прозрачных (хотя это не самый лучший вариант).
Но бывает, что и такие паддинги смотрятся немного не к месту. А вот, если бы изображение растягивалось до большей из сторон, а все лишнее отрезалось — было бы самое то.
Может показаться, что обрезать изображения не очень гуманно. Но на самом деле, это так только для постеров и логотипов. А если обрезать фотографии, зачастую ничего важного не теряется. Зато при обрезании фотографий есть другая особенность — лица людей чаще всего находятся в верхней части изображения. Отсюда еще одно правило, накладываемое при обрезании фотографии — обрезать сверху нужно чуть меньше, чем снизу.
В идеале, положение исходной картинки на результирующей должно настраиваться. Может получится так, что важна только нижняя, или только верхняя часть (актуально, скажем, для грамот).
Иногда картинку нужно вырезать способом, прямо противоположным самому первому. Вместо того, чтобы сделать изображение не больше заданного размера, нужно сделать его не меньше заданного размера. А все, что выступает за края результирующего прямоугольника обрезать не нужно.
Иногда бывает нужен какой-то определенный размер по одной из координат, а размер другой координаты может быть произвольным.
Например, изображение к статье, которое должно занимать ровно половину ширины колонки. Другой пример — кадры их фильма, которые идут вряд и все должны иметь одинаковую высоту.
А недавно передо мной встала вот такая задача:
Закачиваемые логотипы должны располагаться в одну строчку фиксированной высоты. Если задать размер 150×70 и строгое соблюдение размеров с добавлением паддингов, то логотипы с маленькой шириной (первый на рисунке) будут занимать все 150 пикселей в ширину. А если просто сделать фиксированную высоту, то очень низкие и широкие логотипы (второй и третей) будут занимать в ширину слишком много места. Решение пришло в небольшом изменении моей классификации, а именно, я понял, что ширина и высота могут быть независимо друг от друга строгими или нет. Т.е. в данном случае алгоритм был такой — превьюшка размером 150×70 пикселей со строгим соблюдением высоты, но не ширины.
Как вы понимаете, все эти теоретические выкладки, без практики, гроша ломаного не стоят. Но, к сожалению, кода сегодня не будет. По большей части из-за того, что реализаций несколько и они под разные платформы (PHP и Django) и нужно немного привести их в порядок. Думаю, что когда доведу до блеска версию для Django, сделаю про нее отдельный пост, потому что там будет еще много плюшек, и вскользь упомяну про версию под PHP.
Вместо этого хочу привести список простых флагов и параметров, которые в 90% случаев спасают от написания отдельной функции под каждую превьюшку.
size — массив из 2-х чисел, ширины и высоты. Любое значение (но не оба сразу) может быть 0 (или NULL), что означает, что этот размер не нужно учитывать.
method — метод расчета размера. Либо «не больше заданного размера», либо «не меньше заданного размера», либо «в точности заданный размер».
enlarge — логическое значение, увеличивать маленькие изображения. Не всем нравится, кода картинку 100×100 растягивают до 1024×768
strict size — массив из 2-х логических значений. Означает строгое соответствие размера в результирующем изображении для каждого измерения.
align — массив из 2-х цифр. Означает смещение исходного изображения в результирующем в процентах отдельно для каждого измерения. Как для случаев, когда результирующее изображение больше, так и когда меньше.
back color — цвет, которым заполнятся паддинги.
И те и другие требуют какой-то обработки после размещения, но каждая группа имеет свои особенности.
Первая группа изображений (вставляемая через wysiwyg) сложно поддается нахождению, потому что изображения приходится доставать из супа тегов. Но зато такие изображения зачастую требует достаточно простой обработки, пропорционального изменения размеров. Именно из-за сложности нахождения и простоты обработки, чаще всего их не обрабатывают автоматически, а оставляют на откуп администраторам сайтов. Те, в зависимости от своей грамотности и лени, меняют размеры перед размещением на сайте, или нет. Но иногда администраторы даже самых опрятных сайтов не заморачиваются по этому поводу, отчего изображения ужасно долго грузятся, и, в зависимости от браузера, либо выглядят паршиво, либо тормозят при прорисовке. Конечно, скриншоты — еще не самый плохой вариант. Зачастую на разных сайтах можно встретить фотографии с фотокамер, разрешением 3000 пикселей и выше.
Скажу по секрету, мой коллега nex работает над решением этой проблемы с помощью не безызвестного проекта jevix. Думаю, скоро он опубликует статью на эту тему.
Вторая группа изображений отличается простотой получения изображения для обработки и сложностью самой обработки. Часто для одной фотографии нужно создать несколько изображений разного размера и разного качества, так называемые превьюшки, thumbnails. Честно говоря, меня просто удивляет огромное количество библиотек и способов создания превьюшек, имеющих в своем арсенале только 2 параметра — ширина и высота нужной картинки, и, иногда, еще логическая переменная, означающая, сохранять ли пропорции. А между тем, различных способов кадрирования изображения очень много. Тем не менее, на мой взгляд, они прекрасно поддаются класификации и алгоритмизации. Именно этому я бы хотел посвятить большую часть топика.
Теория
Итак, есть закаченные изображения и есть разные места, где они должны выводиться. Начнем с простого — отдельное окно, либо lightbox. Нужно сохранить соотношение сторон и как-то ограничить размеры изображение, чтобы пользователю не пришлось долго ждать загрузки. Скажем 1024×768 пикселей, что для фотографий на сайте вполне достаточно.
Именно с этой простой задачей обычно призваны справиться большинство библиотек для создания превьюшек (хотя изображения таких размеров не называют превьюшками, технически разницы нет, нам нужно откорректировать размер изображения по некоторым правилам).
Некоторые библиотеки позволяют дополнительно указать флаг, указывающий на то, что не нужно соблюдать пропорции. Результат получается таким:
Честно говоря, мне ни разу не приходилось встречаться со случаями, где такой способ масштабирования был бы уместен.
С большими картинками разобрались. Что же с маленькими, которые самые настоящие превьюшки. Очень часто такие превьюшки располагаются одним списком и к ним добавляется требование — они должны иметь строго указанный размер. Но искажать пропорции попрежнему нельзя. Что же делать? Выручает добавление паддингов — однотонных, в случае однотонного фона под превьюшками, либо прозрачных (хотя это не самый лучший вариант).
Но бывает, что и такие паддинги смотрятся немного не к месту. А вот, если бы изображение растягивалось до большей из сторон, а все лишнее отрезалось — было бы самое то.
Может показаться, что обрезать изображения не очень гуманно. Но на самом деле, это так только для постеров и логотипов. А если обрезать фотографии, зачастую ничего важного не теряется. Зато при обрезании фотографий есть другая особенность — лица людей чаще всего находятся в верхней части изображения. Отсюда еще одно правило, накладываемое при обрезании фотографии — обрезать сверху нужно чуть меньше, чем снизу.
В идеале, положение исходной картинки на результирующей должно настраиваться. Может получится так, что важна только нижняя, или только верхняя часть (актуально, скажем, для грамот).
Иногда картинку нужно вырезать способом, прямо противоположным самому первому. Вместо того, чтобы сделать изображение не больше заданного размера, нужно сделать его не меньше заданного размера. А все, что выступает за края результирующего прямоугольника обрезать не нужно.
Иногда бывает нужен какой-то определенный размер по одной из координат, а размер другой координаты может быть произвольным.
Например, изображение к статье, которое должно занимать ровно половину ширины колонки. Другой пример — кадры их фильма, которые идут вряд и все должны иметь одинаковую высоту.
А недавно передо мной встала вот такая задача:
Закачиваемые логотипы должны располагаться в одну строчку фиксированной высоты. Если задать размер 150×70 и строгое соблюдение размеров с добавлением паддингов, то логотипы с маленькой шириной (первый на рисунке) будут занимать все 150 пикселей в ширину. А если просто сделать фиксированную высоту, то очень низкие и широкие логотипы (второй и третей) будут занимать в ширину слишком много места. Решение пришло в небольшом изменении моей классификации, а именно, я понял, что ширина и высота могут быть независимо друг от друга строгими или нет. Т.е. в данном случае алгоритм был такой — превьюшка размером 150×70 пикселей со строгим соблюдением высоты, но не ширины.
Практика
Как вы понимаете, все эти теоретические выкладки, без практики, гроша ломаного не стоят. Но, к сожалению, кода сегодня не будет. По большей части из-за того, что реализаций несколько и они под разные платформы (PHP и Django) и нужно немного привести их в порядок. Думаю, что когда доведу до блеска версию для Django, сделаю про нее отдельный пост, потому что там будет еще много плюшек, и вскользь упомяну про версию под PHP.
Вместо этого хочу привести список простых флагов и параметров, которые в 90% случаев спасают от написания отдельной функции под каждую превьюшку.
size — массив из 2-х чисел, ширины и высоты. Любое значение (но не оба сразу) может быть 0 (или NULL), что означает, что этот размер не нужно учитывать.
method — метод расчета размера. Либо «не больше заданного размера», либо «не меньше заданного размера», либо «в точности заданный размер».
enlarge — логическое значение, увеличивать маленькие изображения. Не всем нравится, кода картинку 100×100 растягивают до 1024×768
strict size — массив из 2-х логических значений. Означает строгое соответствие размера в результирующем изображении для каждого измерения.
align — массив из 2-х цифр. Означает смещение исходного изображения в результирующем в процентах отдельно для каждого измерения. Как для случаев, когда результирующее изображение больше, так и когда меньше.
back color — цвет, которым заполнятся паддинги.
