Вы не зарегистрированы

Авторизация



Оптимизация изображений, размещаемых на страницах ОК

 

«Вы всегда можете получить то, что хотите,
но если постараетесь, то, возможно, это будет то,
что вам нужно».
Мик Джаггер
 
    Одна из самых распространенных ошибок начинающих (и даже опытных) пользователей ОК – излишнее увлечение графикой. Графика размещается везде и всюду – в альбомах, в размещаемых Вами презентациях и, конечно же, на создаваемых Вами страницах.
 
   Что мы понимаем под оптимизацией графики, размещенной на сайтах, в частности, в Открытом классе?
 
   Под оптимизацией графики сайта (оптимизацией изображений) подразумевают, в первую очередь, уменьшение размера в Кб (килобайтах) рисунков и фотографий сайта с целью уменьшения времени загрузки веб-страниц.
Второй, не менее важной задачей оптимизации графики, является выбор наиболее подходящего графического формата для рисунков и фотографий, а также цифровая обработка рисунков и  фотографий с целью повышения их качества и резкости.
 
   К чему приводит ситуация, когда изображения (картинки, фотографии и т.д.) размещаются без оптимизации?
 
1. Уменьшается скорость загрузки Ваших материалов при их размещении в ОК (помните, что существует ограничение по объему – не более 100 Мбт (мегабайтов), хотя мы бы не советовали размещать такие большие файлы).
 
2. Как бы не были мощны новые серверы, на которых отныне размещается ОК, вряд ли имеет смысл забивать их огромным количеством необработанных изображений. Как и любой технический ресурс, объемы сервера – это исчерпаемый ресурс… А так много всего интересного, нужного и важного, что просто необходимо разместить на нашем сайте!
 
   Если Вам удастся научиться правильно оптимизировать изображения, то это позволит значительно уменьшать их объем при минимальной потере в качестве.
 
   Итак, с чего же мы начнем? Нам надо решить две проблемы:
 
– выбор формата изображения;
 
– выбор графического редактора или диспетчера рисунков (например, MS Picture Manager).
 
1. В настоящий момент в Интернете используется три основных графических формата: GIF, JPEG (JPG) и PNG. Причем сказать однозначно, что всегда надо использовать только тот или другой, невозможно. Все зависит от ситуации, в которой Вы планируете использовать изображение.
 
  • PNG – этот формат обеспечивает сжатие исходного файла без потерь. Формат PNG хорошо передает полутона, поддерживает прозрачность. PNG не позволяет создавать анимационных роликов.
          PNG является идеальным форматом в тех случаях, когда размер файла не имеет значения, например, для скриншотов.
 
  • JPEG (JPG)  – это графический формат, который разрабатывался специально для хранения оцифрованных фотографий (т.е. как раз тех фотографий, которые Вы загружаете в Открытый класс). Необходимо отметить, что при сжатии информации с помощью данного формата неизбежны потери, т.е. после сжатия качество изображения будет  несколько отличаться  от исходного.  Но не следует опасаться этой ситуации, т.к. JPEG (JPG) разрабатывался с учетом восприятия цвета человеческим глазом, и алгоритм сжатия построен таким образом, что на многоцветных рисунках с большим количеством полутонов и плавных переходов цвета эти потери будут практически незаметны. Однако на рисунках с малым количеством цветов и резкими переходами из одного цвета в другой (например, надписи или схемы) произойдет размытие этих границ, в результате чего изображение станет нечетким.
 
  • GIF – исторически появился самым первым. Данный формат поддерживает сжатие без потерь и позволяет хранить изображения, содержащие не более 256 цветов, при этом один из цветов может быть прозрачным (т.е. при выводе картинки в броузере на месте прозрачных пикселей отображается фон). С его помощью возможно создавать простейшие анимационные ролики.
 
   Резюмируя, можно рекомендовать следующие варианты применения рассмотренных графических форматов:
 
- JPEG (JPG)  лучше применять для цифровых фотографий и больших рисунков с плавными цветовыми переходами, что позволит добиться уменьшения размеров исходного графического файла при небольшой потере качества;
 
- PNG подходит для небольших многоцветных изображений, в которых присутствуют как плавные переходы, так и четкие контуры, например, логотипов, иконок, кнопок и надписей с градиентной заливкой букв;
 
- GIF является лучшим форматом для малоцветных изображений.
 
2. Как оптимизировать графику с помощью Microsoft Office Picture Manager и Photoshop, Вы можете узнать, изучив соответствующие инструкции  (ссылки размещены внизу страницы). Какой из этих программных продуктов выбрать – это дело вкуса. Попробуйте оба варианта и выберите тот, который Вам понятнее, доступнее и, на Ваш взгляд, эффективнее (помним, что мы рассматриваем только вариант наличия у Вас лицензионного программного обеспечения!).
 
   Также предлагаем Вам интересные материалы о некоторых особенностях восприятия изображений, размещенных в Интернете, человеком (Психология пользователей и оптимизация изображений для веб) и о некоторых особенностях графических форматов (Тройственный союз).
 
   Оптимизация изображений для веб-страниц – довольно трудоемкая работа, требующая как определенных знаний, так и умения подбирать оптимальные параметры экспериментально. Но тщательное выполнение этой работы даст свой результат: у вас не будет ситуаций, когда Ваше изображение никак не хочет загружаться, или на странице оно будет занимать слишком много места и т.д.
 
   Полезные ссылки: