بهینه‌سازی تصاویر برای وب

آماده‌سازی تصاویر برای وب، فوت‌وفن خاص خود را دارد. متأسفانه گیمپ امکانی مانند «save for the web» در نرم‌افزار ادوبی فتوشاپ ندارد. در هر صورت، اگر کمی در مورد تصاویر و آنچه می‌خواهید با آن انجام دهید بدانید، بهینه‌سازی تصاویر برای وب توسط گیمپ کار سختی نخواهد بود. جادویی که در این عملیات نهفته است، دانستن بهترین قالب از تصاویر و بهترین تنظیمات برای نمایش آن در وب است.

ابتدا باید چند سؤال از خود بپرسید:

آیا اندازهٔ تصویر مهم است؟

اگر مخاطبان شما به اینترنت پرسرعت دسترسی داشته باشند، دیگر نیازی به بهینه‌سازی تصاویر نیست. این یکی از حالت‌های خاص است، برای مثال اگر می‌خواهید تصاویر را در یک شبکهٔ داخلی (مثل اینترانت) قرار دهید. در این حالت شما به تصاویر با کیفیت بالا نیاز دارید تا در مرورگرها نمایش داده شوند، ولی نیاز نیست که در مورد اندازهٔ تصاویر نگران باشید، چون یک شبکهٔ داخلی از هر اتصال به اینترنتی سریع‌تر است. بنابراین، تصاویر را در قالب PNG ذخیره کنید.

اگر این حالت خاص در مورد شما صادق است، دیگر نیاز نخواهید داشت که ادامه را بخوانید. فقط از قالب PNG استفاده کنید.

در هر صورت اگر مخاطبان خود را می‌شناسید، و آنها به اینترنت سریع دسترسی دارند و یا اطلاعی از مخاطبان خود ندارید (برای مثال هر فرد متصل به اینترنت می‌تواند باشد)، باید در مورد اندازهٔ تصاویر مراقب باشید. اگر این شرایط برای شما صدق می‌کند، نیاز به بررسی بهترین قالب برای تصاویرتان دارید و اینکه چه کارهایی را برای بهینه کردن آن باید انجام دهید.

آیا ارتفاع و عرض تصویر شما مناسب است؟

اولین چیزی که باید بررسی کنید‌ ارتفاع و عرض مناسب تصویرتان است. این، مهمترین عامل در تعیین اندازهٔ تصویر است. هر قدر که عکس بزرگتر باشد، اندازهٔ‌ آن هم بزرگتر خواهد بود. پس مطمئن شوید که اندازهٔ تصویر مورد نظرتان، و ابعاد مورد نظرتان در صفحهٔ وب یکسان باشد. برای مثال اگر اندازهٔ تصویری که می‌خواهید در صفحهٔ وب نمایش دهید (برای مثال) ۴۰۰ نقطه در ۲۶۷ نقطه است، باید مطمئن شوید که ابعاد تصویرتان همین مقدار است. چگونه می‌توانید ابعاد عکس را ببینید؟ به راحتی ... گیمپ به شما نشان خواهد داد ... مثل تصویر زیر، منوی «نما» (View) را انتخاب کنید و سپس بر روی مورد پنجرهٔ اطلاعات (Info Window) کلیک کنید:

ابعاد تصویر

یاید یک پنجرهٔ جدید، شبیه تصویر زیر ببینید:

پنجرهٔ اطلاعات

در اینجا می‌توانید ببینید که ابعاد این تصویر، ۶۰۰ نقطه در ۴۰۰ نقطه است.

در این مثال می‌خواهیم بزرگ‌نمایی تصویر را به ۴۰۰ در ۲۶۷ نقطه کوچک کنیم. برای این کار، روی منوی «تصویر» (Image) و سپس روی مورد «تغییر بزرگ‌نمایی تصویر» (Scale Image) کلیک کنید:

تغییر دادن بزرگ‌نمایی تصویر

باید پنجره‌ای شبیه این را ببینید:

تغییر دادن مقیاس تصویر -۲

می‌توانید با نوشتن ابعاد موردنظرتان در فیلد عرض (Width) بزرگ‌نمایی تصویر را دوباره تغییر دهید:

