Оптимизация графики для сайта

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

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

Что же дает оптимизация изображений?

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

В каком формате сохранять изображение?

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

GIF

- Самый "взрослый" формат из используемых. Работает на благо интернета, с 1987 года. Использует всего 256 цветов... Позволяет создавать анимацию и поддерживает прозрачность, именно поэтому долгое время и был востребован в дизайне сайтов. В настоящее время используется все реже, так как технологии не стоят на месте, и найдено множество способов замены его возможностей. Отлично подходит для сжатия изображений состоящий из однородных заливок, включающих в себя малое количество цветов и создания простых анимационных иконок.

JPEG

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

PNG

- Более "молодой" формат изображений, опубликованный в 1996 году. В основном родился с целью замены устаревшего gif, поддерживает прозрачности и полупрозрачности. Стал отличным вариантом для сжатия изображений включающих в себя текст, плавные градиентные заливки, схемы и чертежи. Полноценной заменой gif не стал, по причине отсутствия возможности сохранения анимации. 

Конечно же в каждом конкретном случае нужно отталкиваться от конкретного изображения. Но думаю основные принципы сжатия и возможности форматов вы уловили и с успехом будете применять их на практике. Естественно стоит руководствоваться чуством меры, пережатие врядли станет плюсом при оформление сайта. Равновесие и гармония, залог успеха во всем включая этот момент веб-строительства.

Чем оптимизировать изображения?

Для оптимизации графики используются специальные программы (графические редакторы), лучшими и признанными лидерами среди которых можно назвать Adobe PhotoShop и Adobe Fireworks. Программ умеющих сжимать графику, на самом деле достаточно много. Это умеют делать и просмотрщики изображений и различные конвертеры файлов. Выбирать в какой программе работать вам, исходя из личных предпочтений и вкусов. Если же вы не имеете доступа к программам редактирования изображений или в недостаточной степени владеете таковыми, есть более удобное решение! Онлайн сервисы оптимизации изображений, на которых в несколько кликов вы сможете сжать исходный файл до нужного размера. Такие сервисы расчитаны на новичков и обычно интуитивно понятны с первых шагов. Хорошим примером такого сервиса можно считать PunyPNG, который работает со всеми основными форматами и показывает отличные результаты. Воспользовавшись поиском Яндекса или Гугла, вы без труда найдете еще множество аналогичных сервисов.

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