Вирізання та злиття зображень
Розрізання зображення на фрагменти з подальшим їх об'єднанням в одне ціле зображення - давній прийом, що увійшов до арсеналу верстки веб-сторінок. Попередньо підготовлений малюнок розрізають на частини в графічному редакторі, зберігають їх як окремі графічні зображення, а потім об'єднують їх разом за допомогою таблиці.
Розглянемо спочатку, для чого використовується розрізання зображень і які переваги це в кінцевому підсумку надає, а потім, як використовувати таблицю на практиці.
Плюси розрізання зображень
Створення посилань
Окремі малюнки за потреби можна перетворювати на посилання, при цьому для них можна призначати власний опис (атрибут title) і альтернативний текст (атрибут alt), який видно при відключенні показу зображень в браузері або при наведенні курсора миші на зображення.
Ефект перекочування
Набір окремих фрагментів дозволяє створювати rollover або ефект перекочування - динамічну зміну одного малюнка на інший при наведенні на нього курсора миші, і знову на попередній, коли курсор відводиться далі.
Зменшення обсягу файлів
Окремими частинами зображення зручніше маніпулювати, підбираючи для них графічний формат і його параметри таким чином, щоб обсяг файлу був мінімальним при збереженні прийнятної якості зображення. У результаті набір графічних файлів буде займати менше місця і завантажуватися швидше, ніж один файл, що містить ціле зображення.
Анімований GIF
Використання анімованого GIF для зображень великого розміру може призвести до значного збільшення обсягу файлу. Проте можна використовувати хитрість і замінити лише частину зображення анімацією, а інші фрагменти залишити статичними. При цьому загальний обсяг кількох файлів буде набагато меншим, ніж анімація одного зображення.
Особливості верстки
Зображення на веб-сторінці за своєю природою прямокутні, але, розрізавши один малюнок на складові елементи, отримаємо конструктор, з якого можна скласти іншу фігуру. Це нагадує дитячі кубики, на одну з сторін яких наклеєна картинка. Складати подібні фігури на веб-сторінці потрібно за різними причинами, наприклад, замість фрагмента зображення потрібно додати текст. Крім того, деякі малюнки можна замінити їх фоновим аналогом, і тоді кінцеве зображення, зберігаючи свою цілісність, буде займати всю доступну область документа.
Психологічний аспект
Коли один малюнок складається з багатьох фрагментів, то браузер завантажує їх у кілька потоків і показує ті, які завантажились першими. Тому зображення з'являється як елементи мозаїки. І це одразу привертає увагу і здається, що завантаження відбувається швидше. Таким чином, з технічної точки зору один малюнок завантажується швидше, а з позиції людського сприйняття здається, що набір маленьких малюнків швидше з'являється.
Підготовка зображення
Як приклад зображення, де потрібно розрізання, візьмемо рис. 1. Кожна з п'яти іконок є посиланням на відповідний розділ, крім того, зображення з назвою сайту є посиланням на головну сторінку.
Теоретично, у цьому випадку можна обійтися і без розрізання, якщо використовувати зображення-карту (теги <map> і <area>). Однак цей варіант неприйнятний через наступні обставини. За задумкою розробників при відкритті будь-якого розділу, відповідна іконка трансформується, що в цілому змінює зображення цілком (рис. 2). Якщо використовувати зображення-карту, то доведеться підготувати шість різних зображень (одне для головної сторінки і ще п'ять для кожного розділу), що вплине на обсяг переданих даних, швидкість відображення сайту та якість малюнків. Треба також врахувати, що зображення, представлене на рис. 1, подане в зменшеному масштабі, ніж воно використовується насправді, тому обсяг одного файлу буде досить великим.
Тепер потрібно вирішити, як розрізати зображення. Варіантів тут може бути кілька - в кінцевому підсумку це залежить від волі автора, призначення малюнка та його змісту.
Розрізання зображення
Розрізання та «складання» малюнка краще довірити спеціалізованій програмі, зокрема, це вміють робити Adobe Photoshop, Adobe ImageReady, Macromedia FireWorks та ін. Надалі, для цієї будемо цілі використовувати Photoshop, тож всі згадки про інструменти та меню стосуються саме цієї програми.
Для зручності розрізання зображення спочатку слід додати направляючі лінії, по яким потім буде відбуватися поділ на фрагменти (рис. 3).
Тепер використовуємо інструмент Slice (
, активація клавішею ) і по направляючим обводимо потрібну прямокутну область. Позначена область позначається синім обрамленням з номером фрагмента в лівому верхньому куті. Розмір областей можна змінювати за допомогою спеціального інструменту Slice Select - 
. Клацаємо мишкою з цим інструментом на бажаному фрагменті - колір рамки навколо області стає жовтим, а також змінюється тон рисунка. Після чого курсором миші можна переміщати межі фрагмента за спеціальні маркери по боках та в кутках області (рис. 4).
Під час зміни розмірів фрагментів слід слідкувати за тим, щоб області не перетинались одна з одною, і між ними не виникало проміжків. Хоча Photoshop сам позначає подібні недоліки і приймає заходи до їх усунення, краще тримати все під своїм контролем.
Після попереднього аналізу та застосування інструменту Slice, отримаємо 18 фрагментів (рис. 5).
Боятися того, що вийшло багато малюнків, не варто через те, що частина фрагментів містить порожнє зображення (14, 16 і 15), а частина фрагментів, за винятком ширини, ідентичні (3, 5, 7 і 9). Таким чином, кількість картинок скорочується, оскільки частину з них можна замінити одним прозорим однопіксельним малюнком, встановлюючи для нього такі ж розміри, як у початкового фрагмента.
Використання однопіксельного прозорого зображення у форматі GIF є досить поширеним прийомом при верстці веб-сторінок. Дійсно, обсяг файлу мінімальний (всього 43 байти), картинку при цьому можна масштабувати до будь-якого розміру, і через неї видно фон.
Використання таблиці для склеювання фрагментів
Після того, як фрагменти позначені, потрібно зберегти всі зображення на диск. Для цього обираємо пункт меню File > Save for Web... (<Alt>+<Shift>+<Ctrl>+<S>) щоб відкрити панель оптимізації графіки (рис. 6).
За допомогою інструменту Slice Select можна вибирати потрібний фрагмент і встановлювати для нього персональні параметри, такі як кількість кольорів, значення втрат якості, прозорість і т.д. Допускається виділяти відразу декілька фрагментів, утримуючи клавішу , що дозволяє встановлювати для них однакові параметри.
Після завершення роботи з фрагментами натискаємо кнопку Save і вказуємо місце на диску, куди буде збережений HTML-документ. Зображення зберігаються автоматично в папку images, а їх назва формується від назви HTML-файла з додаванням номера фрагмента. Наприклад, зберігаємося имя splash.html, тоді перший фраг