بهینه سازی عکس‌ها و گرافیک وب سایت

شما معمولاً چه مدت زمانی در انتظار لود کردن یک وب سایت پیش از آن‌که کلیک دیگری داشته باشید یا URL دیگری را امتحان کنید، سپری می‌کنید؟

اغلب کاربران دوست ندارند زمانی بیشتر از 8 ثانیه (با مودم 56k) را در انتظار لود کردن وب سایتی باشند. عوامل بسیاری می‌تواندبر زمان لود کردن وب سایت‌ها تاثیر بگذارند، که استفاده نابجا و افراطی از تصاویر و گرافیک‌ها، یکی از رایج‌ترین این عوامل هستند.

بهینه سازی گرافیک وب سایت مستلزم پیدا کردن و برقراری تعادل بین کیفیت تصویر و اندازه آن می‌باشد. به منظور بهینه‌سازی تصاویر وب سایت خود مراحل زیر را دنبال کنید:

-تغییر اندازه تصویر.

-کاهش رنگ‌های مورد استفاده در تصویر.

-ذخیره تصویر در فرمت فایل متراکم.

گام اول: تغییر اندازه تصویر

از برنامه ویرایش تصویر به منظور تغییر اندازه گرافیک یا عکس خود استفاده کرده و به این ترتیب اندازه دقیق و مورد نیاز خود را معین کنید. مثلاً، اگر عکس با عرض 7 اینچ و ارتفاع 5 اینچ یا 504 در360 پیکسل دارید، و می‌خواهید روی وب سایت در اندازه 107در150 پیکسل ظاهر شود، تصویر بزرگتر را روی وب سایت قرار نداده و اندازه آن را با استفاده از نرم افزار ساخت وب‌سایت(web building software) تغییر دهید. این تصویر با اندازه پیکسل صحیح خود (به آهستگی) لود خواهد شد و بروزر پس از لود شدن، آن را به اندازه 107در150 پیکسل تغییر می‌دهد.

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

گام دوم: رنگ‌های مورد استفاده در تصویر را کم کنید

حذف رنگ‌های غیر لازم یکی دیگر از روش‌های کاهش حجم تصویر است. به طور منطقی گرافیکی که با 2 رنگ ذخیره شده، کوچکتر از گرافیکی است که با بکارگیری 256 رنگ ذخیره می‌شود.

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

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

دیترینگ (dithering) می‌تواند به کاهش نوار رنگی کمک کند. هر چند دیترینگ اندازه فایل شما را کمی افزایش خواهد داد، اما می‌تواند کیفیت تصویر را با جایگذاری رنگ‌های موجود ترکیبی با رنگ‌های حذف شده در فضاهای نواری، ارتقاء داده و به این ترتیب، با ارائه نمایشی از تعداد رنگ‌های بیشتر در تصویر، دید شما را تحت تاثیر قرار ‌دهد.

گام سوم: تصویر را در فرمت فایل متراکم ذخیره کنید

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

دو نوع فایل متداولی که روی وب سایت خود خواهید دید، Gif و JPEG هستند.

فایل (GIF (Graphics Interchange Format

این فایل‌ها، فایل‌های تصویری متراکمی با حداقل اتلاف هستند. به این معنا که وقتی فایل تصویر را متراکم می‌کنند، داده‌ها از دست نمی‌روند، هر چند رنگ‌های فایل به 256 رنگ یا کمتر محدود ‌شوند. این فرمت با فضاهای متوالی و پیوسته رنگی، تصاویر را بهینه می‌کند. از آنجا که قاعدتاً با استفاده از تصویر GIF نیز برخی رنگ‌ها را از دست خواهید داد، این فایل را برای خطوط ترسیمی ساده، اشکال، آیکون‌های ساده یا دیگر افکت‌های غیر پیچیده بکار برید.

وقتی تصویری را با GIF بهینه می‌کنید، به تعیین میزان کیفیت تصویری نیاز خواهید داشت که می‌خواهید، به منظور به دست آوردن اندازه فایل کوچکتر آن را تغییر دهید. فایلهای GIF، امکان انتخاب گزینه تنظیم شفافیتِ پس زمینه را نیز دارند. وجود این امکان زمانی که تصویر شما روی پس زمینه گرادیانی یا الگویی جا می‌گیرد، ضرورت دارد. در غیر این صورت کار خود را با بلوک جامدی از رنگ‌ها در اطراف تصویر به پایان خواهید رساند که به این ترتیب کار شما حرفه‌ای و جذاب نخواهد بود.

از گزینه درهم بافته (interloced) برای تصویر‌های GIF بزرگتر استفاده کنید. این گزینه سبب ایجاد تصویری می‌شود، که در ابتدا تیره و تار به نظر می‌آید، اما در نهایت تصویر اصلی لود خواهد شد. بدون ایجاد کاهش در زمان لود کردن، و با ظاهر شدن مرحله به مرحله‌ای تصویر، به نظر می‌آید که صفحه سریع‌تر لود می‌شود.

 فایل (JPEG (Joint Photographic Experts Group                      

تصاویر JPEG ، از تکنیک متراکمی‌ای با اتلاف زیاد استفاده می‌کنند. هر بار که تصویری را به صورت JPEG ذخیره می‌کنید، داده‌هایی را از دست خواهید داد. به منظور اجتناب از این امر، از ذخیره تصویر اصلی خود در فرمتی با حداقل اتلاف (نظیر PNG) برای اهداف ویرایشی خود اطمینان حاصل کنید.

تصویر JPEG با فرمت 24 بیتی ذخیره می‌شود، که امکان ذخیره میلیون‌ها رنگ را فراهم می‌آورد. به این دلیل است که فایل‌های JPEG را همواره باید برای عکس‌ها و گرافیک‌های پیچیده که دارای انتقال‌های تدریجی یا رنگ‌های زیادی هستند، بکار برد. بسیاری از برنامه‌های ویرایش تصویر، سه سطح مختلف را برای تراکم JPG پیشنهاد می‌کنند. برای رسیدن به تعادل مناسب بین اندازه و کیفیت تصویر به آزمایش‌های متعددی در این حوزه نیاز خواهید داشت. در مورد عکس‌های بزرگتر گزینه تدریجی (progressive) را بکار برید که با لود کردن تدریجیِ تصویر امکان لود کردن سریع‌تر صفحه را در نگاه مخاطب ایجاد کند.

به خاطر داشته باشید که برای استفاده مجدد همان تصویر تا حد امکان از مشخصه‌های cache در هارد دیسک استفاده کنید.

به این ترتیب وقتی یکبار تصویری را لود می‌کنید، این تصویر روی هارد دیسک ذخیره خواهد شد و به سادگی در استفاده‌های بعدی در دسترس خواهد بود.