Многие пользователи совершают ошибку, сразу же загружая на сайт фотографии, полученные с камеры или телефона. Эти фотографии, как правило, имеют очень высокое разрешение и весят десятки мегабайт. Поэтому их использование приводит к существенному замедлению загрузки страниц и снижению рейтинга сайта в поисковых системах. Кроме того, использование очень «тяжёлых» файлов быстро заполняет дисковое пространство сервера, и администраторам приходится переводить сайт на более дорогой тариф.
Разделы урока
Поскольку CMS Joomla автоматически не оптимизирует картинки под потребности пользователя, то именно редактор или контент-менеджер должен позаботиться об их подготовке.
Ключевые этапы оптимизации картинок
- Подбор правильного размера картинки, чтобы она не была слишком большой и не перегружала страницу.
- Выбор правильного формата изображения (JPEG, PNG или WebP).
- Уменьшение веса файла без потери качества для быстрой загрузки страницы сайта.
Подбор правильного размера картинки
Вы должны заранее определиться с тем, какими будут размеры картинок в той или иной категории материалов. Например, если вы публикуете новости сайта, то нужно создать картинку для краткого описания новости (это изображение будет отображаться в категории материалов или на главной странице) и для страницы с полным текстом статьи. Обычно это одно и то же изображение.
Картинка должна выглядеть чётко и гармонично в макете сайта. Для этого рекомендуется соблюдать одинаковое соотношение сторон, например 16:9 или 4:3, в зависимости от дизайна шаблона. Это позволит избежать «рваных» блоков и сдвига вёрстки. То есть, если вы в одной статье использовали картинку с соотношением сторон 16:9, а в другой — 4:3, то вполне логично, что такие материалы будут выглядеть непропорционально.
Я рекомендую публиковать в материалах картинки размером 800х600 пикселей. Ведь, если вы будете делать репост статьи в социальные сети, то соотношение сторон 4:3 будет хорошо смотреться где угодно. А вот если соотношение сторон будет 16:9, то при перепубликации материала в Facebook или при отправке ссылки на статью в Viber такая картинка будет обрезана самим сервисом и может потерять свою привлекательность.
Файл картинки с размером 800х600 пикселей весит в разы меньше, чем исходное фото с телефона на 4032х3024 пикселей. Например, фото размером 4032х3024 весит 1,47 Мб, а после уменьшения до размера 800х600 оно весит уже 68,8 Кб, что почти в 22 раза меньше.
Вот почему так важно уменьшать размер фотографий перед их публикацией на сайте.
Внимание.
Если вы публикуете картинки, на которых напечатан какой-либо текст, то уменьшение размера может привести к плохому отображению надписи (размытие, нечёткость). Поэтому, если для вас важно сохранить чёткость изображения, то можно не соблюдать норму размера в 800х600 пикселей. Попробуйте различные варианты уменьшения, чтобы достичь максимально приемлемого варианта.
Выбор правильного формата изображения
На сегодняшний день контент-менеджеры используют следующие форматы:
- JPEG (JPG) — лучше всего подходит для фотографий и картинок с большим количеством цветов и оттенков. Благодаря алгоритму сжатия, этот формат позволяет существенно уменьшить вес файла, сохраняя приемлемое качество. Используйте JPEG для изображений в новостях, блогах или фотогалереях.
- PNG — оптимальный формат для графики с прозрачным фоном.
- WebP — современный формат, сочетающий преимущества JPEG и PNG.
- GIF — подходит для простых анимаций.
Если ваша цель быстрая загрузка новости или статьи, то лучше использовать формат JPEG или WebP. Если же вам нужно подчеркнуть детали графики или сохранить прозрачный фон — выбирайте картинки в формате PNG.
Уменьшение веса файла
Даже правильно подобранный размер и формат картинки не гарантирует быстрой загрузки страницы, если файл весит слишком много. Большой «вес» изображений — это одна из самых распространённых причин медленной работы сайтов, в том числе и тех, которые работают на CMS Joomla.
Оптимизировать файлы можно с помощью специальных онлайн-инструментов, которые уменьшают объём без заметной потери качества.
Сегодня существует большое количество онлайн-сервисов, помогающих быстро сжать изображение:
Использование этих сервисов позволяет уменьшить вес файла в несколько раз. Например, фотография размером 1,5 Мб после оптимизации может весить на 75-80% меньше. При этом она не теряет своих визуальных качеств.
Примечание.
Я рекомендую использовать сервис OptimiZilla, потому что этот инструмент показал лучший результат, когда я взял одну и ту же фотографию и оптимизировал её на всех четырех вышеупомянутых сервисах.
Подготовка картинки в программе Paint
Чтобы оптимизировать фотографию перед публикацией на сайте:
- Откройте фото в программе Paint: Файл → Открыть (Ctrl+O).
- На вкладке «Главная» выберите «Изменить размер» (Ctrl+W).
- В окне «Изменение размеров и наклона» в блоке «Изменить размер» выберите «пиксели».
- В поле «По горизонтали» введите нужное значение для ширины картинки (Например, 800).
- Поле «По вертикали» должно измениться автоматически. Например, если ваше фото имеет соотношение сторон 4:3, то когда вы укажете ширину картинки 800, то высота автоматически изменится на 600. Если же картинка имеет соотношение сторон 16:9, то при вводе 800 в поле «По горизонтали», значение поля «По вертикали» автоматически изменится на 450.
- Нажмите OK.
- Сохраните картинку в формате JPEG: Файл → Сохранить как → (Сохранение в формате JPEG).
Визуальная инструкция по изменению размера картинок в Paint
Угостить автора чашечкой кофе