Поработав какое то время с WordPress вы наверное стали замечать, что после загрузки картинки на сайт и ее публикации, качество картинки падает, она становится не такая четкая как оригинал. Дело в том что WordPress «сжимает» картинки для уменьшения их веса, и это не всегда получается красиво, CMS просто пытается ускорить работу сайта, уменьшая вес картинки, тем самым ускоряя загрузку страниц.
Отключаем сжатие через PHP функцию
Для отключения сжатия картинок на WordPress можно добавить строку кода в файл function.php вашей активной темы, но лучше если это будет дочерняя тема, так как при последующем обновлении ваши изменения могут быть удалены. Находим файл function.php у себя на хостинге, подключившись по ftp, скачиваем его себе на компьютер, и открываем любым текстовым редактором (я рекомендую Notepad++)
Файл function.php на хостинге можно найти вот тут, я зашел на хостинг через панель хостинга, не используя ftp клиент.
Вот такой код содержит этот файл
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <?php // Exit if accessed directly if ( !defined( 'ABSPATH' ) ) exit; // BEGIN ENQUEUE PARENT ACTION // AUTO GENERATED - Do not modify or remove comment markers above or below: if ( !function_exists( 'chld_thm_cfg_parent_css' ) ): function chld_thm_cfg_parent_css() { wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( 'bootstrap' ) ); } endif; add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 ); // END ENQUEUE PARENT ACTION |
Если вы редактируете непосредственно основную тему, то код файла будет другой, он намного больше, но действия делаем те же самые что и с дочерней темой
Теперь что бы отключить сжатие картинок нужно добавить строку
1 | add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) ); |
Код файла стал выглядеть следующим образом
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <?php // Exit if accessed directly if ( !defined( 'ABSPATH' ) ) exit; // BEGIN ENQUEUE PARENT ACTION // AUTO GENERATED - Do not modify or remove comment markers above or below: if ( !function_exists( 'chld_thm_cfg_parent_css' ) ): function chld_thm_cfg_parent_css() { wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( 'bootstrap' ) ); } endif; add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 ); add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) ); // END ENQUEUE PARENT ACTION |
Теперь измененный файл function.php нужно загрузить на хостинг, с заменой старого файла.
Теперь задача сжатия изображений полностью лежит на вас, как на вэбмастере, что бы узнать как это лучше сделать, посмотрите статью по оптимизации изображений на этом блоге.
Если не помогло
Возможно вы не верно вставляете файл, используете его не в оригинальном размере, это тоже может сказываться на качестве изображении. Что бы избежать этой ошибки, оптимизируйте файл под нужный размер (в пикселях) в любом графическом редакторе, и только потом вставляете на сайт, при этом в диалоговом окне вставки медиафайлов, в правом-нижнем углу, выбирайте полный размер.
На этом блоге сжатие картинок не отключено, тематика сайта не требует качественных фото. Смотрите разницу ниже на фото, первое фото вставляется в «Среднем» размере, второе в полном, хотя по факту на сайте размер изображений одинаковый.
Плагин для оптимизации картинок
Для оптимизации изображений в автоматическом режиме, можно установить плагин TinyPNG, в его меню можно выбрать какие изображения должны быть сжаты.
Как понять что картинки грузятся без сжатия?
После проделанной работы по отключению сжатия, не всегда понятно перестал ли wordpress сжимать изображения, для того что бы убедится в этом, нужно посмотреть размер графического файла на компьютере и его же размер на хостинге, как смотреть на компьютере я надеюсь вы знаете, просто через «свойства» файла, или в любом нормальном файлового менеджере, а на хостинге проще всего через пункт меню нашего сайта на CMS WordPress — «Медиафайлы», выбираем нужный файл и смотрим его размер
Если размеры файлов совпадают, значит сжатие картинок отключено.
Добавил код в function.php дочерней темы, как описано в статье. Попробовал на
нескольких изображениях. Только иногда размер оригинального файла совпадал с
размером в библиотеке. Версия WordPress 4.9.8
Возможно кэширование изображений, либо разные форматы, какие изображение не грузятся в оригинале?