Подкаст 10. Размер изображений на сайтах и скорость их загрузки

Рубрика: Подкасты Опубликовано: 11.03.2021
Стенограмма видеозаписи:

Добрый день. Вы слушаете 10-ый подкаст от дата центра MouseDC.ru. У микрофона Алексей Гуржиев.

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

Запрет Twitter в России

Но сначала новость одной строкой. С 10 марта Роскомнадзор начал замедлять скорость работы соцсети Twitter в России. Скорость замедления для мобильных пользователей составляет 100%, для персональных компьютеров 50%. Поэтому наши публикации там будут выходить только по мере возможности. К слову, следующим кандидатом на замедление является FaceBook.

Размер изображений

Вернёмся к теме подкаста.

Один из владельцев сайтов на нашем хостинге пожаловался на медленную загрузку изображений. Техническая поддержка определила проблему при первом же взгляде на титульную страницу сайта. Там было размещено больше 10 фотографий, каждая из которых имела размер примерно в пятнадцать мегабайт. Возможно, на этом предложении вы уже догадались, в чём заключается проблема нашего клиента, но давайте разберём всё подробнее.

Хоть современные линии связи и являются невероятно быстрыми, по сравнению с тем, что было в конце 20 века, но даже сейчас существует предел их физических возможностей. Вспомним то время. Примерно в середине 90-ых годов существовала фраза "поставить сайт на загрузку". То есть открыть сайт в браузере и ждать, пока он полностью загрузится. За это время можно было пойти заварить себе чашку кофе и принести её с кухни к компьютеру.

Тогда большинство пользователей выходило в интернет через модем на телефонной линии, который мог работать со скоростью до 56 килобит в секунду. А по факту скорость была в десять раз меньше. Поэтому в то время все вебмастеры понимали, что от скорости загрузки сайта зависит его посещаемость. Из-за чего оптимизацией сайта занимались очень скурпулёзно. Отсекая от сайта всё лишнее, экономя каждый байт информации. Но даже при таких улучшениях линии связи не позволяли большим сайтам загружаться быстрее, чем за несколько минут.

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

Но с появлением выделенного интернета сайты начали грузиться буквально за секунды. Поэтому работа над оптимизацией изображений уже стала не такой сложной. Одновременно с этим стали намного доступнее услуги хостингов и возросла цифровая грамотность населения. Из-за чего начался бум личных блогов. Теперь каждый может создать себе сайт буквально в пару кликов. И при этом не нужно знать языки программирования.

Со временем мысли о необходимости оптимизации изображений вообще отошли на второй план. И как оказалось, зря. Потому что к второму десятилетию 21 века резко начали расти возможности камер. Теперь наши фотографии содержат десятки миллионов пикселей. А размеры фотографий могут достигать десятков мегабайт. К сожалению, подобного технического прорыва в скорости передачи данных не произошло. Из-за этого мы опять пришли к проблеме слишком больших изображений на сайтах, которые медленно грузятся.

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

Адаптация изображения для сайта

Представим, что нам нужно опубликовать изображение размера стандартного монитора FullHD. То есть 1920 на 1080 пикселей. Такое изображение лучше всего делать в формате JPEG. Этот формат поддерживается большинством устройств и обладает отличной компрессией. Количество точек на дюйм лучше установить на значение не больше 100 (обычно используются значения 72 или 92). Качество изображения лучше ставить в 70%, чтобы не потерять чёткость и не сделать файл слишком большим. Таким образом на выходе должен получиться файл с размером не больше 200-300 килобайт. Это будет приемлемый размер для главного изображения на странице сайта. К примеру, для главной иллюстрации к статье.

Если по каким-то причинам изображение получается больше, чем 300 килобайт, то стоит поставить меньше качество. К примеру, не 70, а 50%.

А теперь вернёмся к владельцу сайта на нашем хостинге. У него на титульной странице было 10 фото размером в 15 мегабайт каждое. То есть контент сайта был размером не менее 150 мегабайт. А такой огромный объём данных не может быть быстро передан современными линиями связи.

Владелец сайта из лучших побуждений хотел показать всем качественные фотографии. Но посетители уходили даже не дождавшись его полной загрузки.

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

На этом завершаем наш подкаст от дата центра MouseDC.ru. Подписывайтесь на наши социальные сети и регистрируйтесь на хостинге. Обязательно отправляйте свои вопросы в нам техническую поддержку, через личный кабинет.

У микрофона был Алексей Гуржиев. До встречи в следующих выпусках.
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Cмотрите другие статьи:
Была ли статья полезной?
Была ли эта статья полезна? Есть вопрос?
хостинг для сайтов
Закажите недорогой хостинг Заказать

всего от 290 руб