Сайт

Ускорение Работы Сайта – Подгонка Масштаба Изображений

ускорение работы сайта - подгонка масштаба изображений

Введение

Что такое подгонка масштаба изображения?

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

Преимущества подгонки масштаба изображений

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

Что вам понадобится

Перед тем, как вы начнете это руководство, вам понадобится следующее:

  • FTP доступ
  • Редактор изображений (Paint или любой онлайн редактор, к примеру picresize)

Шаг 1 — Анализ вашего сайта

На данном этапе, мы рекомендуем использование онлайн инструмента GTMetrix, так как он сразу отображает размеры изображения, которые должны быть использованы.

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

gtmetrix подгонка масштаба изображений

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

Шаг 2 — Подгонка масштаба изображений и их замена

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

picresize изменение масштаба

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

Шаг 3 — Проверка изменений

Для сравнения, вот результаты после загрузки правильно масштабированных изображений:

gtmetrix результаты

Убедитесь, что загруженные изображения имеют те же имена, что и предыдущие для избежание ошибок 404.

Заключение

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

Руководства по теме:

Добавить комментарий

Нажмите здесь, чтобы оставить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Начните экономить сейчас!

Хостинг и доменное имя от

руб.95
00