Вы хотите загрузить изображения на свой сайт WordPress, но не уверены, какие размеры или типы файлов должны быть у изображений? Вы не знакомы с процессом изменения размера и сжатия изображений для Интернета? В этой статье я объясню, почему использование правильного размера изображения важно для вашего веб-сайта, а также покажу вам, как изменять размер и сжимать изображения с помощью бесплатного фоторедактора GIMP.
Почему изменение размера изображений вашего сайта важно
Давайте начнем с того, почему изменение размера изображений на вашем сайте так важно.
Согласно информации WordPress.org, общий «физический размер» изображения играет огромную роль в производительности страницы веб-сайта. «Размер файла [изображения] определяет время, необходимое для загрузки вашей страницы; чем больше размер файла… тем дольше будет загружаться [страница]». Другими словами, загрузка файла большого размера на ваш веб-сайт снизит производительность любой страницы, на которую вы добавляете контент, что обычно проявляется в более низкой скорости загрузки страницы в аналитических данных вашего сайта.
«Размер файла [изображения] определяет время, необходимое для загрузки вашей страницы; чем больше размер файла… тем дольше будет загружаться [страница]».
-WordPress.org
Скорость загрузки страницы, также именуемая просто «скорость страницы», — это «насколько быстро загружается контент на вашей странице», согласно SEO-сайт Моз. Наличие более медленных страниц может привести к увеличению «отказов», который представляет собой причудливую метрику, представляющую сеансы, когда посетитель сайта покидает ваш сайт после просмотра одной страницы. Более медленные страницы также могут сократить количество времени, которое посетители проводят на страницах вашего сайта, поскольку люди могут испытывать нетерпение в ожидании загрузки содержимого страницы и быстрее покидать ваш сайт.
Эти показатели важны, потому что вы обычно хотите, чтобы пользователи проводили больше времени на вашем сайте и просматривали больше страниц на вашем сайте.
Они также важны, потому что они играют роль в том, как ваш сайт занимает место на страницах результатов поисковой системы или «SERP». Выдача это просто страницы результатов, которые отображаются, когда вы вводите слово или фразу в Google и нажимаете клавишу ввода. Поскольку изображения большего размера свидетельствуют о плохом веб-дизайне и отрицательно сказываются на опыте пользователя на вашем сайте, поисковые системы, такие как Google, могут оштрафовать ваш сайт за эти большие изображения и ранжировать ваш веб-сайт ниже других веб-сайтов, которые работают лучше.
Например, чем ниже рейтинг вашего веб-сайта в Google, тем меньше трафика получает ваш сайт и тем больше трафика достается вашим конкурентам, которые занимают более высокое место в результатах поиска.
Уменьшив размер файлов ваших изображений на вашем веб-сайте, вы можете улучшить скорость страницы и, таким образом, улучшить другие показатели, такие как отказов и время на страницеe, чтобы в конечном итоге улучшить свой рейтинг в поисковых системах.
Обратите внимание, что есть много других важных переменных, влияющих на ранжирование в поиске, поэтому исправление ваших изображений — это только часть надежной работы. SEO (Поисковая оптимизация) стратегия. Тем не менее, это, безусловно, очень важно для повышения рейтинга вашего сайта в таких местах, как Google, чтобы увеличить трафик вашего сайта.
Как изменить размер изображений для WordPress в GIMP
Так как же правильно изменить размер изображений для WordPress?
Вы можете уменьшить размер файла изображения, просто уменьшив общий размер изображения, используя масштабирование и обрезка перед тем, как загрузить его на свой веб-сайт. Кроме того, вы можете применить то, что называется «(сила)” к вашему изображению, чтобы еще больше уменьшить его размер.
GIMP, бесплатный редактор фотографий с открытым исходным кодом, может выполнять все эти задачи, а также экспортировать в рекомендуемые форматы файлов «следующего поколения», чтобы еще больше уменьшить размер файла ваших изображений и повысить производительность вашего сайта.
Масштабируйте изображение
Чтобы начать этот процесс, откройте изображение, которое вы хотите загрузить на свой сайт, в GIMP. Вы можете сделать это, перетащив изображение со своего компьютера в окно изображения GIMP, или вы можете просто перейти в «Файл»> «Открыть» внутри GIMP.
Если вы используете метод «Файл»> «Открыть», перейдите к расположению изображения на вашем компьютере в появившемся диалоговом окне «Открыть изображение» и дважды щелкните файл изображения, как только вы его найдете, чтобы открыть его в GIMP (или щелкните значок кнопку «Открыть» в правом нижнем углу диалогового окна).
В самом верху окна GIMP находится функция, называемая «Панель заголовка» (красная стрелка на изображении выше). Здесь вы увидите текущие размеры вашего изображения (увеличенное зеленое поле на фотографии). Мое изображение имеет размер 1920×1280 — первое число, 1920, представляет ширину моего изображения (в пикселях), а второе число, 1280, представляет высоту моего изображения. Окончательные размеры изображения, которые вы хотите использовать для своего изображения, будут зависеть от того, где в WordPress вы собираетесь использовать изображение, а также от того, какую тему вы используете.
В этом уроке я изменю размер своего изображения до стандартного размера 1200×630 пикселей, рекомендованного для изображений в сообщениях блога.
Имея это в виду, первое, что я хочу сделать, это обрезать свое изображение так, чтобы соотношение сторон моего исходного изображения соответствовало соотношению сторон рекомендуемого размера. Для этого я возьму свой инструмент обрезки, нажав Shift + C на клавиатуре или щелкнув значок инструмента обрезки на панели инструментов GIMP (красная стрелка на изображении выше).
Затем в параметрах инструмента для этого инструмента я поставлю флажок рядом с «Фиксированный» (зеленая стрелка) и щелкну раскрывающийся список, чтобы выбрать «Соотношение сторон» (синяя стрелка).
Я наберу «1200:630», чтобы установить соотношение сторон в текстовом поле под раскрывающимся списком (желтая стрелка). Это соответствует соотношению сторон рекомендуемого размера изображения, которым я хочу, чтобы мое окончательное изображение было.
Теперь, используя инструмент обрезки, я буду щелкать и перетаскивать мышью изображение, чтобы нарисовать область обрезки. Когда я отпускаю мышь, все, что находится за пределами области обрезки, становится затемненным (красная стрелка на изображении выше — при условии, что в параметрах инструмента установлен флажок «Выделить», что обычно установлено по умолчанию).
По умолчанию в моей области обрезки направляющие установлены как «Центральные линии» (желтая стрелка на изображении выше). Я могу изменить этот параметр, используя раскрывающийся список направляющих в нижней части параметров инструмента. Например, я изменю свои направляющие на «Правило третей» (зеленая стрелка). Различные варианты руководства здесь основаны на принципах фотографии, что позволяет легко кадрировать вашу композицию, используя эти принципы.
Вы можете навести указатель мыши на любую из сторон или углов области обрезки (т. е. выделенную область, обозначенную красной стрелкой на изображении выше), затем щелкнуть и перетащить, чтобы изменить размер границы области обрезки. Обратите внимание, что вы всегда можете увидеть размер области обрезки в полях «Размер», расположенных в параметрах инструмента (обведены зеленым на изображении выше). Вы захотите, чтобы общий размер области обрезки был больше, чем окончательный размер изображения 1200 × 630.
Вы также можете щелкнуть и перетащить мышь в середине области кадрирования (красная стрелка), чтобы изменить положение кадрирования на изображении.
Когда вы будете готовы обрезать изображение, щелкните один раз внутри области обрезки, и ваше изображение будет обрезано.
Обратите внимание, что если параметр «Удалить обрезанные пиксели» в параметрах инструмента не отмечен (зеленая стрелка на изображении выше), исходная граница изображения все равно будет отображаться вокруг вашего изображения в виде желтой пунктирной линии (красная стрелка). Вы можете восстановить исходное изображение, тем самым отменив обрезку, выбрав «Изображение»> «Подогнать холст по слоям». Будет экспортирована только область вашего изображения внутри границы холста.
Наше изображение теперь обрезано до нужного нам соотношения сторон, но если вы еще раз посмотрите на размеры нашего изображения в «Строке заголовка», вы увидите, что изображение имеет размер 1532 × 804 (обведено зеленым и увеличено на фотографии выше — ваши размеры, вероятно, будут немного отличаться в зависимости от того, насколько большой вы нарисовали область обрезки на своем изображении). Теперь нам нужно масштабировать наше изображение, чтобы оно соответствовало желаемым размерам.
Для этого перейдите в Image>Scale Image (красная стрелка).
В появившемся окне «Масштаб изображения» в разделе «Размер изображения» убедитесь, что значок звена цепи рядом с полями «ширина» и «высота» связан (красная стрелка на фотографии выше). Затем измените «Ширина» вашего изображения на 1200 (зеленая стрелка). Нажмите клавишу табуляции. Высота изображения автоматически обновится до «630». В разделе «Качество» убедитесь, что в раскрывающемся списке «Интерполяция» (синяя стрелка) установлено значение «NoHalo» или «LoHalo» для наилучшего качества изображения после масштабирования. (Для получения дополнительной информации об интерполяции см. посмотри мой мастер-класс на эту тему).
Нажмите кнопку «Масштаб», чтобы масштабировать изображение (желтая стрелка).
После завершения масштабирования проверьте размеры изображения в строке заголовка. Теперь вы должны увидеть размер изображения 1200×630 — именно тот размер, который нам нужен! Итак, что нам теперь делать?
Сжатие изображения путем экспорта в WebP
Обрезка и масштабирование изображения уменьшили размер файла за счет уменьшения высоты изображения с 1920 до 1200 пикселей и ширины с 1280 до 630 пикселей, но мы можем еще больше уменьшить размер изображения, применяя сжатие при экспорте изображения.
Итак, теперь нам нужно экспортировать изображение в формат файла, который будет применять сжатие к изображению без заметного снижения качества изображения. Хотя JPEG всегда является хорошим вариантом, теперь доступен еще лучший вариант: WebP.
Формат WebP применяет большее сжатие, чем JPEG, но меньше влияет на качество изображения, чем JPEG. Другими словами, вы получите более красивое изображение с меньшим размером файла. Кроме того, форматы WebP поддерживаются всеми 5 ведущими веб-браузерами.
Чтобы экспортировать в WebP, выберите «Файл»> «Экспортировать как» (красная стрелка).
Щелкните любую из папок в разделе «Места» (обведены зеленым), чтобы выбрать изображение на своем компьютере, куда вы хотите сохранить изображение. Вы можете просто дважды щелкнуть папку, чтобы войти в нее, и посмотреть, в какой папке вы находитесь, рядом с заголовком «Сохранить в папке» (красная стрелка). Затем переименуйте свое изображение во что угодно — просто убедитесь, что имя вашего изображения заканчивается расширением «.webp» (синяя стрелка), чтобы экспортировать изображение в формате WebP. Когда будете готовы, нажмите «Экспорт» в правом нижнем углу окна (желтая стрелка).
Далее появится диалоговое окно «Экспорт изображения как WebP». Убедитесь, что флажок «Без потерь» снят (красная стрелка). Обычно я устанавливаю «Качество изображения» на 80 (синяя стрелка — это процент, поэтому чем ниже процент, тем ниже будет качество изображения, но тем меньше будет размер файла изображения). Если ваше изображение не содержит прозрачности (т. е. логотип без фона), вам не нужно беспокоиться о ползунке «Качество альфа» (фактически, в эксперименте, который я провел, понизив качество альфа со 100 до 90 на самом деле немного увеличил размер файла изображения с прозрачным фоном с 8.50 кб до 8.52 кб). В раскрывающемся списке «Тип источника» вы можете оставить значение «По умолчанию».
Независимо от того, хотите ли вы отметить или снять отметку с каких-либо параметров метаданных, включая данные Exif, данные ITPC и данные XMP, решать вам. Данные Exif и XMP — это метаданные, обычно назначаемые вашей камерой, которые описывают информацию о вашей фотографии, например, какая модель камеры использовалась или какой тип объектива использовался. ITPC, с другой стороны, используется представителями прессы и присваивает вашему изображению такую информацию, как право собственности, права и лицензирование. Если вы не знаете, что делать, просто оставьте эти опции отмеченными.
Точно так же вы можете оставить флажок «Сохранить цветовой профиль» не отмеченным, поскольку большинство браузеров будут автоматически использовать цветовое пространство sRGB для отображения вашего изображения, которое использует GIMP. Если вы используете другой цветовой профиль, оставьте этот флажок установленным. Кроме того, если вы беспокоитесь о том, что изображение не отображается должным образом в определенных браузерах, оставив его включенным, вы только добавит несколько килобайт к общему размеру изображения.
Наконец, опция «Сохранить миниатюру» может оставаться неотмеченной, что еще больше сэкономит нам несколько килобайт.
Нажмите «Экспорт» (желтая стрелка на изображении выше), чтобы экспортировать изображение в формат WebP. При сравнении экспортированного файла WebP с файлом JPEG того же размера и с качеством, установленным на «80», изображение WebP имеет размер около 30 КБ, или примерно на 25% меньше, чем размер JPEG.
Теперь вы можете войти на свой сайт WordPress и перейти на страницу или публикацию, где вы хотите загрузить свое изображение, или просто перейти в раздел «Медиа» с помощью основной навигации и перетащить свое изображение в медиатеку. В моем случае я перейду к «Опубликовать» с помощью основной навигации (красная стрелка на изображении выше) и нажму «Публикация в блоге 1» (синяя стрелка), чтобы отредактировать эту запись в блоге.
Затем я открою боковую панель настроек публикации (красная стрелка), прокрутю вниз до раздела «Избранное изображение» и разверну этот раздел (синяя стрелка). Затем я щелкну изображение, чтобы заменить его своим новым изображением.
Я перейду на вкладку «Загрузить файлы» (красная стрелка) и смогу перетащить свое изображение со своего компьютера в WordPress (синие стрелки).
Наконец, я нажму «Установить избранное изображение», чтобы применить это изменение (красная стрелка).
Нажмите «Обновить» (красная стрелка), чтобы обновить страницу с новым избранным изображением.
Если я нажму «Просмотреть сообщение» (синяя стрелка)…
…теперь вы увидите новое избранное изображение вверху моего блога.
Вот и все! Если вы хотите узнать больше о разработке веб-сайта WordPress, я рекомендую ознакомиться с моим Курс WordPress 6.0 для непрограммистов! Или, если вы хотите узнать больше о GIMP, посмотрите мой Мастер-класс по GIMP 2.10 на Udemy!