تنظیم مقیاس

در مثال بالا عدد ۴۰۰ را در فیلد عرض (Width) نوشتیم، ارتفاع (Height) تغییری نکرد. در هر حال گیمپ نسبت تصاویر را حفظ می‌کند:

تنظیم مقیاس۲

اگر شمایل زنجیر را می‌بینید، به این معنی است که اگر شما مقدار ارتفاع یا عرض را تغییر دهید، مقدار دیگر به صورت خودکار تغییر خواهد کرد تا نسبت ابعاد تصویر ثابت بماند. اما در مثال بالا این اتفاق روی نداد. چرا؟ چون شما باید حتماً دکمهٔ ورود ("enter") در صفحه‌کلید را فشار دهید یا در قسمتی دیگر از پنجره کلیک کنید تا گیمپ متوجه شود که عدد مورد نظرتان را وارد کرده‌اید. سپس گیمپ مقدار دیگر را به صورت خودکار، با احتساب نسبت، تعیین می‌کند. بنابراین اگر شما دکمهٔ ورود را فشار دهید، چنین چیزی خواهید دید:

تنظیم مقیاس۳

تصویر شما دارای چند رنگ است؟

اگر می‌خواهید اندازهٔ پرونده‌تان را برای نمایش بر روی اینترنت بهینه‌سازی کنید (به قسمت بالایی مراجعه کنید)، بنابراین انتخاب قالب تصویر شما به این بستگی دارد که چه نوع تصویری می‌خواهید نمایش دهید. بیایید با یک مثال ساده شروع کنیم. اگر تصویر شما کمتر از ۲۵۶ رنگ دارد، از قالب GIF استفاده کنید. چون قالب تصویری GIF به خوبی می‌تواند اندازه را برای تصاویر با ۲۵۶ رنگ یا کمتر کاهش دهد. سؤالی در اینجا مطرح می‌شود، «چگونه می‌توانید تعداد رنگ‌های تصویرتان را بدانید؟». با گیمپ کار ساده‌ای است. ابتدا باید تصویری مانند تصویر زیر را باز کنید:

تصویر باز شده در گیمپ

سپس روی منوی «لایه» (Layer) در نوار بالایی کلیک کنید، روی مورد «رنگ‌ها» (Colors) بیایید و بر روی مورد «تحلیل مکعب رنگ» (Color Cube Analysis) کلیک کنید:

مکعب رنگ

پنجره‌ای حاوی اطلاعاتی نمایش داده خواهد شد که چیزی شبیه تصویر زیر است:

۲مکعب رنگ

می‌توانید در اطلاعات بالا ببینید که تعداد رنگ‌های مشخص برابر ۲۴۳ است. بسیار خوب، این تصویر مناسب برای ذخیره‌کردن در قالب GIF است. در این مورد یک استثنا وجود دارد. اگر تصویر شما شامل مقدار زیادی شیب باشد (رنگهایی که تدریجی تغییر می‌کنند) بهتر است که از قالب JPEG استفاده کنید. برای مثال بهتر است که عکس‌ها را در قالب JPEG ذخیره کنید. چون ۲۵۶ رنگ ظاهری خشن و دانه‌دانه به تصویر می‌دهد. تصاویر با رنگ‌های ساده، مناسب GIF هستند. خیلی بهتر است که هر دو حالت را انجام دهید و سپس کیفیت و اندازهٔ آن دو را با هم مقایسه کنید.

اگر تصویر شما بیش از ۲۵۶ رنگ داشت، از GIF استفاده نکنید. JPEG و PNG را امتحان کنید و اندازه و کیفیت آن دو را با هم مقایسه کنید.

ذخیره کردن تصویر در قالب GIF

ذخیره کردن تصویر در قالب GIF در گیمپ کار بسیار ساده‌ای است. ابتدا روی منوی «پرونده» (File) و سپس روی مورد «ذخیره به نام» (Save As) کلیک کنید:

ذخیره کردن تصویر در قالب GIF

سپس چیزی شبیه به این تصویر خواهید دید:

ذخیره کردن تصویر در قالب GIF - ۲

