Как улучшить и оптимизировать изображения для WordPress

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

Просто потому, что загружать изображения на ваш сайт легко, это не значит, что вы должны делать это без какой-либо подготовки. На самом деле неоптимизированные изображения могут во многих отношениях навредить вашему сайту; от влияния на то, как посетители думают о вас, до скорости вашего сайта и рейтинга SEO. Если вы еще не подумали об этом, мы здесь, чтобы показать вам несколько способов улучшения изображений в WordPress.

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

Зачем вам оптимизировать изображения для WordPress? Если вы приложите усилия, то можете ожидать следующего:

• Более быстрый сайт
• Лучшее SEO
• Меньшие резервные копии
• Меньше использование полосы пропускания
• Более счастливые пользователи

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

Быстро тестируйте изображения на вашем сайте

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

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

Оптимизируйте изображения для WordPress перед загрузкой

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

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

Изменить размер изображений

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

Изменить размер изображений можно быстро и легко. Есть много бесплатных инструментов, таких как Microsoft Paint, которые помогут вам в этом. Вы даже можете найти бесплатные онлайн-инструменты для изменения размера изображений, такие как Easy Resize.

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

Изменить качество

После изменения размеров вам следует подумать об изменении качества изображений. В зависимости от программного обеспечения существуют разные способы изменения качества изображений. Например, всегда популярный Photoshop позволяет сохранять изображения для Интернета. Эта опция позволит вам сохранять изображения в более низком качестве, но они будут оптимизированы для вашего сайта.

Кроме того, если вы решите сохранить изображение в формате JPEG, Photoshop попросит вас выбрать уровень качества. В этом случае снижение качества с 12 до всего 8 резко уменьшит размер изображения, в то время как разница в качестве не будет такой большой.

Если вы все еще не используете какое-либо программное обеспечение для изменения качества своих изображений, вы можете попробовать бесплатный онлайн-инструмент Tiny PNG. Просто загрузите картинку и посмотрите, какая разница.

Выберите правильный формат

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

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

Во многих случаях переформатирование изображений не приведет к существенной разнице в качестве, хотя можно ожидать разницы в размере. В следующий раз перед загрузкой фотографий PNG сделайте снимок и попробуйте сохранить в формате JPEG, чтобы увидеть разницу. Для более подробного объяснения, пожалуйста, ознакомьтесь с разницей между PNG, JPEG, GIF и SVG.

Позаботьтесь об именах файлов

Хотя имя файла может показаться неважным, на самом деле вам следует знать об этом. Имя вашего файла изображения содержит ценную информацию для SEO. Если вы хотите, чтобы другие люди могли найти ваше изображение в Google и других поисковых системах, вы должны дать ему собственное имя.

Мы предлагаем вам называть изображения без пробелов. Не забудьте включить ключевые слова, если хотите, чтобы страница и изображение занимали ранжирование. Например, если вы загружаете фотографию Ferrari California, имя файла должно быть «ferrari-california.jpg». Если вы используете плагин SEO для WordPress, вы уже знаете, что он проверяет ваши альтернативные теги на наличие ключевых слов. Да, действительно важно иметь правильное имя для изображения.

Оптимизируйте изображения для WordPress после загрузки

После подготовки изображений на вашем компьютере вы можете продолжить загрузку. Надеюсь, ваши изображения правильного размера и качества. Вы убедились, что формат и имя файла верны. После загрузки WordPress запросит у вас дополнительную информацию. Не пропускайте метаинформацию; заполните сведения о ваших изображениях, чтобы вы могли легко организовать их и подготовиться к SEO.

Заголовок, описание, замещающий текст и подпись

Позаботившись о технических тонкостях, не стоит забывать и о SEO. Всегда добавляйте заголовок и описание к своим медиа. Это поможет вам в управлении медиа в WordPress, а также поможет улучшить SEO. Также не забудьте тег alt, который будет отображаться для посетителей, которые не могут правильно увидеть ваше изображение. Это не только будет полезно для ваших пользователей, но также поможет вам с SEO. Ваша страница получит более высокий рейтинг, и пользователям будет проще находить ваши новые изображения.

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

Редактируйте изображения с помощью WordPress

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

Восстановить все миниатюры

