Компьютерная помощь » Советы » Подготавливаем изображения для публикации в вебе
Навигация
Популярное

    Статистика

    Материалов: 161 [+0]
    Пользователей: 846 [+2]

    Всего онлайн : 4
    Пользователей: 0
    Гостей: 4


    Последние комментарии
    HI-tech:
    Название темы
    Просмотров
    Ответов
    Автор
    Последний
    0

    Подготавливаем изображения для публикации в вебе

    Автор: filinкатегория: Советыдата: 5-11-2014, 17:09

    Images

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

    Так как же все-таки подготовить картинки и оптимизировать работу сайта или собственной веб-странички и не потратить на это кучу времени?

    В этом нам поможет растровый редактор, вроде Adobe Photoshop или другой с похожими функциями (из бесплатных мы рекомендуем GIMP). Я буду объяснять на примере Photoshop, так как именно этот редактор наиболее распространен на пользовательских компьютерах.

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

    Images1

    Откроем Adobe Photoshop и в меню Image -> Mode просто изменим цветовое пространство RGB на Grayscale.

    Images2

    Сохраняем:

    Images3

    Чудеса! Наш файл стал весить 281 килобайт, совершенно не потеряв при этом своего качества. После этого желательно проверить разрешение картинки: зайдем в меню Image -> Image size и посмотреть в графу ”Resolution".

    Images4

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

    Images5

    Если там цифра отличная от 72, просто измените ее и подтвердите изменение, нажав кнопку ”ОК".

    Однако, это еще не все. Файл, снятый на камеру или отредактированный в Adobe Photoshop имеет, помимо самого изображения, кучу служебной информации, опять-таки увеличивающей вес нашего файла. Чтобы избавиться от нее и еще больше снизить вес изображения, нужно в меню File выбрать пункт Save for web…

    Images6

    В появившемся окне выбрать наиболее приемлемое качество изображения (я выбрал качество Very High, что соответствует 80-ти единицам) и нажать Save.

    Images7

    Невероятно! Наш файл стал весить 90 килобайт! После выполненных процедур с подготовкой наш файл стал легче почти в 10 раз.

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

    Попробуем теперь подготовить файлы с жестким касанием цветов и тонов. Возьмем для примера логотип AMD ATI. Как мы видим, используется всего 4 цвета: белый, черный, красный и зеленый. Плавных переходов нет, поэтому наш файл весит 184 килобайта.

    Images9

    Снова заходим в меню File -> Save for web… и выбираем расширение не JPEG, а GIF. Выставляем количество цветов, при котором качество картинки не изменится (у меня получилось 5) и сохраняем.

    Images8

    Фантастика! Наше изображение стало весить 3 килобайта!

    Для подготовки изображений для нашего блога мы пользуемся именно таким способом, поэтому его страницы загружаются быстро даже на медленном Dial-up соединении. Вообще, работа с вебом замечательно предусматривает работу с форматами: JPEG (в качестве фотографий и изображений), GIF (для вывода на экран мелких элементов и немногоцветных изображений без плавных переходов) и PNG (для создания элементов оформления страниц). Почему PNG? Все просто — этот формат поддерживает альфа-канал (прозрачность ненужных областей изображения). Использование более эффективного алгоритма сжатия изображений с альфа-каналом, дает этому формату больше преимущества для применения в качестве элементов веб-дизайна, чем GIF.

    В процессе подготовки статьи я использовал английскую версию Adobe Photoshop под Mac OS в силу того, что в английской версии названия пунктов меню остаются неизменным, а в русифицированных сборках меняется от версии к версии и к тому же сильно зависит от качества локализации. Операционная система никак не влияет на работу в редакторе, поэтому пункты меню под Windows будут называться абсолютно так же.

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




    Теги:

    Другие новости по теме:


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

    Популярные теги