آماده سازي تصوير براي انتشار در وب، موضوعي است كه تمام عكاسان ديجيتال با آن روبرو هستند. ساخت سايت اختصاصي عكس، ارسال عكس توسط ايميل و يا استفاده از تصوير در بحثهاي فرومهاي عكاسي، همگي از مواردي هستند كه يك عكاس ديجيتال كم و بيش با آن مواجه است. عدم آشنايي با اصول بهينه سازي تصوير براي انتشار در وب مي‌تواند هم براي عكاس و هم براي كاربراني كه مي‌خواهند تصوير وي را مشاهده نمايند، مشكل زا باشد. حتي اگر عكاس ديجيتال نباشيد، به عنوان يك كاربر اينترنت نيز گاهي مجبور به ارسال تصوير در اينترنت خواهيد بود.

بهينه سازي عكس(Optimization)
بهينه سازي عكس فرآيندي است كه طي آن كيفيت نمايش و اندازه تصوير براي انتشار در وب تنظيم مي‌گردد. فتوشاپ (از نسخه 6 به بعد) امكانات بسيار كاملي در اين زمينه در اختيار كاربر مي‌گذارد و اين نوشته به استفاده از فتوشاپ براي بهينه سازي خواهد پرداخت.
در فتوشاپ دو راه براي آماده سازي عكس براي وب وجود دارد. راه اول استفاده از منوي File > Save as است. در اين روش امكانات ساده اي براي اينكار وجود دارد. به گونه‌اي كه مي‌توانيد فرمت تصوير و كيفيت آن و نيز گزينه‌هاي خاصي(كه بسته به فرمت انتخابي‌تان متفاوت است) را تنظيم نماييد. روش دوم استفاده از امكانات پيشرفته بهينه سازي است كه از طريق منوي File > Save for web در اختيار كاربر قرار مي‌گيرد. با استفاده از اين روش، امكانات بسيار كاملي در اختيار كاربر قرار ميگيرد: امكان مشاهده همزمان تصوير اصلي و تصوير تغيير يافته با انتخاب گزينه‌هاي مختلف بهينه سازي، امكان تغيير اندازه تصوير، امكان ذخيره نمودن يك مجموعه تنظيم خاص براي استفاده در آينده، امكان مشاهده تصاوير بصورتي كه در سيستمهاي عامل مختلف يا پروفايلهاي مختلف نمايش داده مي‌شود، امكان بهينه سازي برخي قسمتهاي تصوير، امكان ساخت فايل HTML براي نمايش تصوير و امكانات ديگري كه به آنها اشاره خواهد شد.
چون تمام امكانات روش اول، در روش دوم نيز وجود دارد، در اين نوشتار فقط به بررسي روش پيشرفته بهينه‌سازي تصاوير خواهيم پرداخت و بالطبع در نهايت، ويژگيهاي روش اول را نيز خواهيد آموخت.

صفحه Save For Web

