Как создать карту изображения (image map) в GIMP

1. Подготовьте изображение

Выберите изображение подходящего размера и формата (PNG, JPG, SVG). Учтите: большие растровые картинки замедляют загрузку — по возможности оптимизируйте размер и используйте WebP, если сайт это поддерживает.

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

2. Откройте редактор Image Map в GIMP и разметьте области

В GIMP откройте изображение, затем найдите меню Tools → Web → Image Map. Откроется визуальный редактор, где можно выбирать форму области: прямоугольник, круг, многоугольник.

Рабочая область разделена: сама картинка и список ссылок (URL) для каждой области.

Практический приём: используйте многоугольник для произвольных форм и прямоугольник для простых блоков. После рисования каждой области появится окно для заполнения параметров: адрес (href) и текст ALT. Обязательно задавайте ALT — это важно для доступности.

Совет по доступности: ALT должен описывать цель ссылки («Профиль Анны Ивановой», «Документы компании — PDF»), а не просто повторять «кликните здесь».

3. Экспортируйте и получите HTML-код

После того как все области размечены, в GIMP откройте View → Source (Просмотр → Исходный код), чтобы увидеть HTML-код карты. GIMP сгенерирует блок

Обратите внимание на путь к изображению в теге . Если HTML-файл и изображение находятся в разных папках, исправьте путь в атрибуте src.

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

Ключевые моменты:

• usemap указывает на имя карты (без # в атрибуте name, с # в usemap).
• coords задаются в пикселях относительно верхнего левого угла изображения.

4. Тестирование карты изображения

Сохраните код как файл с расширением .html (уберите лишнюю точку в начале имени) и поместите изображение в ту же папку (или укажите корректный путь). Откройте HTML-файл в браузере и проверьте, что области кликаемы и ведут по нужным адресам.

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

Практическая мини-методология (чеклист)

1. Подготовьте оптимизированное изображение (размер, формат).
2. Откройте в GIMP и запустите Tools → Web → Image Map.
3. Создайте области соответствующими инструментами (rect/circle/poly).
4. Для каждой области заполните href и содержательный ALT.
5. Сохраните карту, экспортируйте/скопируйте HTML.
6. Проверьте пути к файлам и откройте .html в браузере.
7. Тестирование: несколько браузеров, мобильные, клавиатурная навигация.

Критерии приёмки

• Все кликабельные зоны работают и ведут на корректные URL.
• Краткие и полезные ALT-тексты заданы для каждой области.
• Карта корректно отображается на основных браузерах и на мобильных (зоны доступные для касания).
• HTML-файл не содержит относительных путей, ведущих в никуда.

Когда image map не подходит — альтернативные подходы