Большинство предыдущих методов помогут вам с новыми файлами изображений, которые вы все еще собираетесь загрузить. Но что, если на ваш сайт WordPress уже загружены сотни, если не тысячи файлов? Не волнуйтесь; вы по-прежнему можете оптимизировать эти изображения и изменить их размеры.

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

Используйте плагины WordPress

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

Ленивая загрузка изображений при необходимости

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

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

Создавайте адаптивные изображения

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

Оптимизируйте изображения для социальных сетей

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

Если вы используете плагин SEO, такой как Yoast, не забудьте проверить настройки. Например, Yoast позволит вам настроить несколько вещей, связанных с социальными сетями. Итак, перейдите в SEO -> Социальные сети и введите информацию в Facebook, Twitter, Google+ и Pinterest.

Если вы хотите большего и хотите оптимизировать изображения для дополнительных веб-сайтов социальных сетей, ознакомьтесь с плагином WPSSO - Accurate Meta Tags + Schema Markup for Social Sharing Optimization & SEO.

Измените способ сжатия изображений JPEG в WordPress

Если вы загружаете кучу изображений в формате JPEG на свой веб-сайт WordPress, вы могли заметить, что они теряют свое исходное качество. Если вы задавались вопросом, виноват ли WordPress, теперь вы получите ответ - да, это так!

После того, как вы загрузите изображение в формате JPEG, WordPress автоматически изменит степень сжатия и решит, что вы хотите, чтобы изображение потеряло качество. Чтобы быть более конкретным, WP использует 90% -ное сжатие ваших файлов JPGE. Это здорово, если ваши изображения предназначены только для использования в качестве эскизов сообщений или для показа в сообщениях, но если вы загружаете свои фотографии, вы хотите, чтобы они были как можно лучше, верно?

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

Остановить сжатие изображений JPEG:

Если вы не хотите, чтобы ваши изображения JPEG были сжаты, просто скопируйте и вставьте следующий код в свой файл functions.php:

 add_filter ('jpeg_quality', функция ($ arg) {return 100;});

Не забудьте сохранить изменения, и вы готовы загружать новые изображения.

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

Сжимайте изображения JPEG еще больше:

Чем меньше число, тем больше изображений будет сжато. Например, чтобы сжать эти файлы JPEG еще больше, вам понадобится этот код:

 add_filter ('jpeg_quality', функция ($ arg) {return 80;});

Не забывай; уровень сжатия по умолчанию - 90.

Самые популярные плагины оптимизации изображений для WordPress

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

Не волнуйтесь; никто не ожидает, что вы сделаете это в первую очередь. Оставайтесь с нами в следующие минуты, поскольку мы собираемся показать вам самые популярные плагины для оптимизации изображений для WordPress.

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

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

Плагин WP Smush

ЦЕНА: Бесплатно

WP Smush с более чем 700 000 активных установок должен быть одним из лучших плагинов для оптимизации изображений для WordPress. Он может быстро оптимизировать изображения, используя различные методы сжатия. Самое замечательное в сжатии изображений с помощью WP Smush заключается в том, что изображения не теряют в качестве. Не верите нам? Протестируйте плагин.

Когда мы говорили о подготовке изображений для WordPress, мы упомянули, что изменение размера является важной частью процесса оптимизации. С этим плагином вам не придется беспокоиться об этом, поскольку WP Smush позволяет вам устанавливать максимальные размеры. После этого все более крупные изображения автоматически уменьшатся, прежде чем вы добавите их в библиотеку.

Этот фантастический плагин может работать с файлами JPEG, GIF и PNG. Он работает со всеми вашими каталогами, автоматически обрабатывает вложения и даже работает с несколькими сайтами. Вы можете вручную работать с каждым изображением или редактировать пятьдесят из них сразу. Если вам нужны еще лучшие результаты и больше возможностей, попробуйте WP Smush PRO.

Плагин EWWW Image Optimizer

ЦЕНА: Бесплатно

За забавным названием скрывается один из самых популярных плагинов для оптимизации изображений для WordPress. Как и ранее упомянутый, EWWW Image Optimizer может сжимать ваши изображения, не влияя на их качество. Когда вы думаете о том, что плагин может ускорить ваш сайт за секунды, вы уже будете на пути к его загрузке. Как только вы это сделаете, вы сможете массово оптимизировать изображения, а галереи, такие как GRAND FlaGallery, NextCellent и NextGEN, даже получат свои собственные страницы массовой оптимизации.

