Главная > Блого и сайтоводство > Оптимизируем показ изображений с помощью плагина Auto Highslide

Оптимизируем показ изображений с помощью плагина Auto Highslide

100mm-zoom-spotting-scopeМного раз сказано, что посетители неравнодушны к тому, как информационные материалы представлены на сайте, то есть, касается это и такого вида подачи информации, как изображения. Изображения и картинки не только украшают текст, но и часто несут дополнительную смысловую, либо основную информацию. Как правило, для лучшего восприятия размер картинки должен быть как можно больше, а для ускорения загрузки страниц и снижения нагрузки на хостинг как можно меньше. Данные требования противоречат друг-другу, что заставляет каждый раз выбирать компромисс. Элегантно решить эту проблему поможет довольно интересный плагин для WP – Auto Highslide. Его функция незатейлива – он позволяет увеличить изображение до максимального при клике по уменьшенной копии изображения.

Вроде бы, невелика важность этой функции: при клике по уменьшенной копии картинки на блоге (по умолчанию) всегда можно перейти на ее полноразмерную версию. Однако при этом есть одна особенность, которая заключается в том, что полноразмерная картинка открывается либо на отдельной странице, либо вместо «родительской». При этом так или иначе пользователь «покидает» сайт и не факт, что он захочет вернуться обратно к статье.

Плагин Auto Highslide для вордпресс позволяет открыть увеличенную копию картинки без перезагрузки страницы сайта и делает это с визуальным эффектом постепенного увеличения размера до максимального (и наоборот, при уменьшении). Новый функционал хоть и выглядит бесхитростным, но придает какой-то особый шик, особенно, если используется систематически, по умолчанию. На этом блоге плагин Auto Highslide хоть и установлен, но совсем недавно, поэтому какой-то особый упор на картинки не делался, его функционал задействован пока лишь для пары-тройки картинок. Лучше проследить его работу на экспериментальном (черновом) блоге о путешествиях. При клике на каждую картинку можно увидеть полную версию изображения, а также, зажав кнопку мышки, перетаскивать изображение по экрану (если оно целиком не вмещается в экран).

Теперь немного о том, как установить плагин Auto Highslide. Установка очень проста – нужно поместить его в папку плагинов (закачать), активировать и … на этом все. 🙂

Блог копирайтера - http://vituson.ru

Теперь о том, как помещать в текст картинки, чтобы плагин «заработал». Для этого выбираете, как обычно, загрузку (вставку) медиафайла, выбираете выравнивание картинки на странице (слева, справа, по центру) и один из двух размеров: миниатюра, полный. Если вы выберете размер миниатюры, размещение картинки можно на этом считать законченным. После публикации статьи можно будет просмотреть полную версию изображения, кликнув по миниатюре. Если по каким-то причинам вы хотите, чтобы размер изображения был больше, чем у миниатюры, но меньше максимального, выберите режим полного просмотра, размер мы уменьшим потом. Также должна отображаться опция «медиафайл», иначе увеличение изображения не будет происходить. Кстати, если вы хотите, чтобы в статье отображалась картинка без ссылки на нее, вместо «медиафайл» выберите «нет».

Auto-Highslide-1

Для уменьшения размера на 90, 80, 70 или 60% от полного нужно перейти в режим визуального редактора, кликнуть по нужной картинке и перейти в режим редактирования.

Auto-Highslide-2

После чего выбираете нужный процент уменьшения и следите, чтобы в поле «ссылка» отображалась ссылка на исходное (полное) изображение. Далее нажимаем «обновить» и не забываем подтвердить публикацию (обновление) статьи.

Auto-Highslide-3
После всех этих нехитрых манипуляций можно будет насладиться визуальным эффектом, как, например, на этой картинке.

Kill-Bill

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

Auto-Highslide-4.jpg

Напоследок порекомендую установить один стандарт изображений (размер) для всех картинок на сайте, например, 500х300, 900х600 и т.д. Это прибавит оформлению страниц вашего блога чуточку «профессионализма» и своеобразный стиль. Есть, конечно, много других плагинов подобного (и лучшего) функционала, но именно этот нравится мне своей оригинальностью и незатейливостью. Желаю удачи.

Автор — vituson

Похожие статьи

Блого и сайтоводство

  1. 19 мая 2013 в 12:23 | #1

    Зачем ты мне создаешь конкуренцию своей компьютерной графикой? Купи лучше у меня сайт, дешево отдам.))))))

  2. 19 мая 2013 в 13:57 | #2

    @Night
    У меня их несколько штук, а дохода никакого, одни расходы на статьи. Покупал домен to-web через биржу Телдери, нужен был для одного проекта, но у продавца возникли сложности с передачей администраторских прав, в итоге за время, пока он их улаживал, я купил другой домен у другого товарища. Поэтому, когда он мне домен to-web передал, домен оказался как бы ненужен, пришлось закинуть несколько статей, чтобы поисковые системы не отправили в бан. Так что тоже могу недорого продать, ибо не нужен. А свой попробуй выставить на бирже.

    Кстати, переоформлять полностью необязательно, если покупателя это устроит. Я так один сайт продал с доменом, на который мне права администратора не передали.

  3. 19 мая 2013 в 14:17 | #3

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

  4. 19 мая 2013 в 14:28 | #4

    Грузятся, как обычно, с миниатюрами. При увеличении картинка грузится отдельно, это даже видно, если картинка «много весит». Загружается та картинка, по которой кликают.