در این قسمت نمی‌خواهیم در جستجوی محل ذخیره کردن تصویر باشیم. فقط می‌خواهیم نشان دهیم که چگونه یک پرونده را با قالب GIF ذخیره کنید. کار بسیار ساده‌ای است: در فیلد «نام» (Name) فقط پسوند را به «gif» تغییر دهید. در این مثال این کار را انجام می‌دهیم:

تغییر دادن پسوند پرونده برای ذخیره کردن در قالب GIF

پسوند را به شکل زیر تغییر می‌دهیم:

پسوند پرونده تغییر یافت

گیمپ به صورت خودکار پسوند را تشخیص می‌دهد و اطلاعات تصویر را برای ذخیره کردن در قالب GIF آماده می‌کند. حالا دکمهٔ «ذخیره» (Save) را بزنید. باید چیزی شبیه این ببینید:

ذخیرهٔ پرونده در قالب GIF

در اینجا متوجه خواهید شد که قالب تصویر در هنگام ذخیره کردن چگونه تغییر خواهد کرد. دکمهٔ «صادر شود» (Export) را بزنید. باید چیزی شبیه این ببینید:

استخراج تصویر به قالب GIF

در اینجا دو گزینه برای انتخاب وجود دارد که می‌توان آن‌ها را نادیده گرفت، اگر می‌خواهید از آن‌ها استفاده کنید، اینگونه معنی می‌دهند:

در هم‌یافته (Interlace)

اگر مخاطبانتان از اینترنت با سرعت کم استفاده می‌کنند، در هم آمیختن یک تصویر نمایش آن را در مرورگر سریعتر می‌کند.

توضیح (GIF Comment)

در اینجا می‌توانید اطلاعات متنی خود را در تصویر خود ذخیره کنید.

ذخیره کردن یک تصویر در قالب JPEG

ابتدا روی منوی «پرونده» (File) و سپس روی مورد «ذخیره به نام» (Save As) کلیک کنید:

ذخیره کردن در قالب JPEG

سپس چیزی شبیه این تصویر خواهید دید:

ذخیره کردن در قالب JPEG - ۲

می‌خواهیم تصویر را در قالب JPEG ذخیره کنیم، پس باید مطمئن شویم که انتهای نام پرونده، پسوند «.jpg» است. می‌توانید هر نامی برای پرونده انتخاب کنید. فقط مطمئن شوید که انتهای آن «.jpg» است.

نام پرونده، با پسوند مناسب JPEG

روی دکمهٔ «ذخیره» (Save) که در قسمت چپ پایین قرار دارد کلیک کنید. سپس:

تنظیمات کیفیت تصویر

در اینجا می‌خواهیم کیفیت تصویر را تعیین کنیم. چند مطلب را باید بدانید:

۱- هرچه کیفیت تصویر بیشتر باشد، حجم پرونده هم بزرگتر خواهد بود.

۲- هرچه کیفیت تصویر کمتر باشد، حجم پرونده هم کوچکتر خواهد بود.

حالت پیش‌فرض ۸۵٪ است که برای بیشتر کاربران وب مناسب است. تنها راهی که به وسیلهٔ آن می‌توانید از تنظیم کیفیت خوب تصویر مطمئن شوید، نگاه به حجم و کیفیت تصویر است. سپس چندین تصویر را با تنظیمات مختلف ذخیره کنید. بعد از این کار تفاوت‌های بین تنظیمات تصاویر با کیفیت زیاد و کیفیت کم را خواهید دید.

می‌توانید با انتخاب جعبهٔ نشانه‌زنی «نشان دادن پیش‌نمایش در پنجرهٔ تصویر» (Preview In Image Window) تفاوت‌های تنظیمات فشرده‌سازی مختلف را ببینید:

جعبهٔ نشانه‌زنی پیش‌نمایش تصویر

هنگامی که این گزینه را انتخاب کردید، می‌توانید نوار لغزش کیفیت (Quality) را بکشید و کیفیت تصویر اصلی را بلافاصله تغییر دهید. برای دیدن این که چقدر فشرده‌سازی که شما انجام می‌دهید، قبل از ذخیره کردن تصویر قابل قبول است،‌ این امر می‌تواند مفید باشد.

