[X] Помощник

[Set]

«Байты и пиксели» или «лучше меньше да лучше»
На полноценную статью это не сильно подходит, но кажется этот вопрос волнует многих.

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

Инвентарь: Фотошоп (у меня 7й, у вас какой хотите). Фотка в хорошем качестве(я взял свой портрет - Jpeg в 12 качестве.1200*1600 784 KB), мыша, компьютер, желание опубликовать этот шедевер.

Шаг 1й- грузим фотошоп и загружаем в него фотку… (процесс вроде несложный- все должны справиться)

Шаг2й – смотрим на загрузившееся изображение и начинаем предаваться философии.

Итак, философия: давайте подумаем зачем нужен такой большой размер фотки? (ответ, чтоб красиво ее распечатать.), но мы то собираемся выкладывать ее в нет, поэтому нам такой габарит абсолютно не нужен… а какой нужен? Вот на этот вопрос мы и попытаемся ответить… Давайте подумаем- какие мониторы сейчас стоят у среднестатистического пользователя? 17” (может я и отбился от жизни, но у меня именно 17шка… и у всех моих знакомых 17, и 19 дюймовки у некоторых пижонов… ) а Какое разрешение стоит на всех этих среднестатистических мониторах? (обычно 1024*768, ибо редкий семнадцатидюймовник поддерживает большее разрешение на приемлемой частоте. (надеюсь никто из вас не использует частоту 60 герц ?)) Вот у нас уже есть кое-что, чтобы понять какой размер картинки наиболее приемлем для выкладывания его в Интернет.
Может возникнуть вопрос, а почему нельзя выложить больший размер? Отвечу- лично меня бесит возить мышкой по картинке чтоб рассмотреть ее всю. Из-за неформата теряется ощущение целостности и разглядывая детали можно упустить саму идею рисунка, да и жрут большие размеры намного больше трафика.
На самом деле размер картинки должен быть еще меньше- не забывайте про рабочие поля Виндовса, которые одевают рисунок в своеобразную рамочку и стремятся после загрузки сжать картинку так, чтоб она влезала в окно (что смотрится безобразно)- это еще один повод не выкладывать картинки размера большего, чем пользователь может окинуть взглядом, без лишних телодвижений. Итак приходим к выводу что размер публикуемого рисунка должен быть меньше 1024*768. если идти к следующему ГОСТу на работу монитора, то получаем 800*600, я бы порекомендовал остановиться именно на этом размере, как стандарте, и начинать плясать именно от него… максимальные габариты нашего рисунка должны быть 800 по горизонту и 600 по вертикали… (это правило не должно распространяться на валлпейперы, так как, их просто необходимо, публиковать в 1024*768).
Я специально взял фотку с габаритами, где вертикаль меньше горизонтали и теперь мы будем изменять ее размер, чтоб она нормально смотрелась.

Шаг-3йВозвращаемся в фотошоп и давим Image- image size...
Вот здесь то мы теперь веселиться и будем… так как правильно ужать не всегда удается с первого раза (особенно если картинка не стандартного размера, а какая-нибудь 832*579)
Не забывайте, что при уменьшении, чтобы избежать артефактов необходимо добиваться кратных чисел. Желательно, чтобы размеры были в четных числах. Причем считается, что уменьшение лучше делать в несколько шагов, каждый раз деля исходный размер на 2 (если это возможно).
Итак :
шаг 1й- получили рисунок размером 600*800 (что пока не соответствует нашим требованиям)
Шаг 2й –на выходе имеем рисунок с габаритами 450*600. никаких глюков и артефактов не обнаружено. Рисунок хорошо просматривается, понятно что на нем происходит. Габаритная цель достигнута

Шаг 4й- или «что посмеешь, то и пожмешь»…
Теперь начинаем сохранять файл в Jpeg, чтобы он без потери качества (видимого качества) занимал максимально мало места. В общем искать приемлемого соотношения размер / качество.

Итак изначально у нас был Файл максимального качества размером 786кил.
Сохраняем его в Jpeg 12 качества в Формате «baseline (standart)», мудрый фотошоп сразу подсчитывает нам, сколько этот файл будет весить и сколько закачиваться по времени- получаем размер 262килобайта. Ну а качество у нас не изменилось
Лирическое отступление:
в литературе есть мудрая мысля, что если много раз сохранять один и тот же файл в Jpeg, то в итоге мы получим грязый и мутный картинок, в котором будет трудно что-либо разобрать. Поэтому НИКОГДА не сохраняйте промежуточные стадии в Jpeg- этот формат для публикации, а рисовать надо в форматах с обратной компрессией.
Конец лирического отступления.