با فرمان File > Save for web وارد صفحه فوق خواهيد شد.
در قسمت بالاي صفحه ميتوانيد طرز نمايش تصوير را تعيين نماييد. نمايش تصوير اصلي(Original)، تصوير بهينه سازي شده بر اساس گزينه‌هاي شما (Optimized ) و نمايش تصوير اصلي به همراه تصاوير بهينه سازي شده(2-Up يا 4-Up ). در حقيقت با اين گزينه آخر ميتواند به طور همزمان تصوير اصلي و بهينه سازي شده را با انتخابهاي مختلف مشاهده نماييد و با مقايسه به بهترين حالت مورد نظرتان برسيد. وقتي يكي از اين دو گزينه را انتخاب مي كنيد، مي‌توانيد روي تصوير بهينه سازي شده كليك نموده و گزينه هاي مختلف را به آن اعمال نماييد. با انتخاب گزينه 4-UP سه كپي از تصوير اصلي با مقادير متفاوت فشرده سازي به نمايش درمي‌آيد تا توسط كاربر مقايسه و انتخاب شود.
اگر تصويرتان بزرگتر از سايز صفحه بود مي‌توانيد با استفاده از آيكن "دست" در سمت چپ صفحه، آنرا حركت دهيد و يا با آيكن "ذره بين" آنرا متناسب با صفحه خود تنظيم نماييد (براي كوچك كردن از تركيب Alt + آيكن "ذره‌بين" استفاده نماييد). همچنين براي اين منظور از منوي Zoom level (كه در قسمت پايين و چپ اين صفحه وجود دارد) نيز ميتوان استفاده كرد.
در قسمت پايين تصوير اصلي و تصوير بهينه سازي شده، اطلاعات مفيدي وجود دارد. در زير تصوير اصلي نام و اندازه آن و در زير تصوير بهينه سازي شده اندازه و روش بهينه سازي و نيز مدت زمان لازم براي انتقال در اينترنت قرار دارد. براي تغيير سرعت ارتباط اينترنتي مي‌توانيد روي تصوير كليك راست نموده و سرعتهاي مختلفي را انتخاب كنيد تا به مدت انتقال تصوير با آن سرعت، پي ببريد.

طرز بهينه سازي تصوير
ابتدا بايد فرمت تصويرتان را تعيين نماييد. عموما براي عكسهاي ديجيتال فرمت JPEG يا PNG-24 استفاده مي‌شود. فرمت GIF يا PNG-8 براي تصاويري مناسب است كه داراي مناطق وسيعي از رنگهاي يكنواخت باشند (مثلا در يك زمينه قرمز، متني با رنگ آبي نوشته شده باشد و هيچ طيفي از رنگ نيز وجود نداشته باشد).

فرمت JPEG

فرمت JPEG فرمت استاندارد نمايش عكسهاي ديجيتال در وب است. با انتخاب گزينه JPEG در قسمت راست صفحه، گزينه هاي مربوط به آن نشان داده مي‌شوند. با استفاده از انتخاب Quality و يا ميزان فشرده سازي(Medium يا high يا ...) مي‌توانيد حجم فايل تصويرتان را تغيير دهيد. بهتر است در حين اينكار به كيفيت تصوير بهينه سازي شده و حجم آن نيز توجه نماييد تا بيش از حد از كيفيت آن كاسته نشود.
هنگاميكه در حالت نمايش 2-UP ، ميزان فشرده سازي را انتخاب كرديد، با انتخاب گزينه 4-UP دو تصوير ديگر با مقادير فشرده سازي بيشتر(2 و 4 برابر) نيز به نمايش درمي‌آيد تا كيفيت مقادير بيشتر فشرده‌سازي را نيز ببينيد و مقايسه نماييد.
در سمت راست گزينه Quality دكمه كوچكي قرار دارد كه در قسمتهاي بعد به كاربرد مهم وجالب آن اشاره مي‌كنيم. اگر گزينه Progressive را انتخاب نماييد، هنگام نمايش در مرورگر، تصوير به صورت تدريجي نشان داده مي‌شود: به طور معمول تصاوير در مرورگر پس از بارگذاري كامل به يكباره نمايش داده مي‌شوند. با انتخاب اين گزينه، بتدريج با پيشرفت بارگذاري تصوير (از كيفيت كم به كيفيت نهايي) نمايش داده مي‌شود تا حوصله كاربر سر نرود! اينگونه تصاوير به مقدار كمي حجم فايل بيشتري دارند و نيز موقع نمايش در مرورگر، RAM بيشتري نياز دارند.
اگر گزينه Blur را انتخاب نماييد، مي‌توانيد ميزان فشرده سازي تصويرتان را تا حد بيشتري اعمال نماييد و در عين حال كيفيت آن در حد قابل‌قبول بماند. ميزان مناسب اين گزينه 0.1 تا 0.5 است.
براي آنكه مرورگر تصوير را با توجه به پروفايل رنگي آن، نمايش دهد گزينه ICC Profile را انتخاب نماييد.(براي آشنايي با پروفايلهاي رنگي به مقاله هاي مديريت رنگ و مديريت رنگ در چاپ عكس مراجعه نماييد).

