Курс сканування Оптимізація зображень для Інтернету
Ми пропонуємо тут опублікувати зображення для Інтернету. Принципи та приклади, згадані тут, можуть бути застосовані до продукту CD-ROM, з невеликою різницею та меншими обмеженнями щодо ваги файлу.
Як ми вже бачили раніше, необхідно враховувати розмір екранів та межі смуги пропускання. Тому необхідно зменшити розмір файлу, щоб зробити мініатюру (приклад 150x200 пікселів), потім "повноекранне" зображення 800x600, нарешті, зображення високої чіткості з можливістю масштабування (вибір формату PDF, який можна експортувати безпосередньо з Photoshop ).
На практиці ми почнемо з великого необробленого файлу, щоб отримати найбільше зображення (експорт PDF), а потім отримати повний екран і, нарешті, мініатюру.
1. Експорт PDF.
Спочатку розмістіть оригінальне зображення у бажаному форматі, тут 1500x1000. Цей файл без стиску важить приблизно 5 МБ.
Щоб зберегти у форматі PDF, виконайте Файл> Зберегти як> виберіть формат Photoshop PDF. У вас є два варіанти кодування ZIP або JPEG:
Кодування JPEG подібне до стиснення формату JPEG: висока компресія, якісні втрати, регулювання швидкості стиснення (шкала від 1 до 10).
ZIP-кодування, подібне до того, що використовується у форматі GIF, особливо ефективно для стиснення малюнків або кольорових плоских плям. Тут ми стикаємось з тим самим типом вибору, як між JPEG (фотографічні зображення) або GIF (малюнки та однотонні кольори), з тією різницею, що ми можемо використовувати ZIP-кодування на зображенні у 24 біти на колір.
Вибраний тут приклад важить 124 кб у форматі JPEG (якість 3, отже, досить сильне стиснення) і більше 3 Мб у ZIP-кодуванні.
(перегляньте стиснене зображення у форматі PDF у форматі JPEG, використовуйте лупу та руку для збільшення та переміщення зображення)
2. Створення повноекранного зображення
Ми вибираємо тут розмір екрану призначення 800x600 пікселів. Зображення має бути трохи менше, щоб врахувати вікно браузера (смуги прокрутки тощо). Ми зупинимося на розмірі 750 х 550 пікселів.
Спочатку розмістіть зображення потрібного розміру, вказавши роздільну здатність 72 dpi. Нестиснутий файл важить лише близько 1,5 МБ.
Зменшивши розмір, спостерігайте за зображенням (на 100%, подвійним клацанням на інструменті збільшувального скла) і відзначайте незначну втрату різкості, що пов’язано з різким зменшенням розміру. Для поліпшення перегляду зображення на екрані застосуйте фільтр «Різче» або невелике загострення.
Важливе зауваження: не зловживайте різкістю, оскільки стиснення кінцевого зображення тоді буде менш ефективним (оскільки зображення тоді складніше і складніше аналізувати) і призведе до важчого файлу. Вам потрібно знайти компроміс, залежно від зображення, між "красивою" візуалізацією та хорошою оптимізацією розміру файлу. У наступному прикладі застосування фільтра очищення при однаковій швидкості стиснення призводить до того, що файл JPEG важче на 25%.
зменшене зображення
трохи нечіткий
остаточне зображення
з фільтром для очищення
Збереження у форматі JPEG:
Можливі два способи: скористайтеся "Файл> Зберегти як> JPEG" у вікні параметрів збереження.
Натомість ми використаємо вікно Photoshop «Зберегти для Інтернету», щоб порівняти різні показники стиснення у JPEG.
>> натисніть тут, щоб побачити знімок екрана
Зображення відображалися зі швидкістю 200%, щоб показати втрати, спричинені стисненням JPEG. Були показані чотири порівняльні ескізи: оригінал вгорі ліворуч і три різні варіанти стиснення поряд із ним, що змінювали якість: 60, 30 і 5, від високої до низької якості. Потім розмір зображення варіюється від 119 до 31 кб. Зверніть увагу на погіршення якості зображення та виберіть відповідну швидкість, даючи хороший компроміс між якістю та розміром файлу. Також випробуйте інші показники стиснення, щоб точно налаштувати параметри. В кінці, клацнувши на ньому, виберіть ескіз, який вважаєте правильним, потім натисніть «ОК», з’явиться вікно збереження файлу для експорту зображення у вибраний каталог.
>> натисніть тут, щоб побачити оптимізоване зображення (якість JPEG 40, 66 кб)
3. Створення маленької мініатюри.
Це зображення на HTML-сторінці може служити ілюстрацією до тексту та/або вказувати на великий файл (повноекранний JPEG або PDF високої чіткості), що дозволяє попередньо переглянути зображення.
Ми почнемо з вихідного зображення, щоб зменшити його до бажаного розміру, наприклад 100x150 пікселів.
Після зменшення ефект втрати різкості стає ще сильнішим, ніж у попередній вправі. Тут також слід покращити зображення, додавши різкість (чіткіші, чіткіші контури або акцентування залежно від типу зображення), яка може бути досить високою.
У деяких випадках може бути цікаво відрегулювати яскравість і контрастність мініатюри для подальшого покращення візуального впливу, особливо для дуже маленьких зображень або піктограм (менше 50 пікселів на сторону)
зменшене зображення
Оптимізація JPEG (4 кб)
Корекція заточуванням
і яскравість контрасту
ідентична оптимізація JPEG (6 кб)
Вибір формату під час оптимізації:
Відкривши вікно реєстрації для Інтернету, налаштуйте 3 мініатюри з трьома різними форматами файлів, Jpeg, Gif та PNG.
'(див. знімок екрана)
Видно, що при невеликому розмірі оригінального зображення різниця між вагами файлу дуже мала, близько декількох кілобайт. Тут Jpeg не забезпечує такої ж переваги при стисненні. Оптимізуючи параметри Gif якомога краще (вибір палітри та кількості кольорів), ми отримуємо розмір файлу, еквівалентний Jpeg, з еквівалентною якістю, якщо не кращою.
Загальне правило полягає в наступному: для ескізів або піктограм краще віддати перевагу GIF, оскільки при однаковій вазі він швидше відкриватиметься на дисплеї, оскільки декомпресія Jpeg - це складний процес, що вимагає більше машини.
4. Корпус із прозорими зображеннями
Формат GIF, як і PNG, підтримує поняття прозорості. Прозорість дозволяє розміщувати непрямокутний об’єкт на тлі веб-сторінки. Фонова прозорість поєднує прозорі пікселі з фоном веб-сторінки у веб-переглядачі.
Фон матовий, який підтримується форматами GIF, PNG та JPEG, імітує прозорість, заповнюючи або об’єднуючи прозорі пікселі матовим кольором, що відповідає фону веб-сторінки, на якій буде розміщено зображення. Ця операція працює, лише якщо фон веб-сторінки суцільний, і ви знаєте його колір, щоб ви могли вибрати той самий.
Цей кеш (відсікання у вікні "зберегти для Інтернету Photoshop") дозволить нам експортувати зображення у форматі Jpeg, надавши йому ефект прозорості на тлі сторінки html, оригінальне зображення повинно містити прозорі пікселі, щоб це було можливо для створення прозорості або матування фону на оптимізованому зображенні.
На знімку екрана нижче (натисніть на нього, щоб збільшити) ескіз у верхньому лівому куті у форматі GIF зберігає прозорість фону. Внизу ми вибрали два Jpeg, один стандартний, замінює прозорі пікселі білими, а той, що знаходиться праворуч, має світло-жовту відсіку (або фонову маску).
У кожному випадку натисніть Photoshop на кнопку "e" унизу, щоб переглянути результат на веб-сторінці та порівняти. Попередній перегляд створить фон кольору кешу у браузері.
Загалом, GIF використовується для створення зображень із прозорим фоном. У деяких випадках jpeg, що використовується з фоновим кешем, може бути корисним для обрізання об'єктів у мільйони кольорів або великих зображень, зберігаючи при цьому високу стиск Jpeg. Дивіться приклад нижче, обрізане зображення у форматі Jpeg (9 кб, кеш чи відсікання з кольором тла, тут у шістнадцятковій # FFFFE6)
Порівняйте з тим самим репродукцією вище, де книга вирізана на білому фоні.
Ці кілька прикладів подано як вказівку, щоб дозволити швидкі експерименти з теоретичними принципами, згаданими на попередніх сторінках глави. Очевидно, що оптимізація зображень для Інтернету може представляти собою певний курс і товсте досьє, щоб мати можливість детально пояснити всі можливості та уточнення експорту в GIF та налаштування кольорових таблиць.
Ще один курс також був би необхідний для створення графіки, логотипів, текстів в режимі зображень, зображень на карті, фрагментів, вирізаних та реактивних зображень, анімованих GIF-файлів та їх оптимізації в Image Ready, що було б більш конкретно призначене для веб-майстрів.