Теперь попробуем еще сократить размер рисунка в килобайтах…
Не изменяем качество, но изменяем режим на «Baseline optimised» - итог 254кб изменение качества незаметно.
Следующий режим Progressive – как я понимаю, проводит многоразовое сжатие, что позволяет еще уменьшить размер файла- 242кб при 5 scans

Но ведь 12 режим – это идеал. На самом деле обычно используют от 9 до 6 качества- здесь изменения также почти незаметны, а вес файла уменьшается серьезно, поэтому рассмотрим именно эти режимы поподробнее…

7 качество: Baseline Standart – 70 kb
Optimised- 68 kb
Progressive- 68kb
Начали появляться артефакты на границах высокой контрастности (правда артефакты эти, я нашел лишь с четвертой попытки), однако уменьшение размера больше чем в 3 раза стоит того.

А вот при сохранении в 9 качестве я как ни старался так и не смог найти различия с 12 качеством, а размер составил 108, 106 и 104 килобайта соответственно (то есть меньше чем в 2 раза)

Ради смеха попробовал сохранить картинку в качестве 0:
результат- 27, 26, 26 кб, при абсолютной невозможности понять что происходит на картинке. (размер сократился примерно в 9 раз)

Резюме: Качество пожатого в Jpeg рисунка зависит не только от степени сжатия. Мы взяли в качестве примера фотографию, где рядом очень мало одинаковых пикселей. (а фишка сжатия как раз и построена на усреднении цвета соседних полей) поэтому качество рисунка зависит как раз от площадей одинакового цвета и качество двух разных изображений пожатых в одном и том же режиме может разниться (для некоторых рисунков и 3 уровня может быть достаточно, если детали крупные и рисованные одним цветом, а для фоток 7 уровень уже дает косяки). В конце концов вы сами должны решать, какое качество необходимо для вашего рисунка, но просто хочется посоветовать не ленитесь и ищите тот уровень и метод сжатия, который дает не только хорошее качество но и хороший размер. Это не так уж и сложно, а остальные вам скажут спасибо.

C уважением… Set (setu@pisem.net- для вопросов и предложений)

[Гость_Āđøńāіі (гость)]

Вот как-то так, спасиба за старания помочь, и за статью тоже, но вот, подскажи какой у тебя сканер ? и сот-нно его хар-ки

[Set]

А никакого... если я и рисую, то рисую на планшете.
а при чем тут сканер?

[Гость_no-It (гость)]

зачем изобретать велосипед, если можно сделать проще.
в шопе есть функция, так и названная - save for web, специально для таких целей.

[Set]

Все б вам на специальные кнопочки жать...
тут принцип объяснен- все по науке и ручками.

[Гость_no-It (гость)]

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

[Bastet]

Не люблю ужимать работы
По моему опыту, лучше всего масштабировать не кратно: например, исходный размер 1000х1000 уменьшить до 503х503. Так не происходит "округление" соседних пикселей.
Конечно, Save for Web - это ламерство, но так приятно облегчает жизнь!

[Set]

честно говоря не разу им не пользовался...
все по старинке...

да и ориентировался я в общем не на гуру, а на начинающих... чтоб всем было приятно...

Неужели все так по лоховски?

[Гость_jamstyle (гость)]

Да не! все чики! так и надо делать..... поправьте меня если ошибаюсь... при сохранении "для веб" просто дико уменьшается число цветов ... что точно ламерство.........
Вобщем мы так и делаем ужимаем размеры и таму подобное

[Bastet]

jamstyle, если в *.gif сохранять, то, конечно, уменьшится... А *.jpeg нормально вроде...
Во! Еще: этой опцией очень хорошо сохранять акварель и гуашь. За счет особенностей живописи даже низкое качество сохранения дает хороший результат.

[Гость_jamstyle (гость)]

Bastet
Спасиб..... надо попробовать.......
сохранить в полохом качестве.ээ....потом наложить поверх хорошего ....ээ.....

[Гость_jamstyle (гость)]

[Гость_Tenka (гость)]

Сохранение для web это не ламерство, а удобный инструмент подбора формата, степени сжатия или количества цветов (в зависимости от формата). Там сразу виден результат, причем очень легко можно сравнить результаты различных методов сжатия изображения.

И мне совершенно не понятно странное высказыванию jamstyle о диком уменьшении количества цветов. Если вы сохраняете картинку в GIF, то можете выбрать количество цветов до 256. При этом фотографии и художественные изображения абсолютно не подходят для такого формата. Для них необходимо испльзовать JGP (как было описано уважаемым SET'ом).

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

[Гость_jamstyle (гость)]

теперь я просветлен! спасибо! ..... просто я как то давно сохранял что то для веб ... возможно даже не в фотошопе.... и когда мне выдало картинку всего с 16 цветами я жутко обиделся на эту опцию))))