ما تنظیمات را در سطح ۸۵٪ نگاه می‌داریم،‌ ولی اگر می‌خواهید تنظیمات را تغییر دهید، نوار لغزش را به سمت چپ یا راست حرکت دهید (تغییرات عدد مربوط به کیفیت را خواهید دید).

برای قبول کردن تنظیمات کیفیت تصویر روی دکمهٔ «تأیید» (OK) کلیک کنید تا پروندهٔ مورد نظر با تنظیماتی که از قبل تعیین کرده بودید، ذخیره گردد.

ذخیره‌سازی تصویر در قالب PNG

ابتدا روی منوی «پرونده» (File) و سپس روی مورد «ذخیره به نام» (Save As) کلیک کنید:

ذخیره کردن در قالب PNG - ۱

سپس چیزی شبیه این تصویر خواهید دید:

ذخیره کردن در قالب PNG - ۲

حالا پسوند نام پرونده را (در این مثال) از «bird.jpg» به «bird.png» تغییر دهید:

تغییر پسوند پرونده به PNG

وقتی که این کار را انجام دادید (هر نام پرونده‌ای که دوست داشتید می‌توانید انتخاب کنید، فقط مطمئن شوید که انتهای نام مورد نظر، پسوند «.png» است)، دکمهٔ «ذخیره» (Save) را بزنید. سپس چنین چیزی خواهید دید:

تنظیمات کیفیت PNG

گزینه‌های بالا در ادامه توضیح داده شده‌اند:

در هم آمیختن (Interlacing)

به این معنی است که تصویر به صورت تصاعدی، در حین بارگیری شدن در مرورگر نمایش داده خواهد شد.

ذخیره کردن رنگ پیش‌زمینه (Save background color)

اگر یک مرورگر توان نمایش سطوح شفافیت کمتری نسبت به تصویر داشته باشد، جایی که شفافیت وجود دارد، رنگ پس‌زمینهٔ تصویر نمایش داده خواهد شد. در حالت کلی، نیازی به این تنظیم ندارید.

ذخیره کردن گاما (Save gamma)

این گزینه اطلاعاتی در مورد تنظیمات گامای تصویر به صفحه‌نمایش شما می‌دهد، که به نمایش صحیح تصویر در نرم‌افزارهایی که این امکان را دارند کمک می‌کند. به صورت کلی نیازی به این تنظیم ندارید.

ذخیره کردن فاصلهٔ لایه (Save layer offset)

در حقیقت این یک گزینهٔ قدیمی و از بین‌رفته است، آن را نادیده بگیرید.

ذخیره کردن تفکیک‌پذیری (Save resolution)

این گزینه در مورد ذخیرهٔ تفکیک‌پذیری تصویر است، لازم است که این گزینه را انتخاب کنید.

ذخیره کردن زمان ایجاد (Save creation time)

تصویر مورد نظر، زمان و تاریخ ذخیره‌سازی پرونده را در خود ذخیره ‌می‌کند. این اطلاعات در تصویر نمایش داده نخواهد شد، ولی بعضی از نرم‌افزارها توانایی دسترسی به این اطلاعات را دارند.

فشرده‌سازی (Compression)

حالا به سراغ تنظیمات فشرده‌سازی می‌رویم. قالب PNG یک قالب بی‌خسارت است، یعنی هرچه با تنظیمات آن را فشرده کنیم، تأثیری بر کیفیت آن نخواهد داشت و فقط اندازهٔ تصویر کوچک خواهد شد. در حالت کلی مهم نیست که کدام تنظیم را انتخاب می‌کنید. این امر تفاوتی در کیفیت تصویر ایجاد نمی‌کند، ولی می‌توانید اندازهٔ تصویر را به وسیلهٔ این تنظیم کاهش دهید؛ در رایانه‌های کندتر، تنظیمات با کیفیت بیشتر، زمان بیشتری برای پردازش (ذخیره کردن) می‌گیرند. سپس روی دکمهٔ «تأیید» (OK) کلیک کنید تا تصویرتان در قالب PNG ذخیره شود.


محتویات این صفحه تحت اجازه‌نامه کریتیو کامانز است.