گاهي تصاويري داريد كه يك قسمت از آنها شفاف است و در هنگام نمايش در وب در قسمت شفاف آنها پس‌زمينه صفحه نمايش داده مي‌شود. اگر بخواهيد كه اين تصاوير را به Jpeg تبديل نماييد(كه از شفافيت تصاوير پشتيباني نمي‌كند) مي‌توانيد با استفاده از قسمت Matte تعيين نماييد كه قسمت شفاف آنها به چه رنگي تبديل شود.

فرمت PNG-24
اين فرمت نيز براي نمايش عكسهاي ديجيتال در وب مناسب است. اما حجم فايلهاي آن به نسبت JPEG بيشتر است. اين فرمت بر خلاف JPEG از شفافيت تصاوير (آنهم تا 256 سطح) و كانالهاي آلفا پشتيباني مي‌كند.

ممكن است بپرسيد كه "پس فرمت gif چي شد؟" .خوب، مي‌توان گفت كه اين فرمت تقريبا براي عكس‌هاي ديجيتال كاربرد چنداني ندارد و بيشتر به درد تصاوير برداري و تصاويري مي‌خورد كه داراي رنگهاي يكنواخت باشند. بهينه سازي تصوير بر اساس اين فرمت نيز مراحل جالبي دارد كه شايد اگر عمري بود و خواهان داشت، در آينده به آن بپردازيم.

تغيير اندازه تصاوير در حين بهينه سازي

يكي از امكانات جالب صفحه بهينه سازي، تغيير اندازه تصاوير است. بنابراين نيازي نيست كه قبل از ورود به مرحله بهينه سازي، اندازه تصويرتان را تغيير دهيد. پس از ورود به صفحه بهينه سازي، وارد قسمت Image size (در كنار تب ‍color table‌) شويد و مقادير طول و عرض و يا درصد تغيير را وارد كرده و دكمه apply را بزنيد تا در همين صفحه، سايز تصويرتان تغيير نمايد. با انتخاب گزينه Constrain Proportion ، نسبت طول به عرض تصويرتان ثابت مي‌ماند. در قسمت Quality كيفيت و روش كاهش اندازه را انتخاب نماييد.Nearest Neighbor پايينترين كيفيت را دارد و براي تصاويري مناسب است كه احتياج چنداني به كيفيت بالا ندارند تا بتوان سايز تصوير را خيلي كاهش داد. Bicubic بيشترين كيفيت را دارد و مي‌توان ميزان شارپ بودن آنرا با دو انتخاب ديگر (Bicubic Smoother يا Bicubic Sharper ) كنترل كرد.

بهينه سازي نواحي انتخابي تصوير

تصوير زير را در نظر بگيريد:

با يك ميزان مشخص از بهينه سازي كه براي قسمت راست تصوير مناسب است، قسمت چپ تصوير (كه حاوي گرافيكهاي برداري است) دچار افت كيفيت شده است. اگر ميزان فشرده سازي را كم كنيم، حجم كل تصوير زياد خواهد شد. چاره چيست؟
براي اين منظور مي‌توانيم از Weighted Optimization استفاده نماييم. يعني تاكيد فرايند بهينه‌سازي را در برخي قسمتهاي تصوير بيشتر و در برخي قسمتهاي تصوير كمتر نماييم. در حقيقت مي‌توان مناطقي را كه فشرده سازي در آنها اثرات مخرب بيشتري دارد، از ساير مناطق جدا نمود و ميزان فشرده سازي را در اين دو ناحيه به طور متفاوت اعمال نمود. با اين روش، تصوير فوق (ضمن عدم افزايش قابل توجه در حجم فايل) به صورت زير در خواهد آمد:

