Краще менше картинка

vebius.com.ru

Як наполовину зменшити
картинку, практично зберігши її якість? Як зменшити
кількість користувачів, які не дочекалися, поки завантажиться ваша
сторінка? Невеликі секрети з оптимізації картинок для
Інтернету.

Все! В кінці кінців
WEB-сторінка готова, і можна починати зазивати на неї спочатку
друзів і знайомих, а потім і всіх інших. Перш ніж робити
це, я раджу оцінити, наскільки сторінка перевантажена
графікою. Вважається, що оптимальний розмір першої сторінки,
включає всі тексти, картинки і звукові файли – все-все,
що буде навантажуватися, – не повинен перевищувати 35-40 кілобайт.
Згідно дослідженню одного американського маркетингового
центру, кожне подальше збільшення розміру сторінки на 10
кілобайт "відсікає" від неї 10% потенційних відвідувачів. У
них просто не вистачає терпіння чекати, поки завантажиться ваш
шедевр. Якщо сторінка вийшла громіздка, то, швидше
за все, картинки недостатньо оптимізовані для
Інтернету.

Чим
відрізняються JPEG і GIF?

Чим відрізняється
радянський спосіб мислення від американського? Розробили обидві
країни новий супутник. Дуже потрібний, але важкий занадто, ніяк
його в космос не запустити. Сидять американці і думають: "Ех, як
б зробити такі мікросхеми, щоб ця штука важила
поменше … "А російські вчені думають:" Ех, як би зробити
таку ракету, щоб всю цю бандуру на орбіту
вивести … "

Картинки в Мережі зберігаються в
основному у двох видах – JPEG або GIF, не рахуючи кількох
інших, які використовують лише невелика кількість
користувачів. У кожного з цих форматів є достоїнства і
недоліки, які потрібно знати, щоб розмір файлів був
мінімальним при хорошій якості.

Який формат вибрати?

JPEG

  • Фотографії
  • картинки з градієнтної
    зафарбуванням

    GIF


  • малюнки або картинки з
    невеликою кількістю квітів
  • картинки з текстом,
    особливо дрібним
  • невеликі фотографії з
    дрібними деталями
  • багато чорно-білі
    зображення
  • малюнки з прозорим
    фоном
  • картинки, "схоплені" з
    екрану
  • анімаційні
    картинки
  • рекламні
    банери


    JPEG ідеальний для
    картинок, в яких зустрічається велика кількість квітів.
    Наприклад, для фотографій. У JPEG ви самі обираєте якість
    зберігається картинки – від 100% до 10-15% (менше не має
    сенсу – картинка стає занадто поганий). Використовуйте
    низька якість, коли не істотна розмитість картинки –
    наприклад, на фоновому зображенні. Найчастіша помилка –
    використання JPEG в банерах або картинках, де присутній
    текст. Так як JPEG зберігає зображення з втратою якості
    (Маленької або великий, але все одно втратою), то текст буде
    обов'язково розмазаний. Тому потрібно запам'ятати раз і назавжди:
    якщо в картинці є текст, потрібно зберегти її в
    GIF.

    GIF зберігає зображення
    без втрат, але через це воно може стати занадто великим.
    Тому має сенс застосовувати GIF тільки на тих зображеннях,
    де кількість квітів обмежена декількома десятками.
    Наприклад, у логотипах фірм, малюнках (особливо чорно-білих),
    невеликих елементах WEB-сторінок, таких як кнопки, лінійки або
    заголовки. Зовсім невеликі картинки також рекомендується
    зберігати в GIF, так як JPEG вносить занадто багато перекручувань у
    зображення з дрібними деталями.

    Крім того, велике
    гідність формату GIF – у можливості створення анімаційних
    банерів. Банери взагалі не рекомендується робити в JPEG, так
    як вони напевно мають якийсь текст. Щоб він не виявився
    розмитим, нечітким, доведеться зберегти картинку з дуже
    гарною якістю і, отже, сильно збільшити її
    розмір. Багато користувачів просто не дочекаються, поки такої
    великий банер завантажиться, і не побачать вашу рекламу.
    Оптимальний розмір для банера – 10 кілобайт або
    менше.

    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. Движок "якість" встановіть у той
    положення, при якому картинка виглядає без
    спотворень.

  • Схожі статті:


    Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

    Коментарів поки що немає.

    Ваш отзыв

    Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

    *

    *