چطور یک فرمت مناسب برای تصاویر وب سایتمان ایجاد کنیم

چطور یک فرمت مناسب برای تصاویر وب سایتمان ایجاد کنیم

 

در طراحی سایت نکاتی برای فرمت تصاویر وجود دارند که در این مقاله به آن پرداخته ایم.

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

خب چرا ما این کار را می‌کنیم؟ همه این‌ها به کدگذاری که هنگام ایجاد تصویر با یک فرمت خاص انجام شده، برمی‌گردد. JPEG به درد عکاسی می‌خورد (حرف P مخفف Photographic است) زیرا لبه‌های تیز را محو می‌کند و شیب‌های نرم را نگه می‌دارد. کدگذاری یک تصویر دارای بلوک‌های رنگی بزرگ و شارپ با استفاده از JPEG باعث از دست دادن وضوح و کدگذاری ناقص می‌شود.

برعکس، گیف به درد لوگو و بلوک‌های ساده نمودار می‌خورد، زیرا این فرمت روی تغییرات نواحی رنگی یکنواخت تمرکز می‌کند. واضح است این ویژگی به هیچ وجه مناسب تصاویری که پیکسل به پیکسل تفاوت رنگی دارند، نیست.

به عنوان مثال، این تصویر با حجم 106 کیلوبایت، فرمت JPEG دارد:

 

 

 

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

اگر این تصویر با فرمت PNG کدگذاری شود، 329 کیلوبایت حجم می‌گیرد. این عدد به وحشتناکی 517 کیلوبایت نیست، اما هنوز 3 برابر از مناسب‌ترین فرمت ممکن برای این تصویر حجم دارد.

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

شما باید مطمئن شوید هر تصویری که در وبسایت خود آپلود می‌کنید با مناسب‌ترین فرمت ممکن کدگذاری شده‌باشد، نه فرمت پیشفرضی که هنگام دریافت تصویر وجود داشته ‌است.

 

پشتیبانی مرورگرها

تا اینجا ما از سه فرمت قدیمی و محبوب سخن گفتیم که همه می‌شناسند و دوستشان دارند. بگذارید کمی کار را پیچیده کنیم: همه مرورگرها به طرز جسورانه‌ای از نسل بعدی فرمت‌های تصویر استفاده می‌کنند. کروم فرمت فوق‌العاده WebP را دارد، مرورگر اج مایکروسافت از JPEG XR پشتیبانی می‌کند و سافاری با JPEG 2000 اخت شده‌ است.

 

 

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

 

  WebP JPEG XR JPEG 2000
Chrome Yes X X
Edge X Yes X
Safari X X Yes
Firefox X X X

به عنوان مثال، WebP نسبت به گیف، PNG و JPEG در موارد مختلف نتیجه بسیار بهتری می‌دهد. برای آزمایش، تصویری که در بالا استفاده کردیم با کدگذاری WebP، 90.5 کیلوبایت حجم داشت که حدود 15 درصد کمتر از فرمت JPEG است. با این‌حال، شما فقط زمانی می‌توانید از این فرمت استفاده کنید که مرورگر موردنظرتان کروم، اپرا یا مرورگر اندورید باشد.

JPEG XR فرمت مخصوص مایکروسافت، JPEG eXtended Range، است که برپایه فرمت اصلی JPEG توسعه پیدا کرده و حتی مانند PNG و WebP قابلیت پشتیبانی از تصاویر ترنس‌پرنس (شفاف) را هم دارد. تصویری مورد آزمایش ما در کدگذاری JPEG XR 104 کیلوبایت حجم داشت که 2 درصد کمتر از JPEG است. طبیعتا، این فرمت برای اینترنت اکسپلورر 9 به بالا است و همانطور که از نامش پیداست مخصوص عکس‌هاست.

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

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

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

ما اکنون به نقطه مبهمی به نام فرمت‌های جدید رسیده‌ایم. فرمت‌هایی مانند FLIF و BPG که وجود دارند، در حال کشف‌شدن هستند، اما فقط زمان نیاز دارند تا مرورگرها از آن‌ها پشتیبانی کند.

این چه معنایی برای شما دارد؟ ممکن است مجبور شوید تمام تصاویر وبسایتتان را دوباره با یک یا دو فرمت جدید تولید کنید که کاری بس سخت و زمانبر است.

 

 

کلام آخر

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

 

هرگونه کپی برداری باذکر نام شرکت طراحی سایت مبنا تک هیوا و لینک دهی مستقیم مجاز می باشد.