Оптимизируем показ изображений с помощью плагина Auto Highslide
Много раз сказано, что посетители неравнодушны к тому, как информационные материалы представлены на сайте, то есть, касается это и такого вида подачи информации, как изображения. Изображения и картинки не только украшают текст, но и часто несут дополнительную смысловую, либо основную информацию. Как правило, для лучшего восприятия размер картинки должен быть как можно больше, а для ускорения загрузки страниц и снижения нагрузки на хостинг как можно меньше. Данные требования противоречат друг-другу, что заставляет каждый раз выбирать компромисс. Элегантно решить эту проблему поможет довольно интересный плагин для WP – Auto Highslide. Его функция незатейлива – он позволяет увеличить изображение до максимального при клике по уменьшенной копии изображения.
Вроде бы, невелика важность этой функции: при клике по уменьшенной копии картинки на блоге (по умолчанию) всегда можно перейти на ее полноразмерную версию. Однако при этом есть одна особенность, которая заключается в том, что полноразмерная картинка открывается либо на отдельной странице, либо вместо «родительской». При этом так или иначе пользователь «покидает» сайт и не факт, что он захочет вернуться обратно к статье.
Плагин Auto Highslide для вордпресс позволяет открыть увеличенную копию картинки без перезагрузки страницы сайта и делает это с визуальным эффектом постепенного увеличения размера до максимального (и наоборот, при уменьшении). Новый функционал хоть и выглядит бесхитростным, но придает какой-то особый шик, особенно, если используется систематически, по умолчанию. На этом блоге плагин Auto Highslide хоть и установлен, но совсем недавно, поэтому какой-то особый упор на картинки не делался, его функционал задействован пока лишь для пары-тройки картинок. Лучше проследить его работу на экспериментальном (черновом) блоге о путешествиях. При клике на каждую картинку можно увидеть полную версию изображения, а также, зажав кнопку мышки, перетаскивать изображение по экрану (если оно целиком не вмещается в экран).
Теперь немного о том, как установить плагин Auto Highslide. Установка очень проста – нужно поместить его в папку плагинов (закачать), активировать и … на этом все. 🙂
Теперь о том, как помещать в текст картинки, чтобы плагин «заработал». Для этого выбираете, как обычно, загрузку (вставку) медиафайла, выбираете выравнивание картинки на странице (слева, справа, по центру) и один из двух размеров: миниатюра, полный. Если вы выберете размер миниатюры, размещение картинки можно на этом считать законченным. После публикации статьи можно будет просмотреть полную версию изображения, кликнув по миниатюре. Если по каким-то причинам вы хотите, чтобы размер изображения был больше, чем у миниатюры, но меньше максимального, выберите режим полного просмотра, размер мы уменьшим потом. Также должна отображаться опция «медиафайл», иначе увеличение изображения не будет происходить. Кстати, если вы хотите, чтобы в статье отображалась картинка без ссылки на нее, вместо «медиафайл» выберите «нет».
Для уменьшения размера на 90, 80, 70 или 60% от полного нужно перейти в режим визуального редактора, кликнуть по нужной картинке и перейти в режим редактирования.
После чего выбираете нужный процент уменьшения и следите, чтобы в поле «ссылка» отображалась ссылка на исходное (полное) изображение. Далее нажимаем «обновить» и не забываем подтвердить публикацию (обновление) статьи.
После всех этих нехитрых манипуляций можно будет насладиться визуальным эффектом, как, например, на этой картинке.
При моем разрешении экрана увеличение этой пикчи происходит двумя ступенями: до границ окна браузера, а затем, после клика справа внизу по значку со стрелками (видно на скрине) до максимального (исходного) значения.
Напоследок порекомендую установить один стандарт изображений (размер) для всех картинок на сайте, например, 500х300, 900х600 и т.д. Это прибавит оформлению страниц вашего блога чуточку «профессионализма» и своеобразный стиль. Есть, конечно, много других плагинов подобного (и лучшего) функционала, но именно этот нравится мне своей оригинальностью и незатейливостью. Желаю удачи.
Автор — vituson
Зачем ты мне создаешь конкуренцию своей компьютерной графикой? Купи лучше у меня сайт, дешево отдам.))))))
@Night
У меня их несколько штук, а дохода никакого, одни расходы на статьи. Покупал домен to-web через биржу Телдери, нужен был для одного проекта, но у продавца возникли сложности с передачей администраторских прав, в итоге за время, пока он их улаживал, я купил другой домен у другого товарища. Поэтому, когда он мне домен to-web передал, домен оказался как бы ненужен, пришлось закинуть несколько статей, чтобы поисковые системы не отправили в бан. Так что тоже могу недорого продать, ибо не нужен. А свой попробуй выставить на бирже.
Кстати, переоформлять полностью необязательно, если покупателя это устроит. Я так один сайт продал с доменом, на который мне права администратора не передали.
Пошутила.) Пусть висит, до осени есть не просит, все равно на хостинге два сайта умещается. Самое смешное то, что купила дорогой домен из соображений возможной продажи, а как до этого дошло, так и лень.)))
И что же, с этим плагином страницы грузятся так, как если бы грузились с миниатюрами? А потом догружаются? Или догружаются уже во время попытки увеличить?
Грузятся, как обычно, с миниатюрами. При увеличении картинка грузится отдельно, это даже видно, если картинка «много весит». Загружается та картинка, по которой кликают.