Дизайн

Как оптимизировать изображения для публикации в сети

   Оптимизация изображений

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

Оптимизация веса

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

   Для уменьшения веса картинок используются специальные программы, например, RIOT. Главное ее достоинство – это простой и интуитивно понятный интерфейс. Кроме того, в RIOT есть возможность преобразования нескольких изображений за раз, что весьма актуально, в случае, если на страницах сайта размещено большое количество картинок. Если вы не знаете английского – не беда, у программы есть и русифицированная версия, которую можно найти в интернете.

   Кроме RIOT существует еще и специальное расширение для браузеров Firefox и Chrome, которое называется Page Speed. С помощью него можно провести анализ скорости загрузки страницы и скачать оптимизированные варианты изображений. После этого их нужно заново загрузить на сайт. Названия оптимизированных картинок должны совпадать с предыдущими версиями.

   Если же изображений на сайте не слишком много, или же их необходимо отредактировать еще и с помощью других инструментов, то можно использовать графические редакторы вроде GIMP и Adobe Photoshop.

Оптимизация размера

   Время обработки страниц увеличивается и в случае наличия изображений с неправильными пропорциями. Это объясняется тем, что браузер сначала загружает оригинал, а потом уменьшает его согласно прописанным в тегах width и height размерам.

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

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

CSS спрайты

   CSS спрайт представляет собой несколько картинок, объединенных в один файл. Для каждого отдельного изображения указано местоположение на странице.

   Для CSS спрайтов находят самое разное применение. Например, можно сделать кнопку, которая меняет цвет при наведении на нее курсора или прикрепить к каждому блоку сайдбара иконку.

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

Рекомендации по работе с графикой

   1. Чем меньше на странице картинок – тем быстрее она загружается. Полностью убирать графику не нужно, но желательно удалить изображения, не несущие смысла и не являющиеся элементами дизайна.

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

   3. Не используйте flash-графику. Для оптимизации она бесполезна, а из-за своего веса еще и притормаживает работу браузера.

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