براي انجام اين كار از ماسك لايه استفاده مي كنيم. وقتي از ماسك لايه براي فرآيند بهينه سازي استفاده مي‌كنيم، مناطق سفيد ماسك بيشترين كيفيت و مناطق سياه ماسك كمترين كيفيت را خواهند داشت.
براي اين منظور منطقه مورد نظر براي بيشترين كيفيت را در تصوير انتخاب كرده و سپس وارد پالت Channel مي‌شويم. دكمه Save Selection As Channel را مي‌زنيم تا منطقه انتخاب شده به صورت يك كانال آلفا ذخيره شود.

مي‌توانيم روي همين ماسك، مناطقي را كه بايد به طور متوسط بهينه سازي شوند با رنگ خاكستري رنگ كنيم.سپس وارد صفحه Save For Web مي‌شويم. گزينه JPEG را انتخاب و دكمه سمت راست Quality را ميزنيم.

در صفحه اي كه ظاهر ميشود از منوي channel گزينه Alpha 1 را انتخاب مي‌كنيم. حالا مي‌توانيم با كنترل زيرين، حداكثر و حداقل كيفيت اين مناطق را نيز به طور دقيق تعيين نماييم. اگر گزينه Preview انتخاب شود، نتيجه كار را نيز در صفحه اصلي خواهيم ديد.
دو گزينه All text layers و All vector shape layers به طور خودكار تمام متنهاي نوشته شده روي تصوير يا تمام لايه‌هاي برداري تصوير را انتخاب مي‌كنند تا در اين فرآيند استفاده شود (البته اين دو كمتر در تصاوير مربوط به عكسهاي ديجيتال كاربرد دارد).
در نهايت با كليك روي دكمه OK از اين صفحه خارج ميشويم.

ذخيره تنظيمات مربوط بهينه سازي
اگر بخواهيم كه يكسري تنظيمات (نوع فرمت، ميزان فشرده سازي، تنظيمات مربوط به فرمت و ...) را ذخيره كرده و درآينده سريعا به تصاوير اعمال نماييم، كافيست كه در صفحه save for web ، روي دكمه موجود در سمت راست منوي preset ، كليك كرده و با انتخاب يك نام، اين تنظيمات را ذخيره كنيم. در دفعات بعدي با استفاده از منوي Preset ، به راحتي مي‌توانيم به اين تنظيمات ذخيره شده دسترسي داشته باشيم.

ذخيره تصوير بهينه سازي شده
پس از اتمام مراحل بهينه سازي با دكمه Save كه در قسمت بالا و راست صفحه وجود دارد تصوير را ذخيره مي كنيم.

توليد خروجي HTML
با استفاده از فتوشاپ و صفحه Save For Web مي‌توان پس از بهينه سازي تصوير، يك خروجي HTML نيز توليد كرد تا علاوه بر مشاهده تصوير در يك مرورگر ، بتوان از كدهاي تهيه شده براي نمايش آن در طراحي صفحات وب، استفاده نمود.
با دكمه سمت راست منوي Preset و انتخاب گزينه Edit Output Setting وارد صفحه تنظيم خروجي HTML ميشويم.

در اين صفحه مي توان نوع خروجي را XHTML انتخاب نمود تا كدهاي توليد شده با اين فرمت توليد شوند. نوع كد نويسي با استفاده از گزينه‌هاي متنوع آن (مثلا بزرگ يا كوچك بودن tagها، بزرگ و كوچك بودن توضيحات، ميزان فرورفتگي در خطوط كد، نوع انكودينگ صفحه {مانند Unicode}، اضافه كردن ALT براي تگهاي مربوط به تصوير براي نمايش توضيحات، بستن تگها براي سازگاري با XHTML و ...) تعيين مي‌گردد. سپس اين صفحه را بسته و در صفحه مربوط به ذخيره فايل بهينه سازي شده، به جاي فرمت تصويري، خروجي HTML را انتخاب كرده و فايل را ذخيره مي‌كنيم. اين فايل HTML حاوي كدهاي آماده براي استفاده در برنامه هاي طراحي صفحه وب مانند Frontpage يا Dreamweaver خواهد بود.

