Посты с тэгом «png»

  • Универсальный способ декорирования блоков

    В прошлой домашке я предложил читателям придумать способ вёрстки блоков со скругленными уголками и тенью. Если посмотреть на решения, то увидите, что большинство из них очень похожи друг на друга: 4 элемента, разбросанных по углам, одинаково «необычный» вид картинки, небольшие различия в наложении блоков. Давайте рассмотрим подробнее, за счет чего работают эти способы, а также почему эта статья не называется «Создание скруглённых блоков с тенью».

    Начать, в первую очередь, стоит с определения проблемы, которую нужно решить. Предположим, у нас есть блок со скруглёнными уголками и тенью:

    1

    Внутри блока есть контент неопределенной ширины и высоты, тень полупрозрачная; сам блок может иметь как заданную ширину (пиксели, проценты), так и автоматическую (width: auto). Наша задача: найти наиболее оптимальный способ вёрстки подобных блоков. Под оптимальностью я подразумеваю наименьшее количество элементов, наименьшее количество графических файлов, работа во всех современных браузерах, минимальное количество правок под конкретный браузер. Все эти принципы так или иначе влияют на производительность и надёжность нашего решения, особенно на крупных проектах.

    Справедливости ради стоит отметить, что мы будем рассматривать неопределенность габаритов контента в каком-то определенном диапазоне, например, 1000×1000 пикселей. То есть я буду рассказывать про какие-то небольшие контекстные всплывающие блоки, которыми сейчас переполнены различные сайты. Если вам нужно будет, например, сделать тень у блока, в котором содержится основной контент сайта, то лучше выбрать другой способ.

    Простой способ

    Если присмотреться внимательно на пример выше, то можно сразу же найти простое и оптимальное решение: мы разделим наши декорации на 4 зоны, в каждой из которых покажем определенный фрагмент одной фоновой картинки:

    2

    • Первая область: растягивается по горизонтали и вертикали, background-position: top left;
    • Вторая область: ширина фиксированная, растягивается по вертикали, background-position: top right;
    • Третья область: растягивается по горизонтали, высота фиксированная, background-position: bottom left;
    • Четвертая область: ширина и высота фиксированная, background-position: bottom right.

    Реализовать такую конструкцию — проще простого, но есть один нюанс: блоки должны растягиваться не на всю ширину контейнера, а на ширину контейнера минус ширина бокового блока (в данном случае это 2 и 4). То же самое касается высоты. Решается эта задача довольно просто. Не каждый знает, что задавать размеры блокам можно не только с помощью CSS-свойств width и height , но и с помощью комбинаций left/right и top/bottom у абсолютно спозиционированных элементов. Примерный код может выглядеть так:

    <style type="text/css">
    	.shadowed {
    		position: relative;
    		left: 200px;
    		top:  100px;
    		padding: 10px;
    		width: 30%;
    		max-width: 450px;
    	}
    
    	.sh {
    		position: absolute;
    		background: url(./shadow.png) no-repeat;
    		z-index: -1;
    	}
    
    	.tl {
    		/* задаем высоту */
    		top: -6px;
    		bottom: 12px;
    
    		/* задаем ширину */
    		left: -11px;
    		right: 14px;
    	}
    
    	.tr {
    		width: 25px;
    		top: -6px;
    		bottom: 12px;
    		right: -11px;
    		background-position: top right;
    	}
    
    	.bl {
    		left: -11px;
    		right: 14px;
    		bottom: -16px;
    		height: 28px;
    		background-position: bottom left;
    	}
    
    	.br {
    		width: 25px;
    		height: 28px;
    		right: -11px;
    		bottom: -16px;
    		background-position: bottom right;
    	}
    </style>
    <div class="shadowed">
    	Hello world
    	<div class="sh tl"></div>
    	<div class="sh tr"></div>
    	<div class="sh bl"></div>
    	<div class="sh br"></div>
    </div>
    

    Если вы откроете пример в любом современном браузере, то увидите, что всё работает замечательно. Но ребята из Редмонда не могли пройти мимо такой халявы и решили усложнить нам жизнь своим продуктом под названием Internet Explorer 6, в котором:

    • не работает растягивание с помощью top/bottom и left/right;
    • свойства bottom и right работают не правильно (позиция элемента отсчитывается от чётной ширины/высоты контейнера);
    • полупрозрачный PNG нельзя наложить и позиционировать как обычный фон.

    В принципе, все эти проблемы легко решаются с помощью expressions и DD_belatedPNG, однако это слишком тяжеловесное решение для старичка IE6, особенно если таких блоков у вас будет несколько на странице. Попробуем найти другое решение этих проблем, заодно разомнём мозг.

    Растягивание по горизонтали

    Начнем с того, что придумаем другой способ растягивания блока по горизонтали. Попробуем задать первому блоку ширину в 100%. Получим вполне ожидаемый результат: блок растягивается на всю ширину контейнера.

    3

    Если же этот блок сместить влево на ширину декорации справа, то мы как раз освободим место для блока номер 2. А если родителю указать overflow: hidden, то выпирающий слева кусок первого блока не будет виден. Это именно то, что нам нужно: при растягивании контейнера оба блока будут занимать всю доступную ширину и нормально стыковаться друг с другом:

    4

    В примере выше есть одно упрощение: контейнер начинается там же, где начинается тень. На самом деле тень должна выходить за границы блока, и в данном случае это проблема: overflow отрежет саму тень:

    5

    Решить эту проблему, опять же, довольно просто: обрамим первый и второй блок еще одним блоком, которому выставим width:100%; overflow: hidden и верхний и боковые паддинги по размеру тени. Так как мы задали ширину, то боковые паддинги увеличат размер блока до нужных значений и наша тень будет полностью отображаться. А overflow: hidden с основного контейнера можно убрать, и это даст нам дополнительное преимущество: мы сможем разместить внутренний элемент за границами контейнера (например, кнопку закрытия).

    Добавив padding у внутреннего контейнера, мы столкнёмся с тем, что первый блок будет меньшего размера, чем нам нужно. Но, опять же, так как у него задана ширина, мы можем «добить» ширину до нужного значения с помощью свойства padding-right:

    4_2

    Картинка

    Как вы знаете, полупрозрачные PNG в IE6 нельзя наложить в качестве фона, для этих целей используется фильтр AlphaImageLoader, который, к сожалению, нельзя позиционировать как фон. Но так совпали звёзды, что наше «необычное» растягивание блока из предыдущего шага поможет нам решить эту проблему. Первый блок мы сместили влево на ширину правой декорации, её же мы и отсекли. Соответственно, если мы перенесём правую декорацию в самое начало нашего спрайта, то мы сможем наложить одну и ту же картинку на оба блока:

    sprite-sample

    Правая декорация у первого блока будет скрыта overflow:hidden контейнера, а ширина второго блока равна ширине правой декорации и покажет только её. А если перенести вверх еще и нижнюю часть, то мы сможем наложить один и тот же спрайт на все 4 блока:

    sprite2

    Конечно же, первый и второй блок нужно будет сместить вверх на высоту нижней декорации.

    Расположение блоков справа и снизу

    Как я уже отметил, в IE6 неправильно работают CSS-свойства right и bottom, и для нас это проблема, так как мы имеем дело с полупрозрачными элементами. Любая нестыковка блоков даже в 1 пиксель будет сразу бросаться в глаза.

    Свойство right исправить очень просто: достаточно вместо него воспользоваться margin-left:100% — это разместит блок ровно у правого края, а с помощью left можно подтянуть блок в нужное место. С bottom немного сложнее: я не знаю альтернативных путей, кроме как позволить самому контенту опустить этот блок до нужного уровня. На предыдущем шаге мы добавили обёртку с двумя блоками внутри, туда же мы добавим и контент. Под обёрткой разместим наши нижние блоки.

    Эта обёртка и будет определять, на какой высоте окажутся блоки 3 и 4. Согласно спецификации CSS, элемент с position: absolute, у которого не указаны позиционирующие свойства — top/right/bottom/left — должен размещаться в том месте потока документа, где размещался бы статический элемент. Это очень удобно, так как благодаря этому можно делать различные трюки в виде выносных блоков, привязанных к определённому слову в тексте (например, смотрите выноску про Hyatt Hotel на сайте Башни Федерации).

    У этой обёртки задан overflow: hidden, который выполняет 2 функции: скрывает ненужные куски внутренних декоративных блоков и задает контекст форматирования. Это значит, что никакие марджины внутри не будут выпирать наружу, что гарантирует нам точную позицию нижних блоков.

    Нижние блоки

    Если помните, мы убрали overflow: hidden у самого контейнера. Поэтому, чтобы растянуть блоки 3, 4 так же, как и 1, 2, нам, похоже, придется добавить еще одну обёртку. Однако есть одно CSS-свойство, о котором кодеры часто забывают — это свойство clip. С помощью него мы и скроем выпирающий левый край.

    Результат

    Надеюсь, вы поняли саму идею, за счет чего работает большинство решений, присланных пользователями. Кратко подведу итог: для верстки декорированных блоков понадобится 5 элементов и одна картинка. Элементы располагаются следующим образом: одна обёртка, в которой находятся левый верхний и правый верхний углы, а также контент. У этой обёртки выставлен overflow: hidden, который скрывает выпирающие части у декоративных блоков, а также задает контекст форматирования. Эта же обёртка определяет позицию двух нижних блоков по вертикали. Выпирающая левая часть у левого нижнего блока отрезана с помощью clip. Спрайт мы подогнали таким образом, чтобы нам не нужно было указывать background-position, который всё равно не сработает в IE6, так как там мы воспользуемся фильтрами. В этом спрайте мы как бы вывернули блок наизнанку, переместив нижнюю часть вверх, а правую — влево.

    А вот и моё решение. Как видно из примера, решение полностью кроссбраузерное, для IE6 понадобилось всего лишь добавить padding у некоторых блоков (это можно сделать и с помощью одноразового expression).

    С помощью этого способа можно декорировать любой блок, где надо равномерно покрыть все 4 стороны. Например, можно плоскую и скучную обложку книги превратить в объёмную, как это сделано на сайте Аймобилко (правда, там используется немного другой способ из-за технических особенностей сайта):

    imobilco

    Единственный минус этого способа — сложность расчета паддингов у элементов: где-то нужно брать размер всей декорации, где-то только её часть. Но все эти расчеты очень легко алгоритмизируются, как бы намекая на то, что можно сделать удобный онлайн-сервис для быстрого создания декораций.

    Метки: , , ,
  • punypng

    Хоть и зарекался я не рекомендовать инструменты для пакетной оптимизации графики, но тут все-таки придется.

    Встречайте нового игрока — punypng. Новый сервис, очень похожий (но пока не такой удобный) на известный smush.it.

    После публикации на SM первой части статьи про оптимизацию PNG со мной связались ребята из проекта Ask.com — довольно известного на Западе поисковика. Они как раз начали разрабатывать очередной оптимизатор картинок для веба. Немного проконсультировавшись, они добавили чистку прозрачных пикселей, что в большинстве случаев дает довольно ощутимое сжатие. Так что я теперь являюсь консультантом проекта punypng, а этот пост — наглый пиар :)

    А теперь немного конкретики. Я прогнал несколько тестовых изображений через этот сервис и могу сказать, что результат был действительно впечатляющим. Практически на всех изображениях удавалось достичь дополнительного сжатия. Даже на изображениях, которые я оптимизировал вручную и прогнал через OptiPNG.

    Чтобы сравнить результаты, я дополнительно прогнал несколько изображений (наиболее показательным оказалось вот это) через smush.it и ImageOptim.

    smush.it использует утилиту pngcrush, которая по всем меркам является устаревшей. Она пытается перепаковать изображения, не меняя их тип (например, черно-белая RGB-картинка не будет преобразована в Grayscale). Утилита OptiPNG, которая является ответвлением от pngcrush, делает такие преобразования автоматически, но при этом работает гораздо медленнее (поэтому на smush.it используется pngcrush). Так что от этого сервиса ждать каких-то выдающихся результатов пока не приходится. Однако на выходе мы получаем «безопасное» преобразование, которое гарантирует, например, что полноцветный полупрозрачный PNG не будет преобразован в полупрозрачный PNG с палитрой (разница в отображении в IE6).

    ImageOptim, в свою очередь, пытается прогнать изображение через несколько библиотек, выбирая наилучший результат. Среди этих библиотек — PNGOUT Кена Сильвермана, которая априори должа выдавать лучший результат, так как использует собственный алгоритм упаковки данных. Даже она не смогла сжать лучше, чем punypng. Не говоря уже о том, что punypng отработал горазо быстрее, чем ImageOptim.

    Так что от всей души советую попробовать этот сервис. Я, в свою очередь, постараюсь описать больше алгоритмов оптимизации изображений, чтобы сделать сервис еще лучше.

    UPD: Окей, значит, расклад такой.

    PNGOUT сам не умеет перебирать фильтры. Как правильно заметил Павел у себя в блоге, с этим успешно справляется OptiPNG, выдавая в консоль статистику обработки файла. Соответственно, правильный способ максимального сжатия файла такой: сначала пропускаем через OptiPNG, получаем от него номер N примененного фильтра и отдаем его в качестве параметра -fN для PNGOUT.

    По поводу ImageOptim. Судя по исходнику, там PNGOUT используется без указания правильного фильтра, и, более того, применяет библиотеки не друг за другом на одном и том же файле, а независимо, выбирая наименьший результат (поправьте меня если не прав, так как Objective-C не знаю). Поэтому и результат сжатия у меня получился не самый лучший.

    PNGSquash, напротив, применяет библиотеки в цепочке, поэтому получается так сильно сжать файлы. Так что эта программка работает лучше, чем ImageOptim.

    Сейчас узнаю, как работает punypng.

    UPD2: punypng не использует PNGOUT из-за лицензионных ограничений. Есть вероятность того, что ребята сделают офлайновую версию punypng: для этого нужно всей толпой проголосовать за это предложение.

  • Руководство по оптимизации PNG

    Специально для Smashing Magazine написал руководство по оптимизации PNG (вернее, наоборот: руководство по оптимизации изображений для PNG). По сути, это собранные вместе статьи из Техногрета и моего блога, которые были немного переосмыслены, дополнены, упрощены и переведены на английский язык.

    Так как статья получилась довольно большой, ее разделили на две части. Вторая часть выйдет через неделю. Комментарии, вопросы и пожелания можно оставлять здесь.

  • Пакетная оптимизация PNG

    В последнее время все чаще и чаще слышу советы запускать какую-нибудь утилитку оптимизации графики вроде OptiPNG на всей папке с картинками, чтобы не запариваться и одним махом ужать все файлы. Например, вот так:

    optipng -o5 *.png

    Создают даже целые сервисы вроде smush.it.

    Так вот, лично я никогда не пользовался такими советами. И пока не рекомендую делать этого ребятам, которые действительно хотят качественно оптимизировать графику. По одной простой причине: «меньше» не всегда значит «лучше».

    Что бы не говорили злые языки, но доля IE6 на рынке все еще слишком велика, чтобы сбрасывать его со счетов. Именно у этого браузера больше всего проблем с отображением разных вариаций PNG. В частности, полноцветный полупрозрачный PNG (PNG24 в терминологии фотошопа) он просто так не покажет, нужно использовать фильтр AlphaImageLoader или VML. А у полупрозрачных индексированных PNG покажет только непрозрачные пиксели. Из этого следует вывод, что нужно контролировать оптимизацию каждого файла.

    Рассмотрим несколько примеров. Для начала возьмем полупрозрачную плашку:

    …и вызовем на ней OptiPNG:

    optipng -o5 mate.png

    Он нам скажет, что самым оптимальным способом хранения этого изображения будет 8-битная палитра. Но так как на этой картинке нет ни одного непрозрачного пикселя, то в IE6 не отобразится вообще ничего. Поэтому для данного изображения нужно отключить оптимизацию по цвету:

    optipng -o5 -nc mate.png

    Рассмотрим второй пример:

    При попытке оптимизировать этот файл OptiPNG преобразует изображение в 8-битную палитру, однако это будет не оптимальный способ хранения изображения и вы увидите сообщение, что файл уже оптимизирован. Но я готов пожертвовать «гладкими» краями в IE6, лишь бы не извращаться с фильтрами и VML, потому что этот файл будет использоваться 50 раз на странице. Кто не в курсе: AlphaImageLoader жрет очень много памяти и процессорного времени, VML менее требователен, но все равно больше, чем обычная картинка или фон. Поэтому в данном случае нужно форсировать преобразование палитры:

    optipng -o5 -force corner.png

    Еще одним плюсом ручной оптимизации для меня является соответствие моих ожиданий действительности. Очень часто при сохранении черно-белых PNG я забывают выставить им режим цветовой Grayscale, а лог OptiPNG постоянно мне об этом напоминает, когда процент сжатия меньше 20. Кстати, smush.it не умеет преобразовывать цветовую палитру в черно-белую.

  • Спрайты в вебе. Часть 1

    Про CSS-спрайты сейчас пишут много и везде, но, как правило, все ресурсы перемалывают одну и ту же идею: сохранение кучи мелких картинок в одну для увеличения общей скорости загрузки сайта. В этой статье из двух частей я попробую собрать все свои знания по этой теме и продемонстрировать некоторые особенности применения спрайтов в вебе.

    Что такое спрайты?

    Думаю, вы и без меня знаете, что это такое. Спрайты — это несколько небольших картинок, объединенных в один графический файл.


    Спрайт с сайта «Житлобуд»

    Такой подход дает сразу несколько преимуществ. Во-первых, объем одного файла как правило меньше, чем сумма объемов отдельных файлов. Это можно объяснить снижением издержек на сохранение одного изображения: всякие там заголовки, указывающие на формат изображения, или общая палитра цветов, если речь идет об индексированном PNG или GIF. Бородатые кодеры могут вспомнить рекомендации 90-х годов по разбивке одного большого файла на несколько мелких, чтобы создать иллюзию у пользователя, что сайт грузится быстрее :) Такой подход создавал именно иллюзию, так как суммарный объем нескольких файлов был больше, чем объем одного файла, а сама картинка грузилась дольше.

    Во-вторых — самое главное — сокращается количество HTTP-запросов к серверу. Некоторые ребята не обращают на это внимание, а зря: зачастую отдельный запрос обходится намного дороже, чем десяток «лишних» данных в одном изображении. Не буду подробно расписывать этот момент, так как это тема для отдельного разговора.

    Итак, мы уже знаем, что спрайты — это круто и модно. Ограничено ли применение спрайтов только группировкой разных изображений в одно?

    Назад в прошлое

    Будучи неопытным юнцом, я очень любил играть в игры. Больше всего меня интересовало то, как же эти игры делаются. Тогда еще не было повсеместного использования 3D-графики, все игры, в которые я играл, в основном были 2D-аркадами (Another World, Commander Keen, Moles, Prince of Persia, эх…), активно использующими спрайты. Вообще, слово «спрайт» получило широкое распространение именно благодаря видеоиграм, и именно видеоигры больше всего повлияли на меня как на веб-разработчика.

    Помимо обычной группировки изображений можно выделить еще несколько типов спрайтов.

    Раскадровка


    Слон с сайта «Паритет98»

    Раскадровка, по сути, представляет собой набор кадров для анимации, сохраненных в одном файле. Для такого спрайта пишется контроллер на JavaScript, который управляет скоростью и направлением смещения спрайта. По сравнению с обычной GIF-анимацией это дает нам следующие преимущества:

    1. Можно использовать JPEG или полупрозрачный PNG.
    2. Более широкие возможности по оптимизации изображения.
    3. Можно самостоятельно управлять скоростью и направлением анимации, имея один и тот же набор кадров (то есть используя всего одно изображение).

    При создании такого спрайта нужно помнить следующее. Для начала нужно выбрать размер кадра; такой, чтобы в нем без проблем уместилась любое изображение из раскадровки +10-20% свободного пространства по бокам для надежности. Это позволит в дальнейшем без особых хлопот модифицировать изображение.

    Затем нужно точно совместить изображения в кадрах, чтобы при анимации не были заметны рывки. Если все сделаете правильно, то на создание JS-контроллера уйдет минимум сил и времени.

    Циклический спрайт

    Этот тип спрайтов в основном применяется для создания механизмов наподобие прелоудера: некая повторяющаяся текстура на блоке неопределенной ширины.

    Тут, конечно, руки так и чешутся использовать GIF-анимацию, однако перфекционистов вроде меня может не устроить плавность движения. Сравните:

    В первом случае я сделал GIF-анимацию с задержкой 0 ms (то есть вообще без задержки) между кадрами. В предпросмотре фотошопа все работает довольно плавно, а в браузере отчетливо заметны задержки между кадрами. В JS-анимации, используя контроллер из предыдущего примера, задержек никаких нет.

    К минусам данного подхода можно отнести более высокие требования системным ресурсам, поэтому если у вас много прелоудеров на странице нужно десять раз подумать, что лучше использовать, GIF или JS.

    Слои

    Иногда случается так, что для изображения не получается выбрать самый оптимальный формат. Наиболее яркий пример — фотография с полупрозрачными декорациями:

    В этом случае намного эффективнее будет разделить изображение на два слоя: первый — сердцевина — сохранить в JPEG, а второй — окантовка — в полупрозрачный PNG.

    Таким образом мы убиваем сразу двух зайцев: снижаем вес изображения и улучшаем его качество, используя для каждого слоя наиболее подходящий формат.

    Естественно, этот пример довольно простой и примитивный: уверен, что многие так и поступили бы с этой картинкой. Наибольший эффект от такого типа спрайтов достигается в том случае, когда сердцевина имеет не прямоугольную форму. Хороший пример: раздел «Отделение Imperia» сайта Imperia Private Banking:

    imperia-branch

    Огромный узор на двери был разделен на 2 слоя: сердцевину и окантовку, каждый слой был по-своему оптимизирован, что в итоге позволило мне сэкономить около 200 КБ. Как быстро разделить изображение на два таких слоя я писал в статье «Про PNG. Часть 2».

    Векторные маски

    К сожалению, не всегда подобные картинки можно эффективно разделить по слоям. Например, когда сердцевина не прямоугольной формы содержит фотографическое изображение. В этом случае на помощь приходят современные браузерные технологии, а именно SVG, Canvas и VML. С помощью них можно наложить векторные маски на прямоугольную JPEG-картинку, добившись необходимого внешнего вида. Для этих целей я написал специальную библиотеку под названием ictinus, которая занимается решением таких задач. Хороший пример использования использования спрайтовых масок (и моей библиотеки :)) — главная страница сайта «Аймобилко»:

    imobilco

    В середине страницы находится красивый тизер продукта, у которого изображение должно принимать «неправильную» форму (в данном случае — коробка компакт-диска с загнутым углом). Так как фон не однородный (и тоже, кстати, меняется), единственным очевидным способом решения этой задачи было создание отдельного PNG-изображения весом более 100 КБ для каждого такого продукта. Меня такой расклад не устраивал, поэтому я решил в качестве эксперимента применить ictinus (на тот момент был в состоянии очень сырой альфа-версии). На прямоугольное JPEG-изображение накладывается векторная маска (в зависимости от типа продукта), затем под эту картинку ставится PNG-тень. Результат оказался более чем убедительным. Помимо сильной экономии на траффике пользователя я сэкономил нервы заказчику: теперь ему достаточно любому продукту в админке поставить галочку «Показывать на главной», а не готовить в фотошопе новые картинки.

    ***

    С типами спрайтов, пожалуй, всё (ничего не забыл?), в следующей части рассмотрим способы хранения данных в спрайтах и некоторые рекомендации по использованию.

    Скачать JS-котроллер для спрайтовой анимации



    Метки: , , , ,

← cтарое