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

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

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

В этом руководстве мы собираемся показать вам:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Также, если вы решите сохранить изображение в формате 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 -> Social и введите информацию в Facebook, TwitterGoogle+ и Pinterest,

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

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

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

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

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

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

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

add_filter('jpeg_quality', function($arg){return 100;});

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

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

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

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

add_filter('jpeg_quality', function($arg){return 80;});

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

важно: Это повлияет только на изображения, которые вы загружаете после вставки кода в functions.php. Чтобы изменить размер и качество изображений, которые у вас уже есть в библиотеке, вам понадобится плагин. Посмотрите, как восстановить дополнительные размеры изображения.

Самые популярные плагины для оптимизации изображений в 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 имеют более 100 000 активных установок и заслуживают места в списке лучших плагинов для оптимизации изображений WordPress.

Imsanity

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

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

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

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

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

ShortPixel Image Optimizer

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

С более чем 30 000 активных установок, ShortPixel Image остается одним из самых популярных плагинов для оптимизации изображений 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 получат изображение, которое позволит лениво загружаться. Просто нажмите на изображение, чтобы начать видео или аудио.
Смотрите демоверсию на сайте разработчика.

ленивый груз а3

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

ДЕМО 1

ДЕМО 2

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

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

BJ Lazy Load

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

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

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

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

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

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

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

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

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

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

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

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

1. Создайте новый пост или откройте существующий
2. Вставьте два изображения в пост. Если вы работаете в визуальном редакторе, вы должны увидеть изображение друг над другом. Если вы работаете в текстовом редакторе, вы должны увидеть код, подобный следующему:
3. Введите метку (двадцать) перед первым изображением
4. После второго введите тег (/ двадцать)

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

(twentytwenty)



(/twentytwenty)

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

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

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

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

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

Привлечь внимание

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

ДЕМОНСТРАЦИЯ

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

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

черты

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

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

Пример: интерактивная карта Гавайев

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

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

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

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

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

Вы должны повторить процесс для каждого из островов, которые вы хотите быть интерактивными. Когда у вас есть точки доступа, просто скопируйте шорткод с правой стороны. Вставьте шорткод в сообщение, страницу, виджет или куда угодно, чтобы отобразить новую интерактивную карту, и все готово! Si desea redirigir a los usuarios a cualquier otra página una vez que hicieron clic en las selecciones, solo necesita seleccionar la URL en lugar de la descripción. ¡Tan fácil como eso!

Versión Pro

Si bien la versión gratuita será perfecta si solo necesita una imagen, la versión PRO le permitirá tener tantas imágenes interactivas en su sitio como desee. Aunque esto será lo más importante a tener en cuenta, la versión PRO le proporcionará incluso más que múltiples imágenes.

La función de Opciones de diseño le permitirá mostrar más información sobre las partes seleccionadas de la imagen. Por ejemplo, podrá mostrar información en una caja de luz o en una barra de herramientas simple que aparecerá después de que un usuario pase el mouse sobre la parte seleccionada de la imagen.

También hay veinte paletas de colores predefinidas, por lo que no tiene que personalizar cada color manualmente. La versión PRO le costará $ 74 por una licencia de un solo sitio, pero si necesita más de una imagen interactiva, esto será obvio.

Cómo regenerar tamaños de imagen adicionales

Es relativamente fácil registrar nuevos tamaños de imagen en su tema de WordPress. Después de haberle dicho a su sistema qué tan grandes deberían ser sus imágenes, nombrarlas y decidir cómo recortarlas, puede distribuir las imágenes en cualquier lugar que desee. ¿Pero qué hay de las viejas imágenes?

Si ha utilizado una de las técnicas que le hemos mostrado, ha preparado el césped para nuevas imágenes. Ya sea que use tamaños de imagen de nuevo registro para miniaturas de publicaciones o permita que los autores las usen en publicaciones, las nuevas reglas se aplican solo a las imágenes que se cargan después de que haya realizado el cambio en el archivo functions.php. Para cambiar las imágenes más antiguas, sugerimos usar el complemento Regenerar miniaturas.

Regenerar miniaturas:

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

1. идти
2. Buscar "Regenerar miniaturas"
3. Установите и активируйте плагин
4. Перейдите к

Si desea cambiar el tamaño de todas sus imágenes, simplemente haga clic en el botón "Regenerar todas las miniaturas" y espere a que el complemento haga el trabajo duro.

Si desea ver las imágenes que van a cambiar de tamaño, o si desea cambiar el tamaño de solo algunas de las imágenes, vaya a su Biblioteca de medios donde encontrará una nueva opción en "Acciones masivas" y una al lado de cada imagen en el galería.

Lo bueno del complemento es que no elimina tus imágenes originales. Solo creará nuevos tamaños de imagen que puede usar en su tema, mientras que los originales se dejarán para que los use más tarde o los elimine manualmente si decide que no los necesita.

Вот и все Disfrute de sus nuevas miniaturas o consulte el complemento Tamaño de imagen simple que puede hacer lo mismo.

Eliminar los atributos de imagen de ancho y alto con jQuery

Al agregar imágenes a una publicación de WordPress, el sistema agrega automáticamente sus atributos de alto y ancho a la imagen. Eso suele ser algo bueno, pero hay momentos en los que no le gustará el hecho de que cada imagen obtenga esos atributos.

Si desea quitar los atributos justo en el punto de carga, puede hacerlo a través de una función simple que le mostramos la última vez.

Pero si leyó el artículo o probó la función usted mismo, habrá notado que solo afecta a las imágenes cargadas después de instalar la función en su sistema WP. Si ya tiene una base de datos llena de publicaciones con imágenes insertadas, la función mencionada anteriormente no lo ayudará mucho con sus atributos de imagen anteriores.

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 y etiquetas:
3. Сохранить изменения

And you’re done! 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. Abra su archivo 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. Copy and paste the following code:

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 = '';
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.

пример:

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.