Оптимизация изображений
quittance.ru
документы
прочее
Оптимизация изображений
   / принципы подготовки изображений

Опти­ми­за­ция изо­бра­же­ний для пуб­ли­ка­ции в ин­тер­не­те

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

Суще­ству­ет два вза­и­мо­ис­клю­ча­ю­щих прин­ци­па оп­ти­ми­за­ции изо­бра­же­ний для пуб­ли­ка­ции в ин­тер­не­те — сжа­тие с по­те­рей ка­че­ства (англ. lossy compression) в фор­ма­те JPEG и огра­ни­че­ние ко­ли­че­ства цве­тов (англ. color reduction) в фор­ма­те PNG/Indexed.

Кро­ме ба­зо­во­го прин­ци­па оп­ти­ми­за­ции, мо­гут иметь зна­че­ние и до­пол­ни­тель­ные ме­то­ды, тка­ие как умень­ше­ние цве­то­во­го раз­ре­ше­ния (англ. subsampling) в JPEG, рас­три­ро­ва­ние цве­тов (англ. dithering) в PNG/Indexed…

При­ме­ча­ние. Неко­гда рас­про­стра­нен­ный фор­мат GIF в на­сто­я­щее вре­мя осмыс­лен­но ис­поль­зо­вать ис­клю­чи­тель­но для про­стей­шей раст­ро­вой ани­ма­ции, по­сколь­ку для ста­ти­че­ских изо­бра­же­ний фор­мат PNG/Indexed име­ет мно­же­ство неоспо­ри­мых пре­иму­ществ пе­ред уста­рев­шим GIF.

Таким об­ра­зом, оп­ти­ми­за­ция идет как ми­ни­мум в двух на­прав­ле­ни­ях: вы­бор ба­зо­во­го прин­ци­па оп­ти­ми­за­ции и под­бор па­ра­мет­ров. Зара­нее вы­брать прин­цип оп­ти­ми­за­ции, наи­бо­лее под­хо­дя­щий для кон­крет­но­го изо­бра­же­ния, бы­ва­ет непро­сто да­же при на­ли­чии неко­то­ро­го опы­та. А при от­сут­ствии та­ко­во­го оста­ет­ся, су­дя по все­му, со­хра­нять все кар­тин­ки ис­клю­чи­тель­но в JPEG и не об­ра­щать ни­ка­ко­го вни­ма­ния ни на по­ка­за­тель ка­че­ства, ни на осталь­ные па­ра­метры.

Онлайн сер­вис Image Variator при­зван по­мочь в де­ле оп­ти­ми­за­ции изо­бра­же­ний «для ин­тер­не­та». Полу­чив на вхо­де ори­ги­наль­ное неопти­ми­зи­ро­ван­ное пол­но­цвет­ное изо­бра­же­ние без по­терь, Image Variator вы­да­ет на од­ной стра­ни­це мно­же­ство упо­ря­до­чен­ных ко­пий, оп­ти­ми­зи­ро­ван­ных в раз­лич­ных на­прав­ле­ни­ях. Оста­ет­ся лишь вы­брать из них од­ну, наи­бо­лее под­хо­дя­щую по со­от­но­ше­нию ка­че­ства и объ­е­ма файла.

Оригинальное изображение:

Прини­ма­ют­ся фай­лы в фор­ма­тах PNG, TIFF, PSD, BMP, JPEG раз­ме­ром не более 0,46 Mpix (800x600 px) и объ­е­мом не более 2 M
Принципы оптимизации:
 Фон страницы:
Преобразование альфа-канала
Имеет смысл толь­ко для ори­ги­на­лов с прозрачностью
 

Прин­цип ра­бо­ты и по­яс­не­ния к ин­тер­фейcу сер­ви­са оп­ти­ми­за­ции изо­бра­же­ний Image Variator

Ори­ги­наль­ное изо­бра­же­ние. Наи­боль­ший эф­фект до­сти­га­ет­ся для изо­бра­же­ний, ко­то­рые не бы­ли оп­ти­ми­зи­ро­ва­ны ра­нее. Поэто­му, чтобы из­бе­жать по­втор­ной оп­ти­ми­за­ции с по­те­рей ка­че­ства, ре­ко­мен­ду­ет­ся за­гру­жать ис­ход­ные изо­бра­же­ния в фор­ма­тах PNG (пол­но­цвет­ный или Grayscale), TIFF, PSD, BMP.

Фай­лы в фор­ма­тах JPEG и PNG/Indexed так­же при­ни­ма­ют­ся и об­ра­ба­ты­ва­ют­ся. Но сле­ду­ет иметь вви­ду, что по­втор­ная оп­ти­ми­за­ция обыч­но не при­во­дит к же­ла­е­мо­му ре­зуль­та­ту, а ино­гда эф­фект ока­зы­ва­ет­ся от­ри­ца­тельным.

Мак­си­маль­ный раз­мер об­ра­ба­ты­ва­е­мо­го изо­бра­же­ния — 0,46 Mpix (800x600 px). Мак­си­маль­ный объ­ем при­ни­ма­е­мо­го фай­ла — 2 M.

