Суть теста – генерируем 10к тегов на одной странице и меряем reflow.

Результаты оказались очень любопытные.

Пока даю весьма скромную таблицу, с малым набором тегов.

Очень странные результаты показал IE – почти нулевые рефлоу (поэтому пока не заполняю таблицу с результатами IE*)

Вывод:

• в Opera и Safari inline элементы в 2 раза быстрее блочных
• в FF все наоборот, блочные быстрее инлайновых в 2 раза
• существую теги, которые серьезно влияют на рефлоу (например i в Опере и FF )

Скоро проведу более детальное исследование + проверим скорость основных css свойств.

upd. имена тегов в таблице ведут на соответствующие тесты

Честно говоря, я впервые встретил именно такой способ уменьшения размера psd-фалов , хотя на Хабре он упоминался. Ранее мне были известны некоторые иные методики сжатия psd, о которых я и хочу рассказать Вам сегодня.

1) Удаление лишних слоёв

Один из самых эффективных способов уменьшить размер psd-файла – это удалить все лишние слои в нем.

Плюсы данного метода:

• уменьшает размер файла;
• улучшает работоспособность фотошопа с данным документом;

Минусы метода:

• иногда заказчики просят вернуть исходный вариант, как когда-то было и это «когда-то» часто находится в скрытом слое, который мы успели благополучно удалить :)

2) Crop документа

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

Плюсы данного метода:

• уменьшает размер файла;
• улучшает работоспособность фотошопа с данным документом;

Минусы метода:

• иногда заказчики просят сдвинуть изображение (левей\правей\выше\ниже), но к сожалению, оно уже будет обрезанным;
• бывает, что дизайнеры применяют к слою стили, которые зависят от размера картинки, например Gradient Overlay. Crop Tool может привести к изменению внешнего вида слоя и как следствие всего макета. Поэтому желательно, чтобы Crop выполнял сам дизайнер. Если же дизайнер в зоне недосягаемости и приходится применять Crop самостоятельно, тогда нужно тщательно сверять полученный макет с оригиналом на предмет отличий.

Предотвратить смещение стиля можно если его «растеризировать». Для этого необходимо «стилизированный слой» объединить с чистым слоем (Merge Layers или Cntrl+E), в таком случае редактировать стиль слоя уже будет невозможно.

3) Заливка документа однородным цветом

Каждый раз, когда мы сохраняем psd-документ, автоматически создается «превью» (preview layer) макета. Это делается для того, чтобы можно было быстро просмотреть psd-файл без открытия всех его данных и применения фильтров в реальном времени. Конечно же это «превью» занимает место и наша задача состоит в том чтобы его уменьшить.

Чаще всего, для этого создается верхний слой и заливается однородным цветом (как правило белым), бывают еще случаи когда просто отключают все слои, о чем я писал выше :)

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

Плюсы данного метода:

• уменьшает размер файла

Минусы метода:

• мы лишаемся превью документа, для просмотра содержимого файла приходится открывать документ и скрывать верхний слой;
• создаем лишний (маскирующий) слой.

4) Объединение слоев.

Часто бывает, что документ содержит избыточное количество слоев, которые можно смело слить в один, самый яркий пример тому – это слить все фоновые картинки в одну. Однако на этом можно не останавливаться – наверняка найдется десяток элементов в макете, которые состоят из нескольких слоев, объединение которых даже улучшит «юзабельность» и уменьшат размер psd.

Плюсы данного метода:

• уменьшает размер файла

Минусы метода:

• ограничиваем себя в удобстве редактирования слитых слоев

5) Сжатие архиватором.

Сжатие в архив, пожалуй, самый часто используемый метод для уменьшения размера psd. Это простой и эффективный способ уменьшить размер и количество файлов, что важно при пересылке документов.

Существует множество архиваторов, чаще всего приходится работать с тремя:

• zip
• rar
• 7z (7-zip)

Zip:

наиболее часто используемый мною формат. Причина проста – он распространен, многие программы могут просматривать содержимое архивов, большинство операционных систем имеют нативную поддержку zip. Именно в этом формате я отправляю результаты своих трудов. Архивы старых проектов также храню в zip, из-за того, что поиск по содержимому не вызывает никаких проблем

Rar:

достаточно распространен в постсоветском пространстве, на западе применяется редко. Поэтому если вы работаете с иностранным клиентом – лучше забыть о rar.

7zip:

данный формат хорош тем, что бесплатен, но распространен в основном среди разработчиков, жмёт лучше всех из этой тройки. Применяю его редко и чаще всего в служебной переписке с коллегами, у которых он установлен. Клиентам посылать в 7zip я бы не стал – большая вероятность того, что у получателя не окажется инструмента для работы с архивом.

PS. 1-3 методы можно без труда автоматизировать средствами Action в Photoshop.

PPS. Эти методы удобно применять при отсылке PSD клиентам\верстальщикам и тд.