بخش Save for Web در فتوشاپ یکی از ابزارهای کلیدی برای بهینهسازی تصاویر بهمنظور استفاده در وب است. این ویژگی به طراحان گرافیک امکان میدهد که تصاویر را به فرمتهای مختلف تبدیل کنند و تنظیمات مربوط به فشردهسازی، کیفیت و حجم را به دقت تنظیم کنند تا تصاویری با کیفیت مناسب و حجم کم برای وب بهدست آید. در این مقاله، به بررسی کامل مراحل و تنظیمات مختلف این بخش خواهیم پرداخت.
نحوه دسترسی به بخش Save for Web
برای شروع بهینه کردن تصاویر برای وب با این ابزار، باید ابتدا تصویری را که قصد بهینهسازی آن را دارید، در فتوشاپ باز کنید. سپس از منوی بالای برنامه، گزینههای زیر را دنبال کنید:
File > Export > Save for Web (Legacy)
با انتخاب این گزینه، پنجرهای جدید باز خواهد شد که شامل مجموعهای از تنظیمات مختلف برای بهینهسازی تصویر است. در این پنجره میتوانید فرمت تصویر، کیفیت، ابعاد و دیگر جزئیات مربوط به بهینهسازی را تنظیم کنید. شما میتوانید از کلیدهای ترکیبی Alt + Shift + Ctrl + S نیز استفاده کنید.
انتخاب فرمت مناسب در Save for Web
یکی از مهمترین تصمیمات در هنگام استفاده از Save for Web، انتخاب فرمت مناسب برای ذخیره تصویر است. در این پنجره، شما به چند فرمت مختلف دسترسی دارید که هرکدام ویژگیهای خاص خود را دارند:
1. JPEG (Joint Photographic Experts Group): این فرمت یکی از رایجترین و بهترین گزینهها برای تصاویر عکسمحور در وب است. JPEG قابلیت فشردهسازی تصاویر با حجم کمتر و کیفیت قابل قبول را دارد. این فرمت برای تصاویر با رنگهای زیاد و جزئیات پیچیده بسیار مناسب است. در این حالت، میتوانید با تغییر سطح فشردهسازی، حجم فایل را کنترل کنید.
2. PNG-8 و PNG-24: فرمت PNG یکی دیگر از گزینههای محبوب برای وب است، بهخصوص برای تصاویری که دارای پسزمینه شفاف یا رنگهای محدود هستند. PNG-8 برای تصاویر با تعداد رنگهای کمتر (256 رنگ یا کمتر) مناسب است، در حالی که PNG-24 برای تصاویر با رنگهای بیشتر و با شفافیت بالا استفاده میشود. با این حال، فایلهای PNG-24 معمولاً حجم بیشتری نسبت به JPEG دارند.
3. GIF (Graphics Interchange Format): این فرمت برای تصاویر متحرک و تصاویری با تعداد رنگهای محدود مناسب است. حجم فایلهای GIF معمولاً کوچک است، اما این فرمت برای تصاویر پیچیده و با کیفیت بالا توصیه نمیشود.
4. WebP: فرمت WebP یک گزینه جدیدتر است که توسط گوگل معرفی شده است. این فرمت توانایی فشردهسازی تصاویر با حجم کمتر و کیفیت بالاتر را دارد و میتواند جایگزین مناسبی برای JPEG و PNG در بسیاری از موارد باشد. با این حال، همه مرورگرها به طور کامل از این فرمت پشتیبانی نمیکنند.
تنظیم کیفیت تصویر
پس از انتخاب فرمت مناسب، مرحله بعدی تنظیم کیفیت تصویر است. در پنجره Save for Web، نوار لغزندهای برای تنظیم کیفیت تصویر وجود دارد. این نوار به شما امکان میدهد کیفیت و حجم فایل را به صورت همزمان کنترل کنید.
1. JPEG Quality: اگر فرمت JPEG را انتخاب کردهاید، میتوانید سطح کیفیت را از 0 تا 100 تنظیم کنید. هرچه عدد بالاتر باشد، کیفیت تصویر بهتر و حجم فایل بیشتر خواهد بود. معمولاً تنظیم کیفیت بین 60 تا 80 برای تصاویر وب توصیه میشود، زیرا این بازه تعادلی خوب بین کیفیت و حجم ایجاد میکند.
2. PNG و GIF: برای فرمتهای PNG و GIF، تنظیمات کیفیت تصویر به همان شکلی که در JPEG وجود دارد، نیست. با این حال، میتوانید تعداد رنگهای استفاده شده در تصویر را کاهش دهید تا حجم فایل کاهش یابد. برای مثال، کاهش تعداد رنگها در تصاویر PNG-8 یا GIF میتواند تأثیر قابل توجهی در حجم فایل داشته باشد.
کاهش حجم تصویر
یکی از اصلیترین اهداف استفاده از بخش Save for Web، کاهش حجم تصاویر برای استفاده در وب است. حجم کمتر باعث میشود صفحات وب سریعتر بارگذاری شوند و کاربران تجربه بهتری از سایت داشته باشند. اما چه حجمی برای تصاویر وب قابل قبول است؟
1. حجم توصیهشده برای تصاویر وب: به طور کلی، حجم تصاویر وب باید کمتر از 200 کیلوبایت باشد. البته بهترین حجم در حدود 60 تا 80 کیلوبایت است. برای تصاویر بزرگتر، مثل بنرهای بزرگ یا تصاویر پسزمینه، این مقدار میتواند کمی بیشتر باشد، اما حتی در این حالت هم باید سعی شود حجم تصویر کمتر از 500 کیلوبایت باشد.
2. ابزار پیشنمایش حجم فایل: یکی از ویژگیهای مفید در بخش Save for Web، نمایش حجم تخمینی فایل پس از اعمال تنظیمات است. در گوشه پایین سمت چپ پنجره، میتوانید حجم فایل نهایی را مشاهده کنید. این اطلاعات به شما کمک میکند تا قبل از ذخیره کردن تصویر، به درستی حجم آن را کنترل کنید.
تنظیم ابعاد تصویر
یکی دیگر از تنظیمات مهم در بخش Save for Web، تغییر ابعاد تصویر است. بسیاری از تصاویر آپلود شده به وبسایتها بزرگتر از ابعاد مورد نیاز هستند و این موضوع باعث افزایش حجم و کاهش سرعت بارگذاری سایت میشود.
1. تغییر ابعاد تصویر: در پنجره Save for Web، بخشی به نام Image Size وجود دارد که در آن میتوانید ابعاد تصویر را تغییر دهید. اگر ابعاد تصویر شما بزرگتر از نیاز است، میتوانید به سادگی آن را کوچک کنید. به عنوان مثال، اگر تصویر شما 3000 پیکسل عرض دارد و قرار است در وبسایتی با عرض 1200 پیکسل نمایش داده شود، بهتر است عرض تصویر را به 1200 پیکسل کاهش دهید.
2. تناسب ابعاد (Aspect Ratio): هنگام تغییر ابعاد، دقت کنید که تناسب ابعاد تصویر حفظ شود. در پنجره Save for Web، گزینهای برای قفل کردن نسبت ابعاد وجود دارد که با فعال کردن آن، هر تغییری که در عرض یا ارتفاع تصویر اعمال شود، به طور خودکار در دیگر بعد نیز اعمال میشود تا تصویر تغییر شکل ندهد.
استفاده از قابلیت Optimized
در پنجره Save for Web، یک گزینه به نام Optimized وجود دارد که با فعال کردن آن، فتوشاپ تلاش میکند تا حجم فایل را بهینهسازی کند بدون اینکه کیفیت تصویر به طرز محسوسی کاهش یابد. این گزینه به خصوص برای فرمت JPEG مفید است، زیرا فشردهسازی بیشتری را با حفظ کیفیت قابل قبول فراهم میکند.
مقایسه تصویر قبل و بعد از بهینهسازی
یکی دیگر از ویژگیهای جالب پنجره Save for Web، قابلیت پیشنمایش تصویر قبل و بعد از بهینهسازی است. در بالای پنجره، شما میتوانید حالتهای مختلف نمایش را انتخاب کنید:
1. Original: این حالت تصویر اصلی را بدون هیچ گونه فشردهسازی یا بهینهسازی نشان میدهد.
2. Optimized: این حالت تصویر بهینهشده را نشان میدهد که بر اساس تنظیمات شما فشردهسازی شده است.
3. 2-Up: در این حالت، تصویر اصلی و تصویر بهینهشده به صورت همزمان در کنار هم نمایش داده میشوند. این قابلیت به شما امکان میدهد تا تفاوت کیفیت و حجم تصویر را مشاهده کرده و بهترین تنظیمات را انتخاب کنید.
شما میتوانید با شرکت در دوره تخصصی فتوشاپ بیتگرف به تمام این ابزارها و نکات و ترفندها مسلط شوید.