Все изображения, которые используют класс WP_Image_Editor в WordPress, будут автоматически оптимизированы , в то время как вы можете вручную поработать над всеми остальными. Нам нравится, что вы можете выбирать папки, которые хотите оптимизировать. Для получения дополнительных сведений об этом и о том, какие плагины используют этот класс, откройте официальную страницу EWWW Image Optimizer в репозитории WordPress.

Плагин сжатия изображений JPEG и PNG

ЦЕНА: Бесплатно

Если милая маленькая панда с логотипом WordPress не вызывает у вас желания узнать больше об этом плагине, мы не знаем, что именно. И если панда выглядит знакомо, это потому, что это та самая панда, которая помогает вам сжимать изображения на веб-сайте TinyPNG. Да, похоже, животное более разностороннее, чем мы думали изначально. Но остановимся на плагине.

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

Сжатие изображений JPEG и PNG поддерживает даже анимированные PNG, отлично работает на мультисайтах, совместимо с WooComerce и не будет иметь проблем с WP Offload S3.

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

Ограничений по размеру файла нет, вы можете установить виджет панели инструментов, и он даже работает с мобильным приложением WordPress. Из-за всего этого, Compress JPEG & PNG images имеет более 100 000 активных установок и заслуживает места в списке лучших плагинов для оптимизации изображений для WordPress.

Плагин Imsanity

ЦЕНА: Бесплатно

Хотя изображение обложки для этого плагина может вас отпугнуть, уделите секунду и ознакомьтесь со всеми функциями Imsanity. О, даже название плагина звучит безумно, правда? Как только вы согласитесь с названием плагина, вы увидите, что он может многое предложить.

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

Этот бесплатный плагин - отличный вариант, если вы не хотите много бороться с настройками плагина. Все, что вам нужно, это установить и активировать Imsanity, задать несколько параметров, и вы можете забыть об этом; он будет идти своим путем к оптимизации изображений.

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

Плагин ShortPixel Image Optimizer

ЦЕНА: Бесплатно

ShortPixel Image с более чем 30 000 активных установок по-прежнему остается одним из самых популярных плагинов для оптимизации изображений для WordPress. Плагин имеет множество функций, и он будет незаменим для сайтов, на которых есть много изображений для оптимизации.

ShortPixel Image Optimizer не только оптимизирует для вас документы JPG, PNG, GIF и PDF, но также позволит вам преобразовать любое изображение JPEG, PNG или GIF в WebP . Плагин хорошо работает с другими плагинами галереи, и его не волнует, использует ли ваш сайт HTTP или HTTPS. Это позволит вам удалить данные EXIF ​​с изображений (что очень понравится фотографам).

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

Optimus - оптимизатор изображений WordPress

ЦЕНА: Бесплатно

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

Optimus работает с несколькими сайтами, он не новичок в сайтах электронной коммерции WordPress и полностью оптимизирован для мобильных приложений WordPress и Windows Live Writer. Это ускорит ваш сайт без необходимости касаться строчки кода. Плагин предлагает гораздо больше, но вам придется подписаться на премиум-версию. Чтобы увидеть больше, перейдите на официальную страницу в репозитории плагинов WordPress.

Добавьте ленивую загрузку для ваших видео и изображений в WordPress

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

Если вы разбираетесь в PHP, есть отличная статья о добавлении отложенной загрузки изображений и бесконечной прокрутки, написанная нашими коллегами по Elegant Themes.

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

Ленивая загрузка видео

ЦЕНА: Бесплатно

Если у вас много видеороликов Youtube и Vimeo, вам следует подумать об установке этого плагина. После того, как вы его настроите, плагин разместит изображение на вашем видео, и из-за этого ваш сайт будет загружаться намного быстрее. Когда посетитель прокручивает видео, это изображение будет показано с кнопкой воспроизведения над ним. После щелчка видео начнет загружаться и воспроизводиться. Простую демонстрацию можно посмотреть на сайте разработчика.

WP YouTube Lyte

ЦЕНА: Бесплатно

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

a3 Ленивая загрузка

ЦЕНА: Бесплатно

Этот посвящен вашему мобильному сайту. Если у вас много изображений и / или видео, которые вы хотите показать своим посетителям на мобильных устройствах, вам следует взглянуть на a3 Lazy Load. Это позволит вам добавлять ленивую загрузку к вашим изображениям и видео, а плагин даже позволит вам выбирать эффекты перехода, которые будут отображаться пользователям, когда они прокручивают загружаемый контент.

