Нарезка изображений

Если вы создали большой и сложный рисунок для своей страницы, то имеет смысл его нарезать на несколько маленьких, которые затем поместить в таблицу с невидимыми разделителями (border=0). Зачем это надо? Во-первых, скорость загрузки такой страницы увеличится, за счет параллельной загрузки сразу нескольких файлов. Во-вторых, если правильно подойти к делу, то суммарный размер нарезанных картинок можно сделать меньшим, чем исходного файла. Допустим, на всей картинке у вас используется 256 цветов и вы записываете ее в соответствующий файл gif. Теперь если вы правильно порежете картинку, то обнаружите, что в отдельных областях достаточно 128 или 64 цветов (правильная нарезка как раз и состоит в выделении областей с небольшим количеством цветов). Убирая лишние цвета, вы уменьшите размер файла. Эта же техника позволит сделать как бы единую gif-картинку, содержащую больше 256 цветов - думаю понятно как.

Если кто не знает, поясняю - формат gif может показывать не больше 256 цветов, но эти цвета могут быть любыми из TrueColor (16 млн). Описания цветов, используемых на картинке, хранится в самом файле в проиндексированном виде, например так - цвет номер 0 имеет RGB составляющие 0,0,0 (черный), а номер 2 -255, 255, 255 (белый). Соответственно, чем больше цветов вы используете на картинке, тем больше размер файла. Если у вас на картинке используется только 16 цветов, а вы записали файл gif в 256-цветном режиме, то лишние цвета просто занимают место в таблице, увеличивая размер.

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

Теперь о самой нарезке - берем в правую руку скальпель, в левую - стакан со спиртом (ой, простите увлекся). Значит так - первый вариант - резать в Photoshop. Для этого надо расставить в изображении guides (ну не знаю как это будет по-русски - ну пусть направляющие) - это горизонтальные и вертикальные линии, не влияющие на само изображение. В первую очередь выберите режим показа guides - (View /Show guides или Ctrl+;) и показа линеек (View/Show Rulers или Ctrl+R). Теперь на линейке нажимаем на мышь и тянем ее с нажатой кнопкой на изображение - появляется синенькая линия - вот это guide и есть.
Guides Show
Теперь, если вы выберете инструмент перемещения, guides можно таскать туда-сюда или уничтожать (чтобы временно убрать показ guides, но не уничтожать их перейдите в режим Hide guides). Расставьте guides так, как вы собираетесь порезать картинку. Следующий момент - включаем режим "прилипания" инструментов к guides (View/Snap to Guides). Теперь все инструменты выделения будут липнуть к расставленным направляющим. Все что осталось сделать - выделить соответствующие области и скопировать их в отдельные файлы (или наоборот сделать так сказать crop) и записать их. При записи лучше пользоваться не самим Photoshop’ом, а какой-нибудь программой, позволяющей оптимизировать размер файла - например замечательной программой Smart Saver фирмы Ulead.

Для автоматической нарезки картинок существуют и специальные программы - Adobe ImageReady, Macromedia Fireworks и Image cutter (последняя freeware, остальные shareware). Я работал только с Image Ready, так что речь пойдет о ней. В общем все делается так же, как в Photoshop (они вообще очень похожи) - расставляете guides, а потом программа сама разрежет по ним картинку и даже создаст html-код для таблицы. Все быстро и здорово, но как всегда автоматика справляется с делом несколько хуже - Image Ready не позволяет оптимизировать размер таблицы цветов в каждом отдельном куске gif’a - дело в том, что таблица цветов строится одна для всего изображения еще до нарезки. Так что если вы хотите добиться супервысококачественных результатов используйте Photoshop+Smart Saver, а для быстрой работы - Image Ready. Предлагаю еще промежуточное решение - режете в Image Ready и задаете сохранить нарезанные куски ни в gif и ни в jpeg, а в TrueColor PNG-формате (новый такой очень многообещающий формат, в том числе поддерживает полупрозрачность (!)). Потом открываете PNG файлы и оптимизируете их до нужного количества цветов по отдельности.

В сложных случаях приходится нарезать изображение на большое количество кусков. Для их компоновки можно использовать вложенные друг в друга таблицы или атрибуты тэга table, позволяющие объединять столбцы (colspan) и строки (rowspan).

Успехов в первом опыте хирургического вмешательства.