Прин­ци­пы оп­ти­ми­за­ции. Гене­ри­ру­ет­ся до 4-х ря­дов изо­бра­же­ний, каж­дый из ко­то­рых со­от­вет­ству­ет од­но­му из прин­ци­пов оп­ти­ми­зации:

  • —PNG/Indexed, no dithering (без рас­три­ро­ва­ния цветов);
  • —PNG/Indexed, Floyd-Steinberg dithering (сто­ха­сти­че­ское рас­три­ро­ва­ние цветов);
  • —JPEG, subsampling 2x2 (стан­дарт­ное дву­крат­ное умень­ше­ние цве­то­во­го раз­ре­шения;
  • —JPEG, subsampling 1x1 (без умень­ше­ния цве­то­во­го раз­ре­шения).

В каж­дом ря­ду про­из­во­дит­ся по 7 ва­ри­ан­тов. Для фор­ма­та JPEG из­ме­ня­ет­ся по­ка­за­тель ка­че­ства сжа­тия: 10, 30, 50, 70, 80, 90, 95. Для PNG/Indexed ва­ри­ан­ты стро­ят­ся из­ме­не­ни­ем раз­ме­ра па­лит­ры: 4, 8, 16, 32, 64, 128, 255 цве­тов. Под каж­дым изо­бра­же­ни­ем вы­во­дит­ся объ­ем фай­ла, что да­ет воз­мож­ность вы­брать оп­ти­маль­ный ва­ри­ант, ви­зу­аль­но оце­нив со­от­но­ше­ние ка­че­ства и объема.

Пре­об­ра­зо­ва­ние аль­фа-ка­на­ла. Фор­мат JPEG не под­дер­жи­ва­ет про­зрач­ность ни в ка­ком ви­де. Поэто­му, в слу­чае при­сут­ствия в ори­ги­на­ле аль­фа-ка­на­ла, его необ­хо­ди­мо об­ра­бо­тать од­ним из двух спо­со­бов: про­игно­ри­ро­вать (уда­лить) или под­ло­жить под изо­бра­же­ние сплош­ной фон. Цвет фо­на за­да­ет­ся в но­та­ции html, по умол­ча­нию — белый.

Пре­об­ра­зо­вать аль­фа-ка­нал в про­стую про­зрач­ность для ва­ри­ан­тов PNG/Indexed. Фор­мат PNG/Indexed под­дер­жи­ва­ет так на­зы­ва­е­мую «про­стую» про­зрач­ность. Отмет­ка в этой по­зи­ции поз­во­ля­ет пре­об­ра­зо­вать аль­фа-ка­нал ори­ги­на­ла в про­стую про­зрач­ность для всех ва­ри­ан­тов PNG/Indexed, кро­ме че­ты­рех­цвет­ного.

N.B. Алго­ритм со­кра­ще­ния ко­ли­че­ства цве­тов (англ. color reduction), ис­поль­зу­е­мый при оп­ти­ми­за­ции PNG/Indexed, адап­тив­но под­би­ра­ет зна­че­ния для цве­то­вой па­лит­ры, ста­ра­ясь по воз­мож­но­сти со­хра­нить цве­то­вой ба­ланс ис­ход­но­го изо­бра­же­ния. Но несмот­ря на это, неко­то­рые эле­мен­ты мо­гут слег­ка из­ме­нить свой цвет, да­же ес­ли они за­ни­ма­ют зна­чи­тель­ную пло­щадь. Поэто­му, по­сле оп­ти­ми­за­ции с со­кра­ще­ни­ем ко­ли­че­ства цве­тов ре­ко­мен­ду­ет­ся про­кон­тро­ли­ро­вать и при необ­хо­ди­мо­сти ис­пра­вить зна­че­ния кри­тич­ных цве­тов в па­лит­ре. В первую оче­редь сле­ду­ет про­ве­рить цве­та, ко­то­рые долж­ны сли­вать­ся с фо­ном ма­ке­та. Так­же к кри­тич­ным мож­но от­не­сти цве­та, ко­то­рые долж­ны в точ­но­сти со­от­вет­ство­вать цве­там дру­гих эле­мен­тов верст­ки стра­ни­цы; ос­нов­ные цве­та фир­мен­но­го сти­ля; гра­да­ции се­ро­го, ко­то­рые мо­гут при­об­ре­сти неже­ла­тель­ный цве­то­вой от­те­нок; бе­лый и черный.

Служ­бы про­ек­та quittance.ru предо­став­ля­ют­ся бес­плат­но, «как есть». Про­ект со­здан, под­дер­жи­ва­ет­ся и раз­ви­ва­ет­ся с доб­ры­ми на­ме­ре­ни­я­ми и на­деж­дой на его по­лез­ность. Одна­ко ав­тор не при­ни­ма­ет на се­бя ни­ка­ких обя­за­тельств в от­но­ше­нии про­ек­та. В част­но­сти, ав­тор не несет ни­ка­кой от­вет­ствен­но­сти за со­дер­жа­ние под­го­тов­лен­ных к пе­ча­ти до­ку­мен­тов, не га­ран­ти­ру­ет от­сут­ствия оши­бок ни в верст­ке, ни в ко­де, ни в на­пол­не­нии сай­та. Даль­ней­шая под­держ­ка и раз­ви­тие про­ек­та пла­ни­ру­ют­ся, но не га­ран­ти­ру­ются.
Copyright 2009–2010 Sergey Kurakin