спонсори:

Відповісти на коментар


Файли для WEB з допомогою photoshop

Давно колись обіцяв комусь написати статтю по підготовці фоток та скріншотів для вебу та використання як аттачменти до статей або для фотоальбомів...

Із фотографіями - все набагато складніше. Щоб стиснути їх треба дуже чітко розуміти принципи роботи алгоритмів jpeg або png. Пріоритету використання того чи нішого формату в принципі немає, але бувають випадки, коли краще пакує jpeg (зашумлені зображення), а бувають варіанти, коли jpeg пасе задніх(екранні знімки, фото з яскраво вираженою "комп'ютерністю").




Привіт!


Давно колись обіцяв комусь написати статтю по підготовці фоток та скріншотів для вебу та використання як аттачменти до статей або для фотоальбомів...


Скріншоти до статті зробив дуже давно, а все ніяк часу не вибирав для кінцевого оформлення статті... 8((

Отже - скріншот або фото...

Із фотографіями - все набагато складніше. Щоб стиснути їх треба дуже чітко розуміти принципи роботи алгоритмів jpeg або png. Пріоритету використання того чи нішого формату в принципі немає, але бувають випадки, коли краще пакує jpeg (зашумлені зображення), а бувають варіанти, коли jpeg пасе задніх(екранні знімки, фото з яскраво вираженою "комп'ютерністю").


Звичайно, абсолютно некоректно буде, якщо Ви викладете знімки з Вашої фотокамери з максимальною роздільною здатністю  для того, щоб відобразити якийсь незначний елемент. Багато користувачів не побачать особливої відмінності в швидкості завантаження сторінки, але дуже багатьом після кількох хвилин завантаження "зображення" буде дуже легко закрити вікно броузера, бо дочекатись повного завантаження сторінки - майже нереально.


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


Екранне зображення

В переважній більшості електронних екранів використовується роздільча здатність 72 або 96 точок на дюйм. Іноді користувачі з вадами зору використовують роздільчу здатність 120. Але прийнято орієнтуватись на переважну більшість і використовують для цього 72 точки на дюйм.


Тому Важливо запам'ятати - для використання зображень в статтях - лише 72 точки на дюйм. Ваше зображення в такому випадку буде потужно зменшене в розмірах файлу, пришвидшений процес завантаження вебсторінок, а також зменшено навантаження на хостінг.


Крім цього така роздільча здатність служить свого роду захистом від використання Вашіх зображень "без ліцензії" в друкованих виданнях, бо для них мінімально достатньою є 300 точок на дюйм.

Зір і фото

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


Найважче стискаються зображення з великою кількістю елементів, хоча і для таких є методи. Якщо коротко - намагайтесь зменшити шумність таких зображень, досить часто допомагають методи виділення кольором важливих частин зображення і перетворення в градації сірого тієї частини, яка не несе важливого змісту.


Для зображень, в яких присутні великі площі одного кольору, можна використати методику викидання незначних відтінків з зображення, перетворивши інші кольори спеціальними методами растрування в відтінки.


Про це і буду вести мову.

Скріншот

Підозрюю, що більшість побачить в цьому банальність, але для декого це може бути справжньою складністю...


Тому повторюсь...


Система Windows - клавіша клавіатури Prt Scr - скопіювати в буфер обміну зображення всього екрана, комбінація Alt - Prt Scr - скопіювати лише активне вікно.


Далі відкриваємо фотошоп і створюєм новий документ.

створюєм новий документ в фотошопі з буферу обміну
Photoshop - зараза розумна, тому впізнає розміри зображення в буфері обміну і одразу всі поля заповнює коректно, користувачу ж залишається лише обізвати новостворений файл та обрати режим відображення.
Після створення документу - просто робіть вставку з буфера обміну. Кроки по вирізанню необхідної частини зображення та додавання якогось тексту, watermark-ів, підписів, пояснень на зображеннях, зміни розміру - залишаю Вам на домашнє завдання, а сам перейду до цікавого пункта меню Save for Web
Зберегти для вебу - Adobe Photoshop



Або для заядлих оптимізаторів - Alt-Ctrl-Shift-S


Вікно, що відкриється - це головна панель інструментів, кожен елемент якої дозволяє дуже серйозно зменшити розміри кінцевого документа.





Найсильнішими оптимізаторами є два типи алгоритмів пакування - Jpeg та PNG-8. Який з них використовувати - обирайте самі, в залежності від зображення. 





Одразу скажу - jpeg краще використовувати, коли в зображенні присутня величезна кількість дрібних елементів, PNG-8 - якщо потрібно урізати зображення до мінімально-неприйстойних розмірів, пожертвувавши кольоропередачею та деякими частинами зображення. Ну і найоптимальніший варіант - проба обох форматів в якості порівняння.


PNG-8 - No Dither - Transparency(off) - Minimum Colors - Web Snap - Custom Adaptation - приблизна формула найоптимальнішого по відношенню якість/розмір типу оптимізації зображення для вебу.


На зображенні нижче
Альтернативний режим керування кількістю кольорів зображення - Adobe Photoshop
Як видно - зображення мал очим відрізняється від оригінального, але розмір його знижено на 30 відсотків практично без втрати суті. Отже - режим компресії - PNG-8, вимикаєм растрові ефекти дял генерації півтіней (No Dither, ефект цього видно гарно по заголовку вікна, де взагалі немає півтіней). В таблиці кольорів, використовуючи власні очі, викидайте в смітник всі можливі кольори, використання яких на зображенні не несе в собі жодного смислового навантаження. Якщо перестарались - вибирайте параметр замість Custom - Adaptive,
а в кількості кольорів виставляйте вище значення - таким чином повернетесь на попередній рівень.


В дейких випадках необхідно відобразит півтіні, тоді одним з методів растрування
Типи растрування дла покращення півтіней



добивайтесь найкращого ефекту. Для мене найоптимальнішим ефектом є Diffusion, а в випадку, коли зображення досить складне - Noise(правда при цьому розмір файлу трошки більший).

Результат

Для екранних зображень найбільш наглядним буде відобразити різницю при максимально приємливих режимах компресії зображення...


Отже - jpeg із 0,3 розмитістю зображення та максимумом компресії і png з вищевказаними параметрами.











Зображення вище запаковане форматом PNG, бо він не створює таких артефактів, які видно на лівій частині, там де "JPEG".


Яким форматом користуватись - обирайте самі. Скажу лише, що кожен з них лише для певних типів зображень, хоча в більшості випадків і той і той формати є дуже зручними та хорошими.





Далі буде...

Trackback URL для цього допису

http://itua.name/uk/trackback/126

Відповісти

Вміст цього поля є приватним і не буде доступний широкому загалу. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.
  • Дозволені теґи HTML: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <blockquote> <img> <center> <b> <i> <u><h1><h2><h3><h4><h5><h6><strike><q><abbr><tr><td><table><br><p><div><span><embed><object>
  • Ви можете розмістити код, використовуючи теги <code>...</code>(загальний) або <?php ... ?> (виділений PHP).
  • Рядки і абзаци переносяться автоматично.
Фото Капча
Введіть символи з картинки.

Об'єднати вміст

Propeople Expert

експерименти

Rambler's Top100