Оптимизация изображений в WordPress для ускорения сайта и улучшения SEO
HTML-код
- Опубликовано: 13 окт 2017
- Оптимизация изображений в WordPress - ещё один способ ускорения сайта. Помимо обыкновенного комфорта посетителей улучшается оптимизация сайта для Yandex, Google и экономится место на хостинге. Оптимизацию изображений для #WordPress делается автоматически с помощью плагинов или в ручную при помощи специальных сервисов. Смотрите видео и выбирайте предпочтительный способ оптимизации и сжатия изображений для #Вордпресс.
Код для запрета сжатия изображений:
//Сжатие изображений
add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );
Плагины для оптимизации изображений WordPress:
ru.wordpress.org/plugins/wp-s...
ru.wordpress.org/plugins/ewww...
ru.wordpress.org/plugins/tiny...
ru.wordpress.org/plugins/imag...
ru.wordpress.org/plugins/shor...
ru.wordpress.org/plugins/rege...
Сервисы оптимизация изображений:
tinypng.com/
optimizilla.com/
imagify.io/optimizer/
shortpixel.com/online-image-c...
#️⃣ Присоединяйся:
Канал - digitalalex.ru/r/youtube/
Сайт - digitalalex.ru/
Telegram - digitalalex.ru/r/telegram/
Вконтакте - digitalalex.ru/r/vk/
Я.Дзен - digitalalex.ru/r/zen/
Rutube - digitalalex.ru/r/rutube/ 
Наука
Нравятся видео о WordPress? Поддержите канал! wplovers.pw/donate/
Друзья, я очень стараюсь делать хорошие, понятные уроки и это занимает целую прорву времени. В то время, пока я записываю и монтирую видео, я мог бы заниматься другой работой, но так я помогаю очень малому количеству людей. Записывая уроки для массовой аудитории, я получаю возможность помочь сразу большому количеству людей и это здорово!
Поддержать WPlovers wplovers.pw/donate/
Более того, хочется делать больше обзоров на платные плагины и темы. К сожалению, но не все разработчики соглашаются предоставить их для теста бесплатно и приходится выделять деньги из собственного кармана.
Я буду очень признателен, если вы поддержите проект WPlovers. Поможет любая, даже малая сумма.
Спасибо! wplovers.pw/donate/
Увы сейчас мое финансовое положение не позволяет мне помочь Вам. С какого вы города?
Хочу поделиться своим опытом 2017 года. Решил оптимизировать изображения на сайтах, которые я поддерживаю. Купил платный плагин EWWW Image optimizer. Закинул в него $100, посчитал
что должно хватить с запасом. Включил оптимизацию. Процесс на первом сайте дошел до 40% и заглох. Я начал разбираться, оказывается деньги закончились. Плагин берет деньги за оптимизацию кожного thumbnail. А у меня их по десять штук на одно изображения. Поставил WP Smush, бесплатную версию. Оптимизирует за бесплатно 50 изображений, а потом нужно кнопку клацнуть в админке. Почитал я исходники, и написал скрипт который сам кнопку клацает. И так оптимизировал все изображения. Зашел в Google Pagespeed, а он все равно показывает, что изображения не оптимизированы. Если до этого было на 30-40% больше нормы, то после на 10-15%.
Решил я все изображения выгрузить по ftp и оптимизировать консолью с помощью кодека Mozilla MozJpeg. Пробовал несколько раз, пока не добился того что Google Pagespeed перестал примахиваться к изображениям. Но качество изображений стало очень плохое. У упущу все эмоции и перейду дальше.
После изучения темы в интернете оказалось что в сентябре 2017 года Google Pagespeed поменял алгоритм, теперь он хочет чтобы все изображения были меньше webp q75 + 9%. Webp в среднем сжимает на 40% лучше чем Jpeg. То есть добиться такого размера от Jpeg и сберечь качество изображения нереально. То есть свалу нет, придется использовать Webp. Но Webp поддерживается только Chrom и Opera. Firefox и Safari их не понимают. Просто пере конвертировать изображения в Webp не поможет. Но есть такой трюк. Можно создать по два файла для каждого изображения.
Нормальный и wepb. И выдавать браузерам поддерживающим webp - webp, а не поддерживающим - нормальный файл. Выбор файла выполняется Apache mod_rewrite. Нужно в .htaccess добавить такой код.
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_URI} .*(jpe?g|png|gif)$
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule (.*) $1.webp [T=image/webp,E=accept:1]
Header append Vary Accept env=REDIRECT_accept
AddType image/webp .webp
Для генерации webp файлов нашел бесплатный плагин Opti MozJpeg Guetzli WebP. Он очень интересно сделан, чтобы не устанавливать кодеки изображений на сервер (а у меня хостинг и туда они и не поставляться) можно скачать с сайта плагина виртуальную машину для Oracle Virtual Box. В ней стоит Linux, ssh сервер и кодеки изображений (MozJpeg, Guetzli, WebP). Нужно запустить виртуальную машину у себя на компе, подключить плагин к ней по ssh. И плагин будет по ssh ганять изображения и оптимизировать их в виртуальной машине. То есть я как бы сам для себя облако. Вот этим немного извратным способом я таки оптимизировал изображения и создал для них webp дубликаты. Google Pagespeed полностью снял все претензии к изображениям.
Обожаю людей, которые так заморачиваются и копают настолько глубоко. Сам я подобным не всегда могу похвастаться. Спасибо большое за метод! Прям скопировал ваш коммент целиком в подшивки и при случае попробую.
На php или js писал?))
Вот так заморочились 👍
Александр, очередной раз искренне благодарю за Ваши драгоценные уроки! Вы настоящий профессионал своего дела, такое чувство, что Вы побывали где-то за границей и взяли самое лучшее, потому что наши земляки обычно так не могут- либо тараторят на непонятном языке, показывая свой ум либо растягивают до невозможности, что приходится мотать до середины пока доберешься до нужного... У Вас же как написал Ваш подписчик, все с чувством и расстановкой=) - очень стильно, интересно и грамотно! Ваши уроки стоят хороших денег, не знаю, что я буду делать если они вдруг (не дай Бог) пропадут=D не успеваю просмотреть и впитать все знания которые Вы даете! СПАСИБО!!! Всего Вам самого доброго!!!!
Спасибо большое!!! Очень помогаешь! Желаю что бы мотивация не пропадала!
Благодарю! Мотивация на месте, желание делать есть, так что всё путём.
Спасибо урок супер!!
очень помог спасибо всех благ тебе!
Спасибо за полезное видео
Спасибо, что смотрите! =)
Спасибо, круто
А вы пользовались вот этим --> Robin image optimizer? Пишут что оптимизирует фотографии автоматически.
Приветствую. Подскажите после внедрения кода отмены сжатия. Плагин можно удалить? Спасибо!
Санёк спасибо ! Оч ждемс видео по тому как работать с html-тегами
Саш, не знаю как скоро будет, но постараюсь.
а что можно сделать, если фотки уже загружены на сайт, сейчас смотрю - и все весят больше 2 мб. всё надо сжимать и заново перезаливать?
Добрый вечер! Подскажите, пожалуйста, как быть с title и alt картинок на мультиязычном сайте?
Еще хотела задать вопрос немного не по данному видео. Скажите пожалуйста, если я использую конструктор Elementor это не ухудшает SEO продвижение? В этом плане лучше с ним или без него?
Нет, оптимизируйте с помощью плагинов.
На днях оптимизировал картинки для сайта. Исходные картинки TinyPNG сжал где-то наполовину. Затем я решил их пересохранить в имеющейся у меня программе ACDSee Pro 3, там при пересохранении тоже качество сжатия JPG можно выбрать. А затем результат подсовывал Tiny PNG. В итоге понял, что для оптимизации мне хватит и ACDSee, так как с некоторого процента сжатия он уже сжимает так, что TinyPNG выдает 0% сжатия. Групповую оптимизацию там тоже можно сделать. Интернет не нужен, ограничений на количество нет.
О, ну хорошо, что так. Буду знать, когда понадобится массово сжать изображения. Обычно при разработке по одной-две удобнее через сервис делать.
У меня вопрос когда оптимизируешь картинки плагином WP Smush тайтлы картинок тоже удаляются? буду благодарен за ответ
Я им не пользуюсь, но пришлось поставить и проверить. После установки тайтлы испарились. Деактивировал, активировал снова - вернулись. После оптимизации всё на месте.
Title и Alt хранятся в 2 местах: в медиабиблиотеке свои по умолчанию а для страниц и записей свои.
Smash оптимизирует картинки пользователей? К примеру если они могут на моем сайте ими делиться
пользуюсь для сжатия картинок программой Caesium, сжимает очень хорошо, можно выставить как качество в % так и размер изображений, да и ограничений нет.
Спасибо, нужно попробовать. Жаль, что под мак только CaesiumPH.
Подскажите пожалуйста. Я не давно обнаружил, что загруженная картинка имеет веб-страницу, как от этого избавиться, ведь эти страницы захламляют выдачу...
Привет, я например загружаю все фотки и изображения в формате svg (проблем с безопасностью не должно быть т.к. в плагине поставил настройку что js код через них запускать нельзя), и хотел спросить: с твоей точки зрения есть какие-либо минусы у данного метода?
Привет. Я тоже по возможности загружаю SVG. Однако, не всегда можно найти те же логотипы в векторе. Проблем быть не должно. в WordPress svg закрыты по большей части из соображений безопасности многопользовательских сайтов.
Перечитал ещё раз и не понял зачем фотки в svg? Иконки да, графику, которая изначально была в векторе, тоже да, но фотографии это изврат. SVG - это векторная графика, а фото - растровая. Марш читать чем друг от друга отличается!
Сделайте пожалуйста обзор на плагин SEO Rank Math. Думаю многим он был бы интересен!
Доброго времени суток, видео оказалось очень полезным. Спасибо Вам большое! Один момент: у меня нет вкладки Перекрытие фона. Использую последний Элементор. Где его искать?
Привет, Данияр! Похоже, вы тоже из Казахстана. У каждой секции на вкладке стиль есть такой раздел.
Я искал. Не нашел. Может переустановить элементор или другие плагины мешаются?
Возможно и мешают. Проверьте, обновлён ли браузер, попробуйте очистить кэш браузера и если это не поможет, то деактивируйте все плагины, кроме Elementor, а затем включайте по одному.
Здравствуйте Александр. Подскажите пожалуйста. Вот я сделал миниатюру в портфолио и на нее поставил ссылку со скриншотом. У скриншота большой размер. И когда нажимаешь по миниатюре yadi.sk/i/Zn-0oCHF-z5YGA, открывается вот такой вид - yadi.sk/i/lF_ngbVEuCbhvA Подскажите пожалуйста, а как сделать так, чтобы картинка открывалась на весь экран. Благодарю!
Как сделать такой сайт как у вас? Только знакомлюсь с ВордПресс
Здравствуйте! Поставил плагин WP Smush, с виду все работает правильно. В библиотеке справа у каждой картинки отчет, что все отработано. НО, ради интереса я скачал миниатюру ДО работы Smush и ПОСЛЕ - размер миниатюры одинаковый. Как такое может быть?
Может быть не все миниатюры указаны для сжатия?
Разобрался в чем дело - кэш браузера почистил и все стало ОК, спасибо Вам за вашу работу!
@@vvdanilov ларчик просто открывался ))
Так же не смог в редактор добавить кнопку изменения размера и типа шрифта. Помогите пожалуйста
Не совсем понял про кнопку. У каждых виджета, секции и колонки есть 3 вкладки: Макет, Стиль, Расширенные. Настройки шрифта производятся на вкладке Стиль. Посмотрите на канале есть плейлист посвящённый Elementor, найдёте ответы на многие вопросы.
И можно ли все вернуть обратно после оптимизации изображений плагином WP SMUSH
Видимо нет, поскольку он и оригинал жмёт. Не из чего будет восстанавливать.
Технический вопрос уместен?
Я перенёс на бесплатный хостинг Бегет по ftp файлы своего сайта с reg.ru , но открывается только главная страница, остальные - 503 Service Temporarily...
Что делать?
Конечно уместны. Скорее всего вы превышаете лимиты на бесплатном хостинге. Первым делом рекомендую как минимум сделать как в этих видео Memory Limit - ruclips.net/video/lnbi7SvFaPU/видео.html
Php 7+ - ruclips.net/video/ej8zDYOvqco/видео.html
Ну и поймите, что бесплатный хостинг совсем для начального уровня. К тому же, судя по всему Beget закрутил гайки с момента моего обзора так как много регистраций и большая нагрузка с сайтов. На бесплатном хостинге вам никто ничего не должен.
Есть такой плагин Imsanity-режет картинки я так понял, уменьшает и пиксели и размер качество вроде не хромает, не могу понять в чем разница между оптимизацией и обрезкой?
Надо обрезать фото или нет, если пиксели будут меньше а визуально фото такое же? В каком видео проверка картинок гуглом?
Обрезка (или кроп) - это уменьшение разрешения, а оптимизация - это удаление лишних данных из изображения и безопасное понижение качества. Imsanity делает не то, что я показал в этом видео. Кстати, нужно посмотреть этот плагин. Помню, что открывал страницу с этой девкой, но не ставил и не смотрел.
Говорил ведь в видео, что изображение нужно делать под тот размер, куда вы его вставляете. А дальше уже сами смотрите. Нравится, как оно выглядит - пожалуйста. Только имейте в виду, что могут быть пользователи с высоким разрешением и их число растёт.
Проверки картинок Google ни в каком. Он довольно капризный в этом плане и если поищете среди комментов, то найдёте один большой от зрителя. Убедитесь, что там те ещё танцы.
Разобрался в чем разница, Imsanity получается вообще только режет, то же самое можно и в сервисе сделать. Спасибо большое за видео и за разъяснение!
Да, судя по описанию, режет в как-то там высчитывая размер. Нужно будет поковырять его.
В глобальных настройках нет возможности перекрытия изображения. Как можно решить эту проблему?
Перекрытие настраивается на уровне секции на вкладке "Стили". Смотрите скриншот goo.gl/7nY5mh и другие уроки по Elementor на канале.
Добрый день. До недавнего времени оптимизировала изображения с помощью плагина Smush. Пока недавно не заметила, что в библиотеке медиафайлов "поплыло" отображение таблиц (текстовые записи стали из горизонтальных вертикальными). Отлючала по очереди все плагины, пока обнаружила, что при деактивации Smush все стало отражаться корректно. Вчера увидела, что в настройках Clearfy появился модуль для оптимизации изображений. Активировала его - и вот сегодня наблюдаю ту же самую "картину маслом" - вся библиотека медиафайлов опять отображается некорректно. В чем может быть причина этой ошибки?
Здравствуйте. Только ли это из-за плагинов оптимизаторов? Мне кажется нет. Дело в том, что эти плагины встраивают свои настройки в сетку библиотеки медиафайлов и возможно с чем-то ещё у вас конфликтуют. У меня всё в порядке.
@@DigitalAlex Добрый день. Вполне возможно. Когда поплыли таблицы, я обращалась с техподдержку хостинга. Там провели тесты и дали ответ, что причина в плагинах. Я по одному отключала, пока не увидела, что ошибку вызвал Smush. После подключения модуля для оптимизации ошибка отображения возникла вновь - такая же, как и была. Я не знаю, с чем это может быть связано и как это можно выяснить, поэтому и написала Вам здесь. Вот такая картина получается - что при включенном Smush, что при активированном модуле Clearfy :snag.gy/78xZ2N.jpg
@@user-tl8ru7lw3k А Imagify при этом у вас зачем стоит?
@@DigitalAlex уже не стоит) Да и в момент, когда делался скрин, этот плагин не был активирован. Его я ставила перед установкой Smush, но потом отключила, остановившись на Smush. Кстати, сейчас зашла проверить, не изменилась ли ситуация после недавнего обновления Smush - нет, все "поломано" в библиотеке. Но когда я хотела сделать скрин и, чтобы влезли " в кадр" выстроившиеся вертикально строчки, уменьшила масштаб - все вдруг стало на место.... Вернула 100% - опять все поплыло...
@@user-tl8ru7lw3k может быть у вас с разрешением что-то? На другом компьютере пробовали смотреть?
Можешь написать код, который ты вставляешь в снипппеты, чтобы вордпресс самовольно не оптимизировал изображения?
Точно, забыл его вставить. Уже в описании и вот:
//Сжатие изображений
add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );
Спасибо!
Как сделать кликабельную картинку в elementor с переходом на другую страницу
В виджете нужно выбрать Ссылка > Произвольная ссылка и вставить нужную ссылку
Здравствуйте. Спасибо отличный урок. Но у меня такой вопрос. Я загружаю на свой сайт картинки размером только 800х500. Никакие другие размеры я не использую. Название статьи - фото 800х500 - текст - фото 800х500 - текст - фото 800х500 и так далее... Что мне нужно поменять в настройках консоли Медиафайлы? Что отключить и где поставить галочки или убрать их, чтобы не создавались другие размеры фотографий, загружаемых на сайт? Мой сайт уже весит 15 ГБ!!! Па-ма-ги-т-е-е-е-е!!!😀😀😀
Это делается кодом или плагином на подобие wordpress.org/plugins/image-sizes-controller/
а ктo-нибудь еще рaбoтает с Дзен0м через EnotZen ?
Я юзаю robin имедж оптамайзер. В одном плагине и линивая загрузка и оптимизация изображений.
про регенерацию миниатюр - плагин пересоздает все под тему, но вот мусор он не удаляет.
его придется чистить вручную.
Мда уж, неприятность. Точно, вспомнил, что руками чистил на блоге. Давно его не использовал ибо как-то уже сразу получатся нормальные размеры в теме выставить и не трогать больше, либо вообще готовую тему использовать. Эх, деградирую потихоньку =)
так все отлично рассказал, добавь может где в описании, что нужно перед регенерацией пройти по папкам загрузки и по маске
*-*x*
выделить и удалить файлы миниатюр.
делов-то на 1 минуту.
upd: ютюб символы режет, маска:
звездочка тире звездочка x звездочка
Спасибо, но думаю новички не поймут.
Альт+контрол+шифт+эс в фотошопе :)
Да что ты говоришь. А теперь закинь в сервис и посмотри результат.
По поводу tinypng.com спасибо ) Действительно платформа весьма хорошая, очень помогли! ^_^
Для оптимизации картинок есть программы рекомендуемые гуглом... на винду не помню название, на линукс Trimage оптимизирует фото так,как хочет гугл)
Владислав, благодарю! Нужно поискать, а то оптимизацию сервисов он не всегда подхватывает.
Можешь не искать, я вспомнил название )) PNGgauntlet
Но сразу уточняю он оптимизирует изображение под требование гугла, но не уменьшает исходный размер изображения...
Но сразу уточняю он оптимизирует изображение под требование гугла, но не уменьшает исходный размер изображения...
Круто, благодарю! Уже качаю и потестирую на ближайших проектах.
как редактировать сниппет?
Также как запись или страницу. Если я верно понял о чём вы.
5 лет смотрю ваш канал. И только что допер, что "даблюпилаверс" - это WP-lovers, то есть любители WP. И что WP - это водрпресс
Regenerate Thumbnails запускает генерацию миниатюр самостоятельно в фоновом режиме. В итоге для изображения 1000х1000 на Astra Theme получаем кроме стандартных 150х150 и 300х300 (указанных в растройках) еще 100х100, 324х324, 600х600, 768х768 - место на ftp в мало - мальски товарном магазине заканчивается мгновенно. при этом качество миниатюр оставляет желать лучшего.
Причём тут Regenerate Thumbnails если Вордпресс при загрузке изображений делает то же самое?
@@DigitalAlex, согласен - Wordpress. У меня для некоторых изображений было сгенерировано по 9 миниатюр разных размеров. Видимо, это результат редактирования шаблонов страниц, смены тем и ручной закладке размеров миниатюр. Решил этот вопрос ручным удалением всех миниатюр и сбросом размеров изображений для WooCommerce во "внешний вид - настроить". Результат: 100х100 для бэкэнда, 150х150 для архивов и 300х300 - наверное тоже для архивов.
@@cyrilzotov3009 Да, в каждой теме и некоторых плагинах прописываются разные размеры. Тут да, как вы сделали. Удалить все миниатюры и сгенерировать заново.
Уважаемые зрители данного канала. Не пользуйтесь всякими улучшайзерами из сети. Готовьте изображения перед выгрузкой в сеть. Используйте PNG, JPEG в крайнем случае. Следите за META информацией в своих изображениях. И не доверяйте плагинам WP обработку своих картинок!
Ну а я что говорил в видео? Используйте сервисы.
И что не так с meta в изображениях после плагинов? И какие конкретно плагины вы выявили с подобным грешком?
хелп) как ускорить сайт?)
Вот так ускорение WordPress bit.ly/2L6pSYe