вход

Как оптимизировать изображения сайта

Как оптимизировать изображения сайта

Здравствуйте уважаемые читатели блога mainview.ru. В нашем современном мире, я бы сказал в визуальном мире, посетители сайтов уже ожидают увидеть некоторые устоявшиеся стандарты на посещаемых ими сайтах. Они уже не только привыкли видеть, но и ожидают от каждого нового сайта, в том числе и от вашего, увидеть определенный набор компонентов, они ожидают увидеть качественную графику, красивые слайд-шоу, вкладки и слайдеры, а также другие эстетически привлекательные способы представления информации на вашем сайте. Уже давно прошли дни сайтов, наполненных только текстом или парой картинок, взятых из заезженного клипарта. Их дни давно прошли, и это хорошо. Одной из причин того, что современные сайты теперь содержат все более качественную графику, конечно является стремительное развитие Интернета, его скоростей и возможностей. Подключение к Интернету стало гораздо быстрее, чем раньше. Давным-давно, средний владелец компьютера имел модем и подключение удаленного доступа к сети Интернет. Современные технологии превратили канал интернета из тропинки в скоростную трассу. Они принесли большие возможности.

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

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

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

1. Изменение размера изображений.

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

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

Современные системы для блогов, например, WordPress, имеют встроенные инструменты для изменения размеров изображений.

2. Сжатие изображений.

Чтобы уменьшить размер файла изображения, кроме изменения размеров изображения, нужно использовать сжатие. Два из наиболее распространенных форматов сжатия изображения JPG и PNG. JPG является форматом сжатия с потерями, а это означает, что чем больше вы сжимаете изображение, тем больше вы будете терять качество. Вы даже можете очень сильно уменьшить размер файла, но при этом станут заметны артефакты.. Вы можете компенсировать некоторые потери качества с помощью сглаживания или других методов. Но самый распространенный способ сохранить большие изображения, это использовать миниатюры и связать их с сжатыми полноразмерными изображениями.

PNG сжатие это сжатие без потерь и, как правило, лучше, чем сжатие изображений в также некогда популярном формате GIF. Но в конечном итоге PNG сжатие имеет больший размер файла, чем файл с сжатием JPEG.

3. Теги Alt и размеры изображения.

Согласно спецификации HTML вы обязательно должны указывать размеры изображения в теге <img>. Однако некоторое системы управления контентом не добавляют размеры изображения в тег <img>. Это приводит к постоянному перестроению и перемещению текста в процессе загрузки. Если вы указываете размеры изображения, то браузер сразу определяет место под изображение, а потом загружает его. Это препятствует перемещению текста, делает загрузку плавной и не утомляет глаза.

Каждому изображению на странице можно назначить специальный атрибут, который называется "альтернативный текст". Этот атрибут задается в параметре <ALT>. Основное назначение этого параметра это дать описание изображению. Текст в параметре <ALT> отображается на экране при наведении курсора на изображение, при загрузке изображения, а также в случае, если скачать изображение не удалось или показ изображений заблокирован в браузере.

Отдельная польза от задания "альтернативного текста" состоит в индексации поисковыми машинами. Поисковые машины не умеют пока считывать текст с изображения, они не индексируют изображения, поэтому все, что вы задаете в <ALT> остается единственным способом для описания картинки для поискового робота.

4. CDN и хостинги изображений.

В том случае, когда вы не можете изменить размер изображений, или увеличить степень сжатия файлов, и вынуждены загружать большие изображения, советую вам использовать сторонние хостинги изображений. Вам будут очень полезны специальные сайты, оптимизированные для хранения сотен тысяч больших изображений и выдерживающие частые HTTP запросы. Аппаратная часть их намного мощнее тех, где лежит ваш сайт. Вы можете значительно разгрузить свой хостинг, и увеличить пропускную способность с помощью сети CDN (content delivery network) или просто сторонних хостингов для изображений. Но здесь вы должны понимать, что подобные сервисы находятся далеко от вашего сайта, и тоже могут быть подвержены перегрузкам или иным проблемам. И это может быть платой за то, что вы решите уменьшить нагрузку на ваш сайт.

5. CSS спрайты.

Если вы используете в своем дизайне много мелких изображений, то вы безусловно будете в большом выигрыше от использования спрайтов. Спрайт это один графический файл содержащий набор более мелких изображений. По сути, спрайт это сводный файл, содержащий много или даже все изображения на странице. Вместо вызова каждого файла в коде, вы должны загрузить только один файл в качестве фонового изображения и сдвинуть его для загрузки соответствующего изображения. Например если у вас есть десять маленьких изображений, то объедините их в одно, и используйте его для фона с нужным сдвигом. Результат выглядит идентично, но вместо загрузки 12 файлов изображений, у вас загружается только один. Несколько запросов HTTP для маленьких изображений приводят к более высокой загрузке на сервере, чем один запрос, для большого изображения. Кроме того, один файл спрайта будет меньше, чем сумма нескольких файлов изображений.

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

Хорошо если вы будете придерживаться этого по всему вашему сайту, если вы создаете сайт, составьте план оптимизации перед созданием сайта, разработайте систему для реализации, и придерживайтесь своего плана.

 

Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
Оставить комментарий

Статья → Как оптимизировать изображения сайта

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.