[Set]

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

[Bastet]

Set, просвети по поводу нарушения копирайтов.... Впервые слышу просто.....

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

И еще я видела классные эффекты, когда фотография сохранялась в 4-х цветном ГИФе. Красота просто...

[Set]

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

[Bastet]

Set, спасибо Решила, как Олд Блинд Дог, свое собственное лицо поставить...

Хех, желаю успехов этой фирме: заставлять кого-то что-то лицензировать или запрещать в сети - дохлое дело

[Set]

Эх, видимо тоже придется показаться общественности...

[Bastet]

[Set]

Это было бы совсем неплохо...
ЛЮДИ!!! ДЕЛАЙТЕ НА СВОИХ АВАТАРКАХ СОБСТВЕННЫЕ ЛИЦА!!!

[Гость_jamstyle (гость)]

Ну я думаю вы не единственные))) у многих мне кажется на аватарах свои личика....... в том числе и у меня!

[Гость_Āđøńāіі (гость)]

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

[Set]

Wacom Volito A6- средняя цена по москве 50 с копейками долларов.
самый дешевый из вакомов, но лучше продукции от Гениус.

[Гость_TEHEK (гость)]

Хай-ки всем!:)


Так... спустя сутки пост редактируется Ну не успел я дописать и отредактировать на уроке


Давно я не был в этой теме!:) ОООчень давно!:) Даже столько пропустил...


Постараюсь писать быстро, коротко, понятно и интересно

Ну во-первых с оформлением сегодня будет туго... кнопками форматирования списков меня явно обделяет этот форум

Так.. поехали:

(тем, кому лень читать, скажу мораль сразу - для фоток JPG лучше )

GIF... гыф гыф гыф... Set немного не прав... Да, Гиф лицензирован.. но не совсем гиф... Лицензия требуется только на право использования самого алгоритма сжатия (а там еще используется алгоритм LZW (здесь описание алгоритма для программистов) ) собственно, это одна из причин его лицензированности. То есть, вы не нарушите закона, сжав картинку в ГЫФ. Но если вы написали прогу, которая показывает или сжимает в ГИФ, то тут уж извольте предварительно надыбать лицензию.

JPEG (*.jpeg, *.jpg) - сокращение от названия группы разработчиков Joint Photographic Experts Group . Право на использование этого алгоритма сжатия, будем так говорить, халявное. Поддреживается всем подряд, начиная от простой софтины для просмотра (тот же Интернет Испортил) до цифровых фотиков (и холодильников )

Ну и теперь... преимущества JPEGов (здесь оригинал) :

1) информация об оттенке получается 24 бита на пиксель против 8 битов в ГИФе.

Мораль: лучшая передача цветовых оттенков.

2) Меньшие размеры для крупноформатных картинок.

3) Собственно, его доступность и всеобщая совместимость

По поводу размеров: Картинки маленького формата, имеющие небольшое количество цветов и небольшие размеры лучше сжимать ГИФом... Ну, а фотки таковыми не являются Да и картинки тоже

Немного небольшого личного опыта:
При изменении размеров картинки лучше используйте алгоритм Bicubic Если есть ACDSee, то можно переразмерить (какой, однако, слов полушылся) Lancros'ом, тоже хорошо переваривает.

В процентном соотношении... по-моему лучше использовать масштабы вроде 50%, 25%, 12.5%. Точно не уверен в том, насколько это влияет на качество. Ну, вроде бы вышеуказанные алгоритмы неплохо справляются при любых обстоятельствах

И последнее - насчет рисования Многие (а точнее все продвинутые) графические редакторы при использовании Zoom'a (изменения масштаба) используют самые быстрые алгоритмы переразмери... переразмерива... тьфу.. как оно там склоняется... вобщем их... Поэтому если, например вы рисуете в масштабе 25%, а потом приблизились на 93%, то не пугайтесь увиденному безобразию И НЕ ЛЕЗЬТЕ ПЕРЕКРАШИВАТЬ И ЗАДЕЛЫВАТЬ ДЫРЫ вот для масштабирования, точно знаю, самые лучшие - 100%, 50%, 25%, 12.5% (если что-то увидите еще), ну и 150%, 200% и т.д.

Все... теперь, можно сказать дописал... отваливаю

Всегда ваш, TEHEK:)




Сообщение отредактировал TEHEK - 20.10.2004, 10:17

[Гость_Shaddow (гость)]

Спасибо что подали идею. Нарисую, как герой выбивается из картинки сильного сжатия (jpeg низкого качества)...