آماده سازی تصویر برای انتشار در وب، موضوعی است که تمام عکاسان دیجیتال با آن روبرو هستند. ساخت سایت اختصاصی عکس، ارسال عکس توسط ایمیل و یا استفاده از تصویر در بحثهای فرومهای عکاسی، همگی از مواردی هستند که یک عکاس دیجیتال کم و بیش با آن مواجه است. عدم آشنایی با اصول بهینه سازی تصویر برای انتشار در وب میتواند هم برای عکاس و هم برای کاربرانی که میخواهند تصویر وی را مشاهده نمایند، مشکل زا باشد. حتی اگر عکاس دیجیتال نباشید، به عنوان یک کاربر اینترنت نیز گاهی مجبور به ارسال تصویر در اینترنت خواهید بود.
بهینه سازی عکس(Optimization)
بهینه سازی عکس فرآیندی است که طی آن کیفیت نمایش و اندازه تصویر برای انتشار در وب تنظیم میگردد. فتوشاپ (از نسخه ۶ به بعد) امکانات بسیار کاملی در این زمینه در اختیار کاربر میگذارد و این نوشته به استفاده از فتوشاپ برای بهینه سازی خواهد پرداخت.
در فتوشاپ دو راه برای آماده سازی عکس برای وب وجود دارد. راه اول استفاده از منوی File > Save as است. در این روش امکانات ساده ای برای اینکار وجود دارد. به گونهای که میتوانید فرمت تصویر و کیفیت آن و نیز گزینههای خاصی(که بسته به فرمت انتخابیتان متفاوت است) را تنظیم نمایید. روش دوم استفاده از امکانات پیشرفته بهینه سازی است که از طریق منوی File > Save for web در اختیار کاربر قرار میگیرد. با استفاده از این روش، امکانات بسیار کاملی در اختیار کاربر قرار میگیرد: امکان مشاهده همزمان تصویر اصلی و تصویر تغییر یافته با انتخاب گزینههای مختلف بهینه سازی، امکان تغییر اندازه تصویر، امکان ذخیره نمودن یک مجموعه تنظیم خاص برای استفاده در آینده، امکان مشاهده تصاویر بصورتی که در سیستمهای عامل مختلف یا پروفایلهای مختلف نمایش داده میشود، امکان بهینه سازی برخی قسمتهای تصویر، امکان ساخت فایل HTML برای نمایش تصویر و امکانات دیگری که به آنها اشاره خواهد شد.
چون تمام امکانات روش اول، در روش دوم نیز وجود دارد، در این نوشتار فقط به بررسی روش پیشرفته بهینهسازی تصاویر خواهیم پرداخت و بالطبع در نهایت، ویژگیهای روش اول را نیز خواهید آموخت.
صفحه Save For Web
با فرمان File > Save for web وارد صفحه فوق خواهید شد.
در قسمت بالای صفحه میتوانید طرز نمایش تصویر را تعیین نمایید. نمایش تصویر اصلی(Original)، تصویر بهینه سازی شده بر اساس گزینههای شما (Optimized ) و نمایش تصویر اصلی به همراه تصاویر بهینه سازی شده(۲-Up یا ۴-Up ). در حقیقت با این گزینه آخر میتواند به طور همزمان تصویر اصلی و بهینه سازی شده را با انتخابهای مختلف مشاهده نمایید و با مقایسه به بهترین حالت مورد نظرتان برسید. وقتی یکی از این دو گزینه را انتخاب می کنید، میتوانید روی تصویر بهینه سازی شده کلیک نموده و گزینه های مختلف را به آن اعمال نمایید. با انتخاب گزینه ۴-UP سه کپی از تصویر اصلی با مقادیر متفاوت فشرده سازی به نمایش درمیآید تا توسط کاربر مقایسه و انتخاب شود.
اگر تصویرتان بزرگتر از سایز صفحه بود میتوانید با استفاده از آیکن "دست" در سمت چپ صفحه، آنرا حرکت دهید و یا با آیکن "ذره بین" آنرا متناسب با صفحه خود تنظیم نمایید (برای کوچک کردن از ترکیب Alt + آیکن "ذرهبین" استفاده نمایید). همچنین برای این منظور از منوی Zoom level (که در قسمت پایین و چپ این صفحه وجود دارد) نیز میتوان استفاده کرد.
در قسمت پایین تصویر اصلی و تصویر بهینه سازی شده، اطلاعات مفیدی وجود دارد. در زیر تصویر اصلی نام و اندازه آن و در زیر تصویر بهینه سازی شده اندازه و روش بهینه سازی و نیز مدت زمان لازم برای انتقال در اینترنت قرار دارد. برای تغییر سرعت ارتباط اینترنتی میتوانید روی تصویر کلیک راست نموده و سرعتهای مختلفی را انتخاب کنید تا به مدت انتقال تصویر با آن سرعت، پی ببرید.
طرز بهینه سازی تصویر
ابتدا باید فرمت تصویرتان را تعیین نمایید. عموما برای عکسهای دیجیتال فرمت JPEG یا PNG-24 استفاده میشود. فرمت GIF یا PNG-8 برای تصاویری مناسب است که دارای مناطق وسیعی از رنگهای یکنواخت باشند (مثلا در یک زمینه قرمز، متنی با رنگ آبی نوشته شده باشد و هیچ طیفی از رنگ نیز وجود نداشته باشد).
فرمت JPEG
فرمت JPEG فرمت استاندارد نمایش عکسهای دیجیتال در وب است. با انتخاب گزینه JPEG در قسمت راست صفحه، گزینه های مربوط به آن نشان داده میشوند. با استفاده از انتخاب Quality و یا میزان فشرده سازی(Medium یا high یا …) میتوانید حجم فایل تصویرتان را تغییر دهید. بهتر است در حین اینکار به کیفیت تصویر بهینه سازی شده و حجم آن نیز توجه نمایید تا بیش از حد از کیفیت آن کاسته نشود.
هنگامیکه در حالت نمایش ۲-UP ، میزان فشرده سازی را انتخاب کردید، با انتخاب گزینه ۴-UP دو تصویر دیگر با مقادیر فشرده سازی بیشتر(۲ و ۴ برابر) نیز به نمایش درمیآید تا کیفیت مقادیر بیشتر فشردهسازی را نیز ببینید و مقایسه نمایید.
در سمت راست گزینه Quality دکمه کوچکی قرار دارد که در قسمتهای بعد به کاربرد مهم وجالب آن اشاره میکنیم. اگر گزینه Progressive را انتخاب نمایید، هنگام نمایش در مرورگر، تصویر به صورت تدریجی نشان داده میشود: به طور معمول تصاویر در مرورگر پس از بارگذاری کامل به یکباره نمایش داده میشوند. با انتخاب این گزینه، بتدریج با پیشرفت بارگذاری تصویر (از کیفیت کم به کیفیت نهایی) نمایش داده میشود تا حوصله کاربر سر نرود! اینگونه تصاویر به مقدار کمی حجم فایل بیشتری دارند و نیز موقع نمایش در مرورگر، RAM بیشتری نیاز دارند.
اگر گزینه Blur را انتخاب نمایید، میتوانید میزان فشرده سازی تصویرتان را تا حد بیشتری اعمال نمایید و در عین حال کیفیت آن در حد قابلقبول بماند. میزان مناسب این گزینه ۰.۱ تا ۰.۵ است.
برای آنکه مرورگر تصویر را با توجه به پروفایل رنگی آن، نمایش دهد گزینه ICC Profile را انتخاب نمایید.(برای آشنایی با پروفایلهای رنگی به مقاله های مدیریت رنگ و مدیریت رنگ در چاپ عکس مراجعه نمایید).
گاهی تصاویری دارید که یک قسمت از آنها شفاف است و در هنگام نمایش در وب در قسمت شفاف آنها پسزمینه صفحه نمایش داده میشود. اگر بخواهید که این تصاویر را به Jpeg تبدیل نمایید(که از شفافیت تصاویر پشتیبانی نمیکند) میتوانید با استفاده از قسمت Matte تعیین نمایید که قسمت شفاف آنها به چه رنگی تبدیل شود.
فرمت PNG-24
این فرمت نیز برای نمایش عکسهای دیجیتال در وب مناسب است. اما حجم فایلهای آن به نسبت JPEG بیشتر است. این فرمت بر خلاف JPEG از شفافیت تصاویر (آنهم تا ۲۵۶ سطح) و کانالهای آلفا پشتیبانی میکند.
ممکن است بپرسید که "پس فرمت 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 پشتیبانی کند، این کارها به درد هیچ بنی بشری! نخواهد خورد.
مرورگر اینترنت اکسپلورر:
این مرورگر از نسخه ۴ به بعد از حالت شفافیت تصاویر و کانالهای آلفا تقریبا پشتیبانی میکند. از کلمه "تقریبا" استفاده کردیم چون در مورد نمایش برخی از این تصاویر مشکل خواهند داشت. همچنین در مورد برخی تصاویر حاوی کانالهای آلفا فقط در صورتی قادر به نمایش خواهند بود که کدهای HTML صفحه وب طوری نوشته شده باشند که از Extension های مایکروسافت برای CSS استفاده نمایند.
در مورد نمایش Progressive تصاویر مشکلی ندارند و همچنین نسخه ۵ به بعد مرورگر، قادر به نمایش تصاویر 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
سلام اطلاعات بسیار خوبی در زمینه دوربین دیجیتالی میدی به سایت عکس های من سر بزن خوشحال می شم موفق باشی بای
سلام مهندس
من مارهای شما رو به صورت صفحات وب ذخیره می کردم. ولی مدتی است که اجازه سیو صفحات داده نمی شه. باید چی کار کنم؟
ممنون
لطفا هر بار بخشهای جالبی از فتوشاپ را معرفی کنید شاید برایتان جالب باشد که یکی از سرگرمیهای من در سن شصت ساله گی کار با فتوشاپ (ورژن۸) میباشد با اینکه خیلی از امکانات آنرا میدانم ولی نکاتی که گاهی شما به آن اشاره میکنید برایم بسیار جالب است .
با تشکر عباسیان
لطفا هر بار بخشهای جالبی از فتوشاپ را معرفی کنید شاید برایتان جالب باشد که یکی از سرگرمیهای من در سن شصت ساله گی کار با فتوشاپ (ورژن۸) میباشد با اینکه خیلی از امکانات آنرا میدانم ولی نکاتی که گاهی شما به آن اشاره میکنید برایم بسیار جالب است .
با تشکر عباسیان
سلام
جناب روشن دستت درد نکنه
این مقاله با توجه به تاریخش از زیر چشم در رفته بود.ببخشین
مطالب را بسیار کاربردی و روان توضیح داده بودید.
بسیار سپاسگذارم.