نمونه كد توليد شده با فتوشاپ

پشتيباني مرورگرها
اين مسئله بسيار مهم است چون اگر قرار باشد كه مرورگر نتواند مثلا فايل PNG را نشان دهد و يا از حالت Progressive پشتيباني كند، اين كارها به درد هيچ بني بشري! نخواهد خورد.

مرورگر اينترنت اكسپلورر:
اين مرورگر از نسخه 4 به بعد از حالت شفافيت تصاوير و كانالهاي آلفا تقريبا پشتيباني ميكند. از كلمه "تقريبا" استفاده كرديم چون در مورد نمايش برخي از اين تصاوير مشكل خواهند داشت. همچنين در مورد برخي تصاوير حاوي كانالهاي آلفا فقط در صورتي قادر به نمايش خواهند بود كه كدهاي HTML صفحه وب طوري نوشته شده باشند كه از Extension هاي مايكروسافت براي CSS استفاده نمايند.
در مورد نمايش Progressive تصاوير مشكلي ندارند و همچنين نسخه 5 به بعد مرورگر، قادر به نمايش تصاوير PNG (البته نه همه آنها) مي‌باشد. گاهي برخي مرورگرها قادر به نمايش تصاوير PNG نيستند كه اين باگها قابل رفع است(با سرويس‌پك و يا دستكاري در رجيستري). مرورگر اينترنت اكسپلورر براي سيستم عامل MAC در اين زمينه‌ها مشكلي ندارد و پشتيباني كاملي از پروفايلهاي تصاوير، كانالهاي آلفا و فرمت PNG دارد.(بايد از اپل متشكر بود يا ميكروسافت؟)

مرورگر موزيلا فايرفاكس:
اين مرورگرعالي، در اين زمينه نيز عالي عمل مي كند. پشتيباني كامل از كانالهاي آلفا، پشتيباني كامل از گاما در پروفايل تصاوير، پشتيباني كامل از فرمت PNG جزو خصوصيات خوب اين مرور‌گر است.

مرورگر Netscape :
اين مرورگر هرچند كه امروزه كمتر استفاده مي‌شود اما پشتيباني كاملي از كانالهاي آلفا، پروفايلها و نيز فرمت PNG دارد.

براي آنكه ببينيد مرورگرتان از اين امكانات پشتيباني مي نمايد به اين آدرس مراجعه نماييد و طرز نمايش عكسها را در مرورگرتان آزمايش نماييد (اگر با دو مرورگر اينترنت اكسپلورر و موزيلا اين عمل را انجام دهيد بهتر ميتوانيد به تفاوتها پي ببريد).

 

خاتمه
استفاده از امكانات حرفه‌اي فتوشاپ براي آماده سازي تصاوير جهت انتشار در وب، فوايد بيشماري براي كاربراني دارد كه مايلند تصاوير و عكسهايشان با حداقل افت كيفيت با بيشترين سرعت در مرورگرهاي اينترنت به نمايش درآيد. امكانات پيشرفته‌اي مانند تعيين فرمتهاي مختلف و تنظيم دقيق آنها، تغيير اندازه تصاوير، امكان بهينه سازي انتخابي در تصوير و توليد خروجي خودكار كدهاي HTML، همگي از مزايايي هستند كه در دنياي امروز براي عكاسان ديجيتال بشدت مورد نياز هستند.

 

منابع:

• سايت ادوبي
• مستندات ادوبي فتوشاپ سي اس
• www.libpng.org
• www.webmasterworld.com
• www.color.org
• www.dsdesign.com/articles/index.html
• www.reasoft.com/articles