В этой записи я вам расскажу какие форматы изображений лучше использовать для сайтов, какие сервисы используют для конвертации картинок из одного формата в другой, какие сервисы используют для сжатия изображений.
Какие форматы лучше всего использовать?!
Необходимо определять подходящий формат для ваших изображений. Выбор неверного формата изображения, может существенно увеличить размер файла.
- GIF – идеально подходят для изображений с несколькими цветами, например логотип.
- JPEG – отлично подходят для детализированных изображений с большим количеством цветов, такие как фотографии.
- PNG – ваш выбор, когда вам нужно высококачественное изображение с прозрачностью.
Сервисы которые я использую для конвертации:
- Iloveimg – https://www.iloveimg.com/ru/convert-to-jpg
Сайты для сжатия изображений
Оптимизировать изображение можно двумя способами: используя программы или онлайн сервисы в Интернете для сжатия изображений. В первом случае от Вас потребуются определенные знания для работы с той или иной программой, а вот воспользоваться онлайн сервисами может каждый. От Вас лишь требуется загрузить нужные изображения, а сервис сам оптимизирует их и выдаст ссылку на скачивание уже сжатых файлов.
Сайты которые я использую для сжатия изображений:
- Iloveimg – https://www.iloveimg.com/ru/compress-image
- Optimizilla – http://optimizilla.com/ru/
Использование спрайтов
Спрайты это изображения которые состоят из нескольких небольших картинок. Как правило спрайты используют для иконок, например иконки социальных сетей. Для того чтобы использовать выбранную картинку (часть набора), программист с помощью CSS стелей отображает только часть изображения.
Благодаря этому способу вы можете загрузить лишь 1 изображение, которое будет хранить все иконки.
Спрайты выглядят так
Для добавления выбранной иконку необходимо указать её координаты.
CSS стили:
.icon {
float: left;
background: url('http://prog-time.ru/wp-content/uploads/2019/02/837d9099300dc42d37756bc7217195a7.png');
width: 48px;
height: 46px;
}
.icon1 {
background-position: 68px 61px;
}
.icon2 {
background-position: 68px 61px;
}
Html код:
<div class="icons_sprite">
<div class="icon icon1" ></div>
<div class="icon icon2"></div>
</div>
Получается что вы можете установить все эти иконки, загрузив лишь одно изображения.
Lazy load
По умолчанию все изображения на странице загружаются сразу при загрузке страницы. Если на вашей странице имеется большое количество изображений, то их подгрузка может занять много времени. Это сильно заметно на страницах с каталогами или галереями.
Lazy load — это плагин который позволяет загружать изображения, по мере появления их в зоне просмотра.
О нем я рассказывал в данной записи — http://prog-time.ru/nastrojka-plagina-lazy-load-xt-dobavlenie-lenivoj-zagruzki-izobrazhenij-na-sajt/
Вы можете сказать что я пытаюсь использовать дополнительную библиотеку, которая тоже будет иметь вес и нагружать сайт, тем самым одну нагрузку заменяю другой.
Да это так! Но по факту, данная библиотеку имеет крошечный размер, так как состоит из пары строк кода.
Я думаю что это будет самый продуктивный метод, который увеличит скорость загрузки сайта.
