amp-web-push-widget button.amp-subscribe { display: inline-flex; align-items: center; border-radius: 5px; border: 0; box-sizing: border-box; margin: 0; padding: 10px 15px; cursor: pointer; outline: none; font-size: 15px; font-weight: 500; background: #4A90E2; margin-top: 7px; color: white; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .amp-logo amp-img{width:190px} .amp-menu input{display:none;}.amp-menu li.menu-item-has-children ul{display:none;}.amp-menu li{position:relative;display:block;}.amp-menu > li a{display:block;} .icon-widgets:before {content: "\e1bd";}.icon-search:before {content: "\e8b6";}.icon-shopping-cart:after {content: "\e8cc";}

Categories: Блогинг

Какими должны быть изображения для сайта

Изображения для сайта, как большая часть контента, имеют огромное влияение на качество и восприятие всего проекта. Кроме того, как мы рассказывали в первой части этой статьи, картинки на сайте влияют даже на продвижение.

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

Эффект изображения

По умолчанию WordPress поддерживает три действия, которые происходят при клике на изображение:

будет открываться ссылка, то есть картинка станет кликабельной;
картинка будет открываться в полном размере, в том же окне браузера (что очень неудобно);
ничего не будет происходить.

Этот скудный список действий по клику необходимо дополнить эффектами лайтбокс. Лайтбокс – это когда изображение открывается при клике в той же вкладке браузера, при этом основной контент не пропадает, отходит на задний фон, затемняется. Это позволяет быстро вернуться снова к чтению материала, и не потеряться на сайте.

Для того чтобы реализовать лайтбокс на сайте, придётся использовать специальные плагины. Как правило, они все лёгкие и простые. О них мы рассказывали в этой статье.

Водяные знаки и другие средства защиты

Если вы добываете изображения для сайта большим трудом, например, сами фотографируете, рисуете или приобретаете на биржах, то вам следует их защитить. Самым лучшим и надёжным средством защиты является водяной знак. Его можно проставить на все картинки с помощью редактора изображений или воспользоваться специальными плагинами для WordPress, которые ставят ватермарки автоматически на все картинки.

Другим средством защиты является запрет клика правой кнопки, через который можно вызвать контекстное меню браузера и скачать изображение. Также можно запретить перетаскивание картинок в графические редакторы. Всё это реализуется специальными плагинами.

Галереи изображений

Если вы публикуете изображения для сайта в большом количестве, то их целесообразно поместить в галереи – картинки, объединённые в один блок. Это позволит посетителям лучше с ними ознакомиться и улучшить восприятие. Картинки галерей также следует украсить эффектом лайтбокс с возможностью их переключения к следующим и предыдущим фото.

Галереи в WordPress можно создавать как с помощью стандартных инструментов, так и специальными плагинами.

Адель Гадельшин