От homepage к порталу!
Графика для Web-страниц
•
Чем большую площадь занимают однородно окрашенные участки и чем большую
горизонтальную протяженность имеют детали рисунка, тем меньший размер займет
на диске файл GIF.
•
Файлы, записанные в чересстрочном (interlaced) формате GIF и в прогрессивном
формате JPEG, то есть так, чтобы изображение «проявлялось» постепенно, будут, при
прочих равных условиях, иметь больший размер.
Но есть две области, где GIF - вне .конкуренции. Первая - это создание анимированных,
то есть движущихся изображений. На самом деле анимированный GIF - это несколько
графических изображений, записанных в один файл. Последовательный показ этих
изображений создает иллюзию движения. В файле GIF хранится информация о том,
сколько раз в секунду надо менять изображение, в какой последовательности показывать
картинки и т.д. Для создания анимированного изображения вы в любом графическом
редакторе рисуете картинки, из которых будет строиться анимация, а затем загружаете
их в специальную программу подготовки анимации, где указываете, как эти картинки
должны чередоваться. Таких программ существует большое количество.
Другое незаменимое свойство GIF - это возможность получения прозрачного фона изображения,
то есть такого фона, сквозь который видно все, что под ним находится. Создавать
GIF с прозрачным фоном может любой профессиональный графический редактор,
например, Adobe Photoshop.
Возможности оптимизации
Чтобы любое изображение можно было использовать на Web-странице, его необходимо
предварительно оптимизировать, уменьшив до минимума размер файла и, следовательно,
время загрузки по сети так, чтобы качество изображения при этом заметно не ухудшилось.
Оптимизация - это, по сути, компромисс между размером файла и качеством
изображения.
В формате JPEG изображение сохраняется с глубиной цвета 24 бит и используется
сжатие с потерей информации. У него не так уж много способов оптимизации, точнее
сказать, два:
•
использование прогрессивной развертки;
•
оптимальный коэффициент сжатия.
Использование прогрессивной развертки не сказывается на размере изображения, но
заметно при загрузке. В случае записи изображения в стандартном формате вывод на
экран осуществляется горизонтальными полосами, и до загрузки всего изображения невозможно
определить его смысл. Напротив, при записи файла в прогрессивном формате
изображение появляется сразу целиком, но в грубой форме, и затем постепенно улучшается.
Это дает посетителям сайта возможность сразу же оценить изображение и решить,
стоит ли ожидать его окончательной загрузки, что позволяет сэкономить немного времени
при просмотре страниц. Общее время загрузки страницы при этом не уменьшается,
возникает лишь иллюзия его уменьшения. Прогрессивная развертка JPEG поддерживается
всеми браузерами, но не каждый графический пакет может записывать в этом формате.
Поэтому проверьте свои программы на возможность сохранять файлы с прогрессивной
разверткой. Последние версии Photoshop умеют это делать.
[...]
Главная
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21] [22] [23] [24] [25] [26] [27] [28] [29] [30] [31] [32] [33] [34] [35] [36] [37] [38] [39] [40] [41] [42] [43] [44] [45] [46] [47] [48] [49] [50] [51] [52] [53] [54] [55] [56] [57] [58] [59] [60] [61] [62] [63] [64] [65] [66] [67] [68] [69] [70] [71] [72] [73] [74] [75] [76] [77] [78] [79] [80] [81] [82] [83] [84] [85] [86] [87] [88] [89] [90] [91] [92] [93] [94] [95] [96] [97] [98] [99] [100] [101] [102] [103] [104] [105] [106] [107] [108] [109] [110] [111] [112] [113] [114] [115] [116] [117] [118] [119] [120] [121] [122] [123] [124] [125] [126] [127] [128] [129] [130] [131] [132] [133] [134] [135] [136] [137] [138] [139] [140] [141] [142] [143] [144] [145] [146] [147] [148] [149] [150] [151] [152] [153] [154] [155] [156] [157] [158] [159] [160] [161] [162] [163] [164] [165] [166] [167] [168] [169] [170] [171] [172] [173] [174] [175] [176] [177] [178] [179] [180] [181] [182] [183] [184] [185] [186] [187] [188] [189] [190] [191] [192] [193] [194] [195] [196] [197] [198] [199] [200] [201] [202] [203] [204] [205] [206] [207] [208] [209] [210] [211] [212] [213] [214] [215] [216] [217] [218] [219] [220] [221] [222] [223] [224] [225] [226] [227] [228] [229] [230] [231] [232] [233] [234] [235] [236] [237] [238] [239] [240] [241] [242] [243] [244] [245] [246] [247] [248] [249] [250] [251] [252] [253] [254] [255] [256] [257] [258] [259] [260] [261] [262] [263] [264] [265] [266] [267] [268] [269] [270] [271] [272] [273] [274] [275] [276] [277] [278] [279] [280] [281] [282] [283] [284] [285] [286] [287] [288] [289] [290] [291] [292] [293] [294] [295] [296] [297] [298] [299] [300] [301] [302] [303] [304] [305] [306] [307] [308] [309] [310] [311] [312] [313] [314] [315] [316] [317] [318] [319] [320] [321] [322] [323] [324] [325] [326] [327] [328] [329] [330] [331] [332] [333] [334] [335] [336] [337] [338] [339] [340] [341] [342] [343] [344] [345] [346] [347] [348] [349] [350] [351] [352] [353] [354] [355] [356] [357] [358] [359] [360] [361] [362] [363] [364] [365] [366] [367] [368] [369] [370] [371] [372] [373] [374] [375] [376] [377] [378] [379] [380] [381] [382] [383] [384] [385] [386] [387] [388] [389] [390] [391] [392] [393] [394] [395] [396] [397] [398] [399] [400] [401] [402] [403] [404] [405] [406] [407] [408] [409] [410] [411] [412] [413] [414] [415] [416] [417] [418] [419] [420] [421] [422] [423] [424] [425] [426] [427] [428] [429] [430] [431] [432] [433] [434] [435] [436] [437] [438] [439] [440] [441] [442] [443] [444] [445] [446] [447] [448] [449] [450] [451]