Как разместить картинку высокого разрешения у себя на сайте

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

1. Для чего это может пригодится
2. Чем не подходит тэг IMG
3. Как это работает на других сайтах
4. Делаем сами

1. Для чего это может пригодится

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

• групповая фотография, например фото выпуска, где хочется рассмотреть каждого
• фотографии предметов искусства, где важна каждая деталь, например проект Google Art
• карты, как современные, так и исторические карты, например проект Карты Петербурга
• исторические документы, например проект RSIM
• панорамы местности, в том числе и круговые панорамы
• большие планы, где хочется рассмотреть подробно детали, например планы расследований сайт Навального
• чертежи и схемы

2. Чем же не подходит тэг IMG

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

• большая нагрузка на сервер при отдаче картинки
• большая нагрузка на сеть при передаче картинки
• большое время ожидания загрузки картинки
• большая нагрузка на браузер при отображении картинки
• невозможность просмотреть конкретную область картинки в увеличенном масштабе

Понятно, что использование тэга IMG d данной ситуации абсолютно не подходит.

3. Как же это работает на других сайтах

Все проекты, которые отображают большие картинки используют схожий подход отображений подобных картинок:

1. берем картинку, например такую
   
   
2. оригинальная большая картинка сохраняется в разных разрешениях вплоть до самого маленького
   
   
3. каждый из сохраненных вариантов картинки разрезается на куски одинакового размера, так называемые тайлы
   
   
4. компонент, занимающийся отображением картинки определят текущий уровень детализации и область просмотра и отображает только соответствующие тайлы
   
   

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

4. Делаем сами

Один из самых простых способов реализации – использование готового компонента. Один из самых популярных компонентов zoomify. Компонент платный, но у есть экспресс версия, бесплатная и доступная для скачивания с официального сайта В скаченном архиве (win) вы найдете следующие файлы:

• Zoomify Converter.exe – компонент для подготовки исходной картинки и нарезки её на тайлы
• ZoomifyViewer.swf – компонент для отображения на сайте
• TemplateWebPage.htm – пример использования компонента

Использовать компонент очень просто:

1. Запускаем программу Zoomify Converter.exe, выбираем в ней исходную картинку
2. Размещаем папку с тайлами, созданными на предыдущим этапе, у себя на сайте
3. Размещаем файл ZoomifyViewer.swf у себя на сайте
4. Создаем страничку со следующим кодом

<div id="zoomExample">
  <embed 
     FlashVars="zoomifyImagePath=[путь к папке с тайлами]"
     src="[путь к файлу ZoomifyViewer.swf]"
     width="[ширина]" height="[высота]"></embed>
</div>

Параметр	Описание
zoomifyImagePath	абсолютный или относительный путь к папке с тайлами
src	абсолютный или относительный путь к файлу ZoomifyViewer.swf
width	ширина блока с компонентом для просмотра, возможны значений в процентах или в пикселях, например "100%" или "640px"
width	высота блока с компонентом для просмотра, возможны значений в процентах или в пикселях, например "50%" или "480px"

В итоге получаем вот такой результат:

Работающий пример можно скачать тут.

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

• простота создания "подготовленного изображения"
• простота использования
• компонент бесплатный

Минусы:

• компонент написан на FLASH, поэтому не будет работать на мобильных устройствах, таких как iPhone, iPad и пр. У zoomify есть компонент HTML5, который решает эту проблему, но он платный.
• "подготовленное изображение" – представляет из себя большое количество файлов, что не очень удобно.
• невозможность расширения функциональности компонента.

В будущих статьях на данную тему будут рассмотрены следующие вопросы:

• отображение картинки высокого разрешения на мобильных устройствах
• альтернативные способы создания "подготовленного изображения"
• Image server – назначение и примеры использования