В админке вы можете легко включать и выключать контент, который хотите лениво загружать. Для тех, кто включен, контент будет загружаться только в то время, когда посетитель прокручивает эту часть контента.
Есть красиво показанная демонстрация, которая содержит 1000 изображений - каждое загружается только после того, как вы прокрутите до него. Поскольку этот плагин также выполняет отложенную загрузку видео, есть демонстрационное видео, которое вы можете увидеть, щелкнув ссылку выше.

Минет ленивая загрузка

ЦЕНА: Бесплатно

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

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

Привлекательное отображение изображений до и после

Мы уверены, что вы уже видели множество примеров изображений до и после. Не знаю, как вы, но первое, что мы имеем в виду, когда видим фразу «до и после», - это программа фитнеса, в которой люди показывают свое тело до и после программы тренировки.

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

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

Двадцать двадцать

ЦЕНА: Бесплатно

Twenty Twenty - это название этого замечательного плагина, который вы можете бесплатно скачать в репозитории плагинов WordPress.

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

Хорошо, теперь, когда вы подключились к этому маленькому плагину, давайте посмотрим, как создать этот потрясающий эффект. Хотя воссоздать демонстрационный эффект относительно легко, вам все равно нужно знать основы HTML. Пойдем:

1. Создайте новый пост или откройте существующий
2. Вставьте два изображения в сообщение. Если вы работаете в визуальном редакторе, вы должны видеть изображения одно над другим. Если вы работаете в текстовом редакторе, вы должны увидеть код, похожий на этот:

 <a href="image1.jpg"> <img src =
"http://www.loactionoftheimage.com" width = "700" 
height = "200" /> </a>

<a href="image2.jpg"> <img src =
"http://www.loactionoftheimage.com" width = "700" 
height = "200" /> </a>

3. Введите тег [20] перед первым изображением.
4. После второго введите тег [/ 20twenty].

В текстовом редакторе у вас должно получиться что-то вроде этого:

5. Убедитесь, что ваши фотографии одинакового размера, чтобы добиться наилучших результатов.
6. Просмотрите или опубликуйте свой пост и наслаждайтесь потрясающими фотографиями до и после

Как создавать интерактивные изображения - рисовать, добавлять описания и ссылки

Сегодня сложно запустить сайт без мультимедиа. Изображения, видео и музыка являются частью практически каждого веб-сайта. Средний пользователь Интернета сильно зависит от визуальных стимулов, поэтому вам нужно позаботиться о визуальной и интерактивной частях вашего сайта. Статьи с изображениями получают на 94% больше просмотров, чем статьи без них. Кроме того, уже известен факт, что мультимедиа на веб-сайтах может повысить рентабельность инвестиций в контент-маркетинг.

Мы надеемся, что нет необходимости убеждать вас позаботиться об изображениях на вашем сайте. Даже если вы не используете изображения в статьях (а должны), вы используете избранные изображения, верно? Существует довольно много плагинов галереи, которые могут помочь вам управлять изображениями на вашем сайте WordPress, вы можете создавать темы, связанные с фотографиями, подключать Instagram к вашему сайту WordPress и делать многое другое. Но что, если вы хотите создать более интерактивный контент?

Для начала вам может быть интересно добавить эффект изображения до и после, который понравится вашим пользователям. Не забывайте о виртуальной реальности в WordPress, которая становится все более популярной после того, как Automattic представила VR на WordPress.com. Тем не менее, чего-то не хватает. Можно ли делать интерактивные изображения с интерактивными частями? Да, это возможно, и мы собираемся показать вам, насколько это весело и легко.

Обратить внимание

ЦЕНА: Бесплатно

Первое, что вам понравится в этом плагине, так это то, что он полностью бесплатный! Как и любой другой плагин из репозитория WordPress, вы можете загрузить, установить и активировать его за считанные минуты. Бесплатная версия позволит вам работать с одним интерактивным изображением. Если вы хотите большего, вам нужно будет подписаться на версию PRO, но об этом мы поговорим позже.

Плагин адаптивен, и вам не нужно беспокоиться о том, чтобы интерактивные изображения правильно отображались на любом устройстве. Мало того, что изображение будет масштабироваться в соответствии с размером экрана, оно будет работать в большинстве современных и старых браузеров (настольных и мобильных). Draw Attention использует элементы холста при отображении в новых браузерах, в то время как оно будет возвращаться к картам изображений, если вы загрузите его в более раннем.

