روش پیشرفته آماده‌سازی تصویر برای انتشار در وب

**Mohammad Aref** · 18 آبان، ۱۳۸۹

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

بهینه سازی عكس(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، همگی از مزایایی هستند كه در دنیای امروز برای عكاسان دیجیتال بشدت مورد نیاز هستند.

منابع:

• سایت ادوبی

• مستندات ادوبی فتوشاپ سی اس

•