photo

Hotlinking - або життя паразитів

2008-06-10T23:22:57+03:00

Якщо до Вас темної ночі постукав ногами Ваш хостінг провайдер і попросив оплатити надлишковий трафік, значить пора боротись з паразитами, які завелись на вашому вебсайті 8))))Отже - hotlinking...
Описувати що це? Ну ок... Це використання Ваших вебресурсів іншими користувачами інтернету на своїх вебсторінках без Вашої згоди...
А по простому - сп**зділі.
Якщо Ваш вебсайт не дуже популярний - то загалом нічого особливого не станеться, якщо хтось колись використає фото з Вашого вебсайту один раз...
Але якщо у Вас багато таких фотографій і трафік, який генерується з "лівих" користувачів перевищує Ваш особистий - треба діяти, поки не пізно.
Отож.
Мова йтиметься про apache + mod_rewrite
З допомогою .htaccess файлу можна зробити перенаправлення запитів до Ваших ресурсів, використовуючи метод REFERER

RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?ВАШ_ДОМЕН.com.ua [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?ДОМЕН_ДРУГА.com.ua [NC] RewriteRule \.(jpg|jpeg|png|gif)$ http://АДРЕСА_КАРТИНКИ_ПОПЕРЕДЖЕННЯ/off.jpg [NC,R,L]

Далі цей вміст закидуєте в файл .htaccess в директорію, в якій у Вас знаходяться захищені в майбутньому фото.
Як тільки "паразит" використає Вашу картинку, її адреса автоматично підміниться на http://АДРЕСА_КАРТИНКИ_ПОПЕРЕДЖЕННЯ/off.jpg в той час, як всі картинки, що будуть завантажені з Вашого вебсайту, або з вебсайту друга - відобразяться без проблем.

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

PS. Для особливо лінивих в інтернеті присутні готові сервіси для створення необхідного htaccess файлу. Для прикладу тут можна покроково створити свій власний htaccess файл

Успіху

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

2008-04-07T12:03:35+03:00

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

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

Меню 8) сторінки [hide]

Екранне зображення
Зір і фото
Скріншот
Результат

Привіт!

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

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

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

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

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

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

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

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

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

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

Зір і фото

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

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

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

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

Скріншот

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

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

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

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

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

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

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

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

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

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

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

На зображенні нижче

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

а в кількості кольорів виставляйте вище значення - таким чином повернетесь на попередній рівень.

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

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

Результат

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

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

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

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

Далі буде...

TIFF PSD перевірка на помилки

2008-02-05T05:00:01+02:00

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

TIFF - банальність наче, але і тут допускають багато помилок.

RGB (2)

Дана помилка допускається всюди, куди не глянь. Вона э глобальною для всіх користувачів та всіх програм. Макет, підготовлений в цій системі кольору на друці буде дуже критично відрізнятись, якщо його на етапі конвертування в постскрипт не буде коректно переведено в систему CMYK.

Layers + Paths (3)

Дана проблема висить на совісті самого адобе - всовувати в tiff можливості psd не варто було б. Користувачі в будь-якому випадку будуть це використовувати, і відповідно до цього будуть проблеми із коректністю обробки таких файлів.

Деякі програми(Quark наприклад) не розпізнають шляхи більше одного!!! Тому не рекомендую взагалі робити TIFF навороченим. Ідеальний варіант - звичайний CMYK без жодних ускладнень із злитими(flattened) шарами.

На фото нижче - жах для препрес інженера!!!!

Зустрічав проблеми розпізнавання як окремих каналів, так і вбудованих шляхів. Найоптимальніший варіант обробки такого файлу - залежить від програми, в якій він використовується. Коректна обробка буде лише в програмах Adobe.

Кириличні назви файлів(каналів, шляхів, кольорів тощо)!!!

Я буду завжди наголошувати про дану проблему. Вона є глобальною, але стосується в основному растрових та векторних лінків в програми верстки(Quark, Pagemaker, Indesign). Найгірше те, що кириличні версії даних програм іноді підтримують кириличні лінки. А при відкриванні англійськими версіями - всі лінки відображаються як OK але при спуску постскрипта спускаються лише їхні preview версії з резолюцією 72-96 точок на дюйм.

Роздільна здатність зображення (1)

Для поліграфії рекомендованим мінімумом є 300 точок на дюйм

PSD - формат, що розроблявся саме для вбудовування складних можливостей. Його і використовуйте. Але пам'ятайте - повністю його підримують лише продукти Adobe!!!

Підготовка фотографій для online фотоальбому

2007-10-09T13:02:00+03:00

Всім вітання!

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

Тут є плюси в тому, що :

- не всі Ваші фотографії цікаві іншим
- не всім потрібні розміри фотографій розміром 3000*2000 пікселів (в більшості випадків достатньо 1600 точок по одній із сторін)
- Не всі можуть отримати великий розмір файлів поштою, але у всіх є доступ до інтернету в той чи інший спосіб...

Для економії часу та трудозатрат пропоную методику, яка підійде для більшості випадків обміну фотографіями, в результаті чого кожен власник фотографій один раз вивантажить свої фото в інтернет та один раз стягне чужі фотографії(за бажанням звичайно) собі...

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

Підготовку фото потрібно розпочати із приведення їх до найбільш зручного і достатнього розміру, хай це буде розмір 1600(можна це число зменшити навіть до 1280 або 1024, все рівно буде достатньо для перегляду на екрані монітора) пікселів по довгій стороні. Для цього Вам необхідно скористатись будь-якою програмою для пакетної зміни розміру зображення. Я рекомендую Вам безкоштовну мініпрограмку із сайту розробника http://sourceforge.net/projects/imageresizer/

ImageResizer.zip

Скачайте її собі на комп'ютер та відкрийте архів. Програма надзвичайно проста в користуванні і не вимагає інсталяції.

Вигляд програми після запуску

Одразу скажу необхідні дії:

в полі Prefix можна автоматично додати до назви фото необхідний префікс(дуже зручно для сортування фото по назвах)
в полі Quality поставте якість 100 (це найвища)
в полі Size поставте 1600 (або 1280 або 1024) (це кількість пікселів по довгій стороні, яку ви хочете отримати)

Весь процес в картинках

Додаєм фотографії, які потрібно зменшити в розмірах, до списку програми ImageResizer

Список фотографій

Тиснем Start і обираєм папку, в яку складати змінені фото

Після цього потрібно зачекати певний час, поки програма працює (при кількості фото 300 штук в мене це зайняло 5 хвилин)

Вигляд папки із зміненими фотографіями (як бачите, програма автоматично додала до назви файлу префікс PARIS_ )

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

Після того, як Ви посортували таким чином ваші фотографії, Вам необхідно заархівувати їх та "відіслати в Інтернет".