Функции

Прежде чем перейти к примеру, который покажет вам, насколько мощный этот простой плагин, давайте посмотрим, чего ожидать от Draw Attention:

• Рисование - после того, как вы загрузите изображение, вы сможете рисовать на нем фигуры. Выберите любую часть вашего изображения, которая станет доступной для выбора / кликабельности.
• Цвета - настраивайте цвета так, чтобы горячие точки соответствовали дизайну вашего сайта.
• Выделение при наведении - отображение другой части изображения, если пользователь наводит курсор на выбранную часть.
• Показать дополнительную информацию - отображение дополнительной информации о выбранной части изображения.
• Перейти к URL - перенаправлять пользователей на любой URL, если они нажимают на выбор

Пример - Интерактивная карта Гавайев.

Мы будем использовать пример с демонстрационного сайта, чтобы показать вам, что именно вы можете делать с Draw Attention. Итак, давайте посмотрим, как выглядит интерактивная карта Гавайев, созданная с помощью плагина.

Первое, что вам нужно сделать, это найти изображение островов Гавайи. После того, как вы перейдете к Draw Attention -> Edit Image, вы должны загрузить изображение в область на правой боковой панели. Как только изображение загрузится, можно начинать самое интересное.

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

Самое волшебное происходит на экране настроек Hotspot Areas . Здесь вы загрузите изображение в полный размер. Все, что вам нужно сделать, это начать рисовать и создать новую точку доступа. Вы можете добавить столько точек, сколько захотите, а это значит, что вы можете создавать исчерпывающие выборки по своему усмотрению. Вы можете создать столько точек доступа, и каждая может иметь свои собственные настройки.

Итак, в этом примере вы должны выбрать один из островов. Выберите название для острова, добавьте описание и дополнительное изображение, которое будет отображаться, когда пользователь наводит курсор на точку доступа (правая часть изображения в формате GIF, показанного выше).

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

ПРО версия

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

Функция Layout Options позволит вам показать больше информации о выбранных частях изображения. Например, вы сможете отображать информацию в лайтбоксе или на простой панели инструментов, которая появится после того, как пользователь наведет курсор на выбранную часть изображения.

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

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

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

Если вы использовали одну из техник, которые мы вам показали, вы подготовили газон для новых изображений. Независимо от того, используете ли вы недавно зарегистрированные размеры изображений для миниатюр сообщений или разрешаете авторам использовать их в сообщениях, новые правила применяются только к тем изображениям, которые загружаются после того, как вы внесли изменения в файл functions.php. Чтобы изменить старые изображения, мы предлагаем использовать плагин Regenerate Thumbnails.

Восстановить эскизы:

ЦЕНА: Бесплатно

1. Перейдите в Плагины-> Добавить новый
2. Найдите «Восстановить эскизы»
3. Установите и активируйте плагин
4. Перейдите в Tools-> Regen.Thumbnails.

Если вы хотите изменить размер всех ваших изображений, просто нажмите кнопку «Восстановить все миниатюры» и дождитесь, пока плагин выполнит тяжелую работу.

Если вы хотите увидеть изображения, размер которых будет изменен, или если вы хотите изменить размер только некоторых изображений, перейдите в свою мультимедийную библиотеку, где вы найдете новую опцию в разделе «Массовые действия» и по одной рядом с каждым изображением в галерея.

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

Вот и все. Наслаждайтесь новыми миниатюрами или воспользуйтесь плагином Simple Image Sizes, который может делать то же самое.

Удалите атрибуты ширины и высоты изображения с помощью jQuery

При добавлении изображений в сообщение WordPress система автоматически добавляет к изображению его атрибуты высоты и ширины. That's usually a good thing, but there are times when you won't like the fact that every image gets those attributes.

If you want to strip the attributes right at the point of upload, you can do that through a simple function which we showed you last time.

But if you read the article or tried the function yourself, you've noticed that it only affects images uploaded after the function was installed into your WP system. If you already have a database full of posts with inserted images, the aforementioned function won't help you much with your old image attributes.

Since you probably can't go through each and every image manually and delete width and height one by one, you are probably in a need of another function which will strip those attributes for all existing images embedded in your posts. In that case, you're in the right spot 'cause we're about to show you a simple way of automatically removing width and height image attributes with few lines of jQuery code. Don't get scared with the previous phrase – you don't even have to know what jQuery is, just follow the next three steps and you'll be done in a jiffy.

Remove width and height image attributes:

1. Open header.php file from your theme folder
2. Copy and paste this code anywhere between <head> and </head> tags:

 <script src="http://code.jquery.com/jquery-latest.js">
</script>
<сценарий>
jQuery.noConflict();
jQuery(document).ready(function($){
$('img').each(function(){
$(this).removeAttr('width')
$(this).removeAttr('height');
});
});
</script>

3. Сохранить изменения

И вы сделали! The code will do its magic after you open a post which contains an image and will remove width and height tags from it.

How to create custom image sizes in Media Uploader

If you are using Media Uploader to deal with images in WordPress, you have probably seen numerous options for images. Between many, you are able to choose an image size which you can send to your article.

There are the thumbnail, medium, large and full-size options to choose from, but all those options have predefined values. So, if you're using a custom theme, more often than not you are stuck with changing width and height for each image over and over again.

Actually, you don't have to do that. There is a neat little function called add_image_size() which is a great tool for developers. And after this article, you will find it useful as well.

Let's say your theme has a custom width and you want to easily embed images to fit in there perfectly. Let's say that width is 666px (we won't go into why you have set the width to this number, it's your choice). To do that, you need to add an extra radio button to Media Uploader. With the code below, you'll be adding one more size which is the half size of the original one.

1. Откройте ваш файл functions.php
2. Copy and paste this piece of code:

 function custom_image_sizes() {
add_image_size( 'one-size', 333, 333, true );
add_image_size( 'another-size', 666, 666, true );
}

add_action( 'init', 'custom_image_sizes' );

function show_image_sizes($sizes) {
$sizes['one-size'] = __( 'Custom Size 1', 'isitwp' );
$sizes['another-size'] = __( 'Custom Size 2', '
isitwp' );
return $sizes;
}

add_filter('image_size_names_choose', 
'show_image_sizes');

3. Сохранить изменения
4. Try adding an image from your Media Uploader where you should see your new size options under the “Attachment Display Settings”

Create automatic screenshot of any website and publish it as image in your post

If you want to display a thumbnail of a website, you would have to go to the website, print screen it or take a screenshot with a program or a browser add-on. Then you would need to modify the image, cut it to the right size and upload it to your WordPress so that you can use the screenshot in a post.

If you don't have to take that snapshot every now and then, it won't be a problem, but if you're using screenshots of different websites more often, you will be happy to hear that there is an awesome function which will save you time and your nerves.

In this part of the guide, we are about to show you the complete function which creates a shortcode that you can use for taking snapshots of any web page you want.

Create automatic screenshot:

1. Откройте functions.php
2. Скопируйте и вставьте следующий код:

 function wp_webscreen($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'http://www.firstsiteguide.com',
"alt" => 'wploop',
"w" => '600', // width
"h" => '450' // height
), $atts));

$img = '<img alt="' . $alt . '" src="' . $snap . 
'' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" />';
return $img;
}
add_shortcode("screen", "wp_webscreen");

3. Change default variables in the array
4. Сохранить изменения

This function creates a shortcode that you can easily use anywhere on your WordPress website. Whether you want to use the screenshot of a web page in a post, sidebar widget or your footer, for example, simply c/p the shortcode in the right spot:

[screen url=”http://www.firstsiteguide.com” alt=”fsg” w=”600″ h=”450″]

What's great about this function is that it saves the image as dynamic URL which means that once you create a snapshot with the shortcode, it will automatically refresh itself in the future and always show the current looks of the website specified in the shortcode.

Note that you can change the parameters of the shortcode directly from it. You don't have to modify the code in the functions.php file if you want to take the snapshot of another URL or to take the snapshot in a different dimension.

Example:

Let's say that you want to take a screenshot of Google and make it 200×400 pixels big:

[screen url=”http://www.google.com” alt=”Google” w=”200″ h=”400″]

You can make everything even easier by saving the shortcode into a button so that you can insert it into a post with a single click of a button.

Заключение

You don't have to install all plugins and functions we mentioned in order to improve the images on your WordPress site. But we hope that you have found at least a few tips that will help you to optimize images or make them better in any way.