Краще менше картинка, та краще
Як вполовину зменшити картинку, практично зберігши її якість? Як зменшити кількість користувачів, які не дочекалися, поки завантажиться ваша сторінка? Невеликі секрети по оптимізації картинок для Інтернету.
Усе! Зрештою WEB-сторінка готова, і можна починати зазивати на неї спочатку друзів і знайомих, а потім і всіх інших. Перш ніж робити це, я раджу оцінити, наскільки сторінка перевантажена графікою. Вважається, що оптимальний розмір першої сторінки, що включає всі тексти, картинки і звукові файли - все-все, що буде завантажуватися, - не повинен перевищувати 35-40 кілобайт. Згідно з дослідженням одного американського маркетингового центру, кожне подальше збільшення розміру сторінки на 10 кілобайт "відсікає" від неї 10% потенційних відвідувачів. У них просто не вистачає терпіння чекати, поки завантажиться ваш шедевр. Якщо сторінка вийшла громіздка, то, швидше за все, картинки недостатньо оптимізовані для Інтернету.
Чим відрізняються JPEG і GIF?
Чим відрізняється радянський спосіб мислення від американського? Розробили обидві країни новий супутник. Дуже потрібний, але важкий занадто, ніяк його в космос не запустити. Сидять американці і європейці думають: "Ех, як би зробити такі мікросхеми, щоб ця штука важила трохи менше." А російські вчені думають. "Ех, як би зробити таку ракету, щоб всю цю бандуру на орбіту вивести."
Картинки в Мережі зберігаються в основному в двох видах - JPEG або GIF, не рахуючи кількох інших, які використовують лише невелику кількість користувачів. У кожного з цих форматів є переваги і недоліки, які потрібно знати, щоб розмір файлів був мінімальним при хорошій якості.
Який формат вибрати?
JPEG
JPEG ідеальний для картинок, в яких зустрічається велика кількість квітів. Наприклад, для фотографій. В JPEG ви самі вибираєте якість зберігається картинки - від 100% до 10-15% (менше не має сенсу - картинка стає занадто поганий). Використовуйте низьку якість, коли не суттєва розмитість картинки - наприклад, на фоновому зображенні. Найчастіша помилка - використання JPEG в банерах або картинках, де присутній текст. Так як JPEG зберігає зображення з втратою якості (маленької або великий, але все одно втратою), то текст буде обов'язково розмазаний. Тому потрібно запам'ятати раз і назавжди: якщо в картинці є текст, потрібно зберегти її в GIF.
GIF зберігає зображення без втрат, але через це воно може стати занадто великим. Тому має сенс застосовувати GIF тільки на тих зображеннях, де кількість квітів обмежена кількома десятками. Наприклад, в логотипах фірм, малюнках (особливо чорно-білих), невеликих елементах WEB-сторінок, таких як кнопки, лінійки або заголовки. Зовсім невеликі картинки також рекомендується зберігати в GIF, так як JPEG вносить значні спотворень в зображення з дрібними деталями.
PHOTOSHOP: зменшуємо зображення при збереженні
Припустимо, ви визначилися, в якому форматі записати зображення, - JPEG або GIF. Простежте, щоб дозвіл вашої картинки було 72 пікселя на дюйм - більшого для монітора не потрібно. В меню PHOTOSHOP виберіть "Зображення" - "Розмір зображення" - "Дозвіл = 72". Пункт "пропорції" повинен бути відзначений галочкою (щоб при зміні розміру картинка не виявилася стислій або плескатої), а пункт "розмір файлу" - немає.
JPEG зберігається дуже просто. В меню "Файл" - "Зберегти як" - "Зберегти JPEG (* .JPG)". Спочатку спробуйте зберегти картинку з низькою якістю (режим "якість - низька") або, в крайньому випадку, "якість - середнє". Якщо результат незадовільний, спробуйте збільшити розмір картинки, щоб деталі на ній не були розмиті. Подивитися, як картинка виглядає після всіх пертурбацій, можна з будь-якої іншої програми, наприклад, з броузера.
Для формату JPЕG збільшення різкості зображення автоматично збільшує і його розмір. Якщо картинка все ж вимагає більшої різкості, то спробуйте спочатку застосувати фільтр "різкість по краях". Він дає непоганий результат при незначному збільшенні файлу.
Зберігати GIF трохи складніше - більше варіантів. Почнемо. Щоб перевести файл в формат GIF, виберіть у меню "Режим" - "Індексовані кольори". З'явиться віконце, де потрібно вибрати режим.
Дозвіл повинен бути 3, 4 або 5 біт на піксель, що, відповідно, означає збереження картинки з 7, 15 або 31 кольором. Більша кількість квітів особливого сенсу в більшості випадків не має, так як непомірно роздуває розмір файлу. Чим більше картинка, тим з меншим колірним дозволом вона повинна бути збережена. Експериментуйте, переводите картинку в різних режимах і, якщо результат не подобається, повертайте все тому, натиснувши в меню PHOTOSHOP "Редагування" - "Скасувати" або CTRL + Z.
Не забудьте про параметр "Палітра". Якщо зображення складається з невеликого числа квітів і має великі області одного кольору, то краще за все використовувати "Адаптовану" палітру з «не заданої" налаштуванням. Якщо ж ви зберігаєте невелику фотографію, то краще підійде "Налаштування" - "Випадкова". "Випадковий" розподіл квітів робить розмір файлу більше, але іноді точніше передає фотознімок. Раджу спочатку завжди пробувати ставити налаштування "Чи не задана" і, якщо вас влаштовує якість картинки, зупинятися на ній.
У разі якщо ви будете непринципово змінювати картинку (наприклад, додаючи пункт в графічне меню або назву на кнопці), то в наступний раз вам не доведеться мучитися, підбираючи параметри оптимізації. Палітру - кольору, з яких складається картинка - можна записати і використовувати. Для цього натисніть в меню "Режим" - "Таблиця кольорів" - "Зберегти". А коли будете переводити в GIF, то виберіть "Палітра" - "Рекомендована", а потім - "Завантажити" збережену вами палітру.
Чого робити не треба
1. Найголовніше - не вставляти в одну сторінку багато великих зображень. Наприклад, коли ви робите фотоальбом, то краще дати багато маленьких картинок, натиснувши на які читач зможе подивитися велику. Хочу зауважити, що виправлення в HTML-сторінці параметрів WIDTH і HEIGHT, що відповідають за що відображається розмір картинки, практично нічого не приносить. Картинка дійсно буде виглядати маленької, але грузиться буде так само довго. До речі, параметри WIDTH і HEIGHT повинні обов'язково бути присутнім, щоб броузер міг відображати сторінку, навіть не дочекавшись повного завантаження картинок. Щоб зменшити масштаб в меню PHOTOSHOP виберіть "Зображення" - "Розмір зображення" і введіть інший розмір. Як я писав вище, пункт "пропорції" повинен бути відзначений галочкою, а пункт "розмір файлу" - немає.
2. Ніколи не масштабуйте (не зраджуйте розмір) картинки, що складається з суцільних кольорів. При зміні масштабу PHOTOSHOP підбирає кольорову гаму таким чином, щоб створити плавні переходи між кордонами областей. Через це розмір файлу може вирости в 2-10 разів. Використовуйте подібні картинки, не змінюючи їх розміру. У деяких пакетах, наприклад, COREL GALLERY (галерея кліпартів, що входять до складу COREL DRAW), є можливість задавати розмір картинки, яку ви хочете отримати. Тоді вам не доведеться перемасштабіровать її в програмі PHOTOSHOP.
3. Якщо після зміни розміру вам не сподобався вигляд фотографії, не міняйте його прямо з отриманої картинки. Вона дуже втратить в якості. Краще скасуйте ваші дії (CTRL + Z) і виконайте операцію з оригінальним зображенням. Після зміни розміру зображення стане трохи розмитим. У більшості випадків має сенс підвищити різкість.
4. PHOTOSHOP 4-й версії за умовчанням записує в будь-які картинки їх маленьку версію, щоб потім можна було зрозуміти вміст файлу без його відкриття. Це, природно, збільшує їх розмір. Щоб відключити цю функцію, зніміть галочку з параметра "Зберегти мініатюру" при збереженні.
5. Ще раз хочу нагадати те, про що говорив вище: якщо в картинці є текст - забудьте про JPEG.
6. У більшості випадків намагайтеся не робити картинки розміром, що перевищує 10 кілобайт. У разі формату GIF, якщо картинка вийшла більше 10 кілобайт, раджу зберегти її в режимі "INTERLACED". Тоді вона буде з'являтися на сторінці поступово, у міру завантаження - з розмитого стану поступово переходячи в чітке. І читач не буде нервувати, чекаючи її завантаження. Тим часом це збільшує розмір картинки всього на 1-2%. Для JPEG є схожа опція - "PROGRESSIVE JPEG". Але її не підтримують браузери ранніх версій. Зберегти JPEG-файл в такому форматі можна, наприклад, за допомогою SMART SAVER, мова про який піде нижче.
Намагайтеся завжди давати картинкам назви (тег ALT = ""). Відвідувач сторінки сам вирішить - чекати йому завантаження картинки або можна перескочити на наступну сторінку. До речі, цей тег використовують деякі пошукові системи, надаючи тексту заголовків значну вагу.
Якщо ви ніяк не можете вкластися в ліміт 30-40 кілобайт на сторінку - створіть спрощену версію сторінок для нетерплячих відвідувачів (а їх буде більшість).
7. Ще одна порада щодо збереження файлів. Не міняйте режими і якість оригінальної картинки, а "грайте" з її копією. Щоб зробити копію, натисніть в меню "Зображення" - "Створити копію". Це дасть вам можливість потім повернутися до оригінального зображення, якщо ви зробите занадто багато змін і результат вам не сподобається.
Розумний "сохранятель" - SMART SAVER
SMART SAVER - це поліпшена версія "сохранялки" PHOTOSHOP, що дозволяє миттєво оцінити якість зображення, яке записується. SMART SAVER автоматично вбудовується в будь-яку версію програми PHOTOSHOP. Щоб записати з його допомогою зображення, виберіть у меню "Файл" - "Експорт" - "PHOTOIMPACT GIF SMART SAVER" або "PHOTOIMPACT JPEG SMART SAVER".
Зліва ви побачите оригінальне зображення і його розмір, а праворуч - зберігається зображення. Для картинок JPEG найбільш оптимальні наступні параметри: SMOOTH = NONE (різке зображення), SUBSAMPLING = YUV411 (найкраща якість при мінімальному розмірі), MODE = STANDART OPTIMIZED. Движок "якість" встановіть в те положення, при якому картинка виглядає без спотворень.