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

با تولید مرورگرهای جدید و گذر از دوران حکم‌رانی Internet Explorer نسخه ۷ (که از تصاویر PNG شفاف پشتیبانی نمی‌کرد)، کم کم پای گرافیک‌هایی با فرمت PNG به وب باز شد و این آغاز یک نسل جدید برای وب بود. چرا که تصاویر PNG قادر هستند تصاویر را با کیفیت ۲۴بیت (RGB) و ۳۲بیت (RGBA - با پس‌زمینه شفاف) نمایش دهند و معنی این، تصاویر با کیفیت بالا و حجم‌های مناسب است. سایز فایل‌های تصاویر PNG در حالت عادی تفاوت خیلی زیادی با تصاویر GIF ندارند. تصاویر PNG هنوز هم به وسعت در وب کاربرد دارند و بیشتر گرافیک‌های موجود در وب با این فرمت ذخیره شده‌اند.

مشکل تصاویر PNG

مشکل از جایی شروع شد که شرکت اپل، آیفون ۴ را معرفی کرد که دارای صفحه نمایش رتینا بود. فشردگی پیکسل‌های صفحه‌های نمایش رتینا، دقیقا ۲ برابر صفحه‌های نمایش معمولی هستند. برای مثال، سایز صفحه نمایش آیفون ۳جی‌اس (و نسل‌های قبل از آن) ۳.۵ اینچ است و کیفیت آن، ۳۲۰ در ۴۸۰ پیکسل است، در حالی که صفحه نمایش آیفون ۴، با همین ابعاد (۳.۵ اینچ) دارای کیفیت ۲ برابر یعنی ۶۴۰ در ۹۶۰ پیکسل است، به این معنی که اندازه فیزیکی هر پیکسل نصف نسل‌های پیشین است. تصاویر PNG (و تمام تصاویر دیگر) که تا قبل از تولید آیفون ۴ در وب وجود داشتند، برای صفحه نمایش‌هایی با فشردگی ۱ پیکسل طراحی شده بودند، به همین دلیل، اگر وب‌سایت‌ها و اپلیکیشن‌هایی که با صفحه نمایش رتینا سازگاری ندارد در این صفحه‌نمایش مشاهده شوند، تمام تصاویر تار به نظر می‌آیند. چرا که صفحه‌نمایش رتینا سعی می‌کند که تصویر را ۲ برابر بزرگنمایی کند تا در سایز واقعی خود نمایش داده شود.

برای حل این مشکل، باید تصویر را با ابعاد ۲ برابر ابعاد مورد نظرمان ذخیره کنیم تا در صفحه نمایش رتینا به درستی نمایش داده شود. برای مثال در CSS اگر بخواهیم یک تصویر پس‌زمینه را برای صفحه‌های نمایش رتینا بهینه‌سازی کنیم باید به این شکل عمل کنیم:

.logo{
    background: url(../img/logo.png) 0 0 no-repeat;
}

@media (-webkit-min-device-pixel-ratio: 2){
    .logo{
        background-image: url(../img/logo@2x.png);
        background-size: 100%;
    }
}

در این مثال، اگر فرض کنیم سایز اصلی لوگو ۱۰۰ در ۱۰۰ پیکسل است، برای اینکه درست نمایش داده شود، باید یک‌بار آن‌را در سایز اصلی‌اش و یک‌بار با سایز دو برابر یعنی ۲۰۰ در ۲۰۰ پیکسل و با نام logo@2x.png ذخیره کنیم و با استفاده از CSS آن‌را به درستی نمایش دهیم.

در حال حاضر این روش یکی از روش‌های استاندارد و پذیرفته‌شده در تمام دنیا برای نمایش دادند صحیح گرافیک‌های مورد استفاده در وب است و راه‌حل‌ها و مقالات بسیاری در این زمینه در اینترنت وجود دارد، و این راه‌حل‌ها ممکن است برای بسیاری قابل قبول باشند.

مشکل بزرگتر!

مشکل این است که تکنولوژی هر روز در حال پیشرفت است و می‌بینیم که روز به روز صفحه‌نمایش‌های بهتر با کیفیت‌های بالاتر در حال تولید هستند. برای مثال تلفن‌های هوشمند Samsung Galaxy S4، HTC One و Sony Xperia Z دارای صفحه‌های نمایش با فشردگی ۳ پیکسل به جای ۱ پیکسل هستند و از کیفیت بالاتری از صفحه نمایش رتینا برخوردار هستند، به همین دلیل، حتی تصاویری که با ابعاد ۲ برابر ذخیره شده و برای صفحه‌نمایش رتینا بهینه‌سازی شده‌اند، در این صفحه‌نمایش‌های جدید و پیشرفته بی‌کیفیت به نظر می‌آیند، چرا که صفحه‌نمایش تلاش می‌کند این تصاویر را با ۱.۵ برابر اندازه واقعی‌شان نمایش دهد و این اتفاق می‌افتد:

برای حل این مشکل می‌توانیم مانند تصاویر رتینا، یک تصویر دیگر که ابعاد آن ۳ برابر ابعاد تصویر اصلیست ذخیره کنیم، نام آنرا برای مثلا logo@3x.png بگذاریم و با استفاده از CSS Media Queries نسخه مناسب را در صفحه‌های نمایش مربوطه نشان دهیم.

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

استفاده از تصاویر SVG

واژه SVG مخفف Scalable Vector Graphics به معنای «تصاویر برداری مقایس‌پذیر» است. ساختار این تصاویر بر اساس قالب بندی XML است و تصاویر و اشکال موجود در آن‌ها با استفاده از محاسبات ریاضی توسط رایانه روی صفحه‌نمایش رسم می‌شود. به زبان ساده‌تر، تصاویر SVG چون بر مبنای عدد و نسبت هستند، به پیکسل‌ها وابستگی‌ای ندارند و در هر مقیاسی بدون افت کیفیت نمایش داده می‌شوند. تصاویر SVG توسط کنسرسیوم جهانی وب به صورت یک استاندارد پذیرفته شده‌اند و هم اکنون حدود ۸۵٪ از مرورگرهای موجود از آن‌ها پشتیبانی می‌کنند.

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

برای مثال، من در طراحی نسخه جدید باایمیل که فروردین امسال معرفی شد، به جای تصاویر معمول از تصاویر SVG استفاده کردم. برای تولید این تصاویر، آن‌ها را در نرم‌افزار Adobe Illustrator آماده کردم و درست مانند تصاویر عادی آن‌ها را در CSS به کار بردم. با این تفاوت که نیازی به مشخص کردن تصاویر جدید برای فشردگی‌های پیکسلی متفاوت نیست. چرا که تصاویر SVG همانطور که قبلا اشاره شد، در هر مقایسی بدون افت کیفیت نمایش داده می‌شوند.

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

عکس‌ها

همانطور که قبلا اشاره شد، تصاویر SVG برای عناصر ساده‌تر رابط کاربری که از اجزای ساده تر و هندسی تشکیل شده‌اند مناسب تر است. امکان اضافه کردن «عکس» به تصاویر SVG با استفاده از تگ <image> وجود دارد، ولی عکس‌ها را نمی‌شود بر اساس اعداد محاسبه کرد چرا که از اشکال هندسی تشکیل نشده‌اند و حتما باید بر اساس پیکسل‌ها نمایش داده شوند. بنابراین، بهترین راه برای نمایش عکس‌ها (مانند عکس‌های اشخاص، محصولات و ...) استفاده از آن‌ها با فرمت JPG است. تصاویر JPEG سالیان زیادی است که برای نمایش عکس‌ها در سیستم‌های الکترونیکی کاربرد دارند و از قدرت فشرده‌سازی بسیاری خوبی برخوردارند و می‌توان برای پایین آوردن حجم فایل عکس‌ها از آن‌ها استفاده کرد.

عکس‌ها هم مانند تصاویر PNG، در صفحه‌های نمایش با کیفیت بالاتر، کیفیت اصلی خود را از دست می‌دهند و صفحه نمایش تلاش می‌کند آن‌ها را با ابعاد چند برابر ابعاد واقعی‌شان نمایش دهد. برای همین این روزها راه‌حل‌های بسیاری برای استفاده راحت‌تر از عکس‌ها در صفحه‌نمایش‌های مختلف در اینترنت ارائه می‌شود. در مقاله Clown Car Technique که پیش‌تر هم به آن اشاره شد، تمام راه‌حل‌های موجود بررسی شده و بهترین آن‌ها انتخاب شده است.

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

تصویر دوم، ۳۳٪ بزرگنمایی شده است. با اینکه کیفیت تصویر دوم ایده‌آل نیست اما هنوز قابل مشاهده است. به همین خاطر، من پیشنهاد می‌کنم برای ذخیره عکس‌ها و استفاده آن‌ها در وب‌سایت، در صورت امکان تمام عکس‌ها را در اندازه ۲ برابر ابعاد مورد استفاده‌شان ذخیره کنید و آن‌ها را با CSS کوچک کنید. برای مثال، در صورتی که شما عکس‌های اشخاص را در وب‌سایت با سایز ۲۰۰ در ۳۰۰ پیکسل نمایش می‌دهید، آن‌ها را روی سرور با اندازه ۴۰۰ در ۶۰۰ پیکسل ذخیره کنید و در صفحه نمایش دهید. در این حالت، صفحه‌های نمایش با فشردگی ۱ پیکسل (صفحه‌نمایش معمولی) و ۲ پیکسل (صفحه‌نمایش رتینا) تصویر را به زیبایی نمایش می‌دهند و دستگاه‌های جدیدتر، که فشردگی پیکسلی بالاتری دارند هم می‌توانند آن‌ها را با افت نامحسوس نمایش دهند.

از تصاویر SVG لذت ببرید :) سالار.