انتخاب فرمت های تصاویر برای استفاده در سایت

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

انتخاب فرمت های تصاویر

برای اینکه تصاویر شما به بهترین شکل در صفحات وب نمایش داده شوند، باید در زمان استخراج (Export) و ذخیره کردن آن ها، بهترین فرمت های تصاویر را برای فایل خود انتخاب کنید. با اینکه بسیاری از برنامه های گرافیکی در پنجره Save خود، لیست تعداد زیادی از فرمت های امکان پذیر را در اختیار شما قرار می دهند، اما در وب فقط از چند فرمت خاص برای تصاویر استفاده می شود: JPEG ،GIF (به همراه GIF89 یا transparent GIF) و PNG. فرمت های SVG و Webp نیز به تازگی در وب مورد استفاده قرار می گیرد.

فرمت JPEG

فرمت JPEG (مخفف Joint Photographic Expert Group) اغلب برای تصاویری که مانند عكس ها، نیاز به تغییر رنگ ملایم و توناژ پیوسته دارند استفاده می شود. فرمت JPEG میلیون ها رنگ را پشتیبانی می کند و با فشرده کردن آن، بخشی از جزئیات تصویر از بین می رود. به این حالت Lossy Compression گفته می شود.

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

با اینکه مقدار فشردگی را نمی توان به طور مشخص بیان کرد، اما برای اینکه کیفیت و جزئیات عكس حفظ شود، اعداد ۵۰ تا ۱۰ درصد بالاترین مقادیری هستند که میتوان برای میزان فشردگی مناسب تعیین کرد. گاهی مقادیر بالاتر از این اعداد در بعضی از شرایط مانند عکس های بندانگشتی (Thumbnail) کوچک مناسب است و مشکلی ایجاد نمی کند، اما این میزان فشردگی نباید از ۷۰ درصد بیشتر شود.

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

بعضی از نرم افزارهای طراحی وب می توانند تصاویر را به فرمت progressive JPEGs ذخیره کنند. این فرمت، تصاویری در ابعاد بزرگتر ایجاد می کند اما باعث می شود که تصاویر شما در چندین مرحله دانلود شوند. این بدان معناست که تصاویری که دقت (Resolution) آن ها کمتر باشد، سریعتر نمایش داده می شوند اما کم کم به کیفیتی که در ابتدا ذخیره کرده بودید می رسند. این مسئله باعث می شود که کاربران بدون اینکه به مدت زمان زیادی برای بارگذاری کامل تصویر نیاز داشته باشند، بتوانند شکل ساده ای از تصویر را ببینند.

فرمت GIF

GIF مخفف (Graphic Interface Format) است. GIF از بسیاری لحاظ برعکس فرمت JPEG است. مثلا Lossless است، بدان معنا که با فشرده کردن تصویر، رنگ و کیفیت آن ها کاهش نمی یابد. این فرمت محدود به 256 رنگ است. که برای تصاویر گرافیکی گزینه مناسبی نیست. استفاده از این فرمت برای تصاویر گرافیکی باعث Banding می شود، یعنی میزان رنگها کاهش می یابد و اکثر آن ها به صورت معادل تقریبی شان نمایش داده می شوند.

فرمت GIF برای تصا خطوط هنری (line art) و تصاویر استفاده نشود. است. با اینکه GIF محدود GIF برای تصاویری مناسب است که دارای رنگهای ثابت زیادی باشند، مانند لوگوها، ه (line art) و متون. همان طور که قبلا گفتیم بهتر است برای متون نوشتاری از داده نشود. اما در صورتی که بخواهید این کار را انجام دهید فرمت GIF بهترین گزینه GIF محدود به 256 رنگ است اما شما مجبور نیستید هر بار از همین 256 رنگ وارد کنید. بسیاری از نرم افزارهای تحت وب چندین نوع پالت رنگ دارند، مانند پالتهای و (perceptual)، انتخابی (selective) و مختص وب (web). گزینه اول، پالت ادراکی، رنگ هایی جو انسان به آن ها حساسیت بیشتری نشان می دهد را در اولویت قرار می دهد، بنابراین کیب رنگ های بهتری ایجاد می شود.

نوع انتخابی نیز مانند نوع ادراکی است با این تفاوت که از رنگ هایی که با رنگ های ایمن در وب تطابق دارند، استفاده میکند. بنابراین تصاویری که ایجاد می شود در Platformهای مختلف یکسان نمایش داده می شوند. پالت سوم یعنی پالت وب همان پالت ۲۱۹ رنگ مناسب برای وب است که قبلا در مورد آن صحبت کردیم. علاوه براین شما می توانید رنگ هایی که شما را مجبور می کنند فقط از پالت رنگ مختص به نرم افزار طراحی خود استفاده کنید، را قفل کنید.

یکی از ویژگی های تصاویر، Dithering است. در Dithering از ایجاد تون های رنگهای متوالی برای ایجاد گروهی از رنگ ها جلوگیری می شود و با استفاده از یک پالت رنگ های محدود، رنگهایی که دارای تون های متوالی هستند شبیه سازی می شوند (به قابلیت کامپیوتر برای نمایش تقریبی رنگ ها با استفاده از ترکیب رنگ های RGB گفته می شود. بسیاری از ویرایشگرهای گرافیکی از سه نوع Dithering استفاده می کنند که عبارتند از:

• پراکنده (Diffusion)
• الگویی (Patter)
• نقطه ای (Noise)

این مدل ها تاثيرهای گوناگونی روی تصاویر دارند. ویژگی Diffusion یا پراکندگی تصویر از یک الگوی تصادفی در سطح پیکسل های مجاور استفاده می کند. اما ویژگی دیر یا Pattern از یک الگوی خاص مانند تصویری با کیفیت پایین که در چاپ مورد استفاده می گیرد، استفاده می کند. نوع نقطه ای یا Noise مانند Diffusion است با این تفاوت که الگور در سطح پیکسل های مجاور پخش نمی کند.

فرمت GIF89

نوع شفاف فرمت GIF89 مانند GIF است با این تفاوت که شما می توانید رنگ هایی از تصویر را حذف کنید. به طوری که در تصویر شفافیت ایجاد شود و زمینه تصویر نیز قابل مشاهده شود. این حالت به صورتی که بسیاری از طراحان گرافیکی انتظار دارند نیست، زیرا از شفافيت آلفا (یک ویژگی که باعث تغيير ملایم از رنگ ساده به سمت رنگ شفاف می شود و در سطوح مختلف شفاف ایجاد می کند) برخوردار نیست.

مثلا شما نمی توانید زمینه یک تصویر را از سمت رنگ به سمت شفافیت محو کنید و انتظار داشته باشید زمینه صفحه وب شما شفاف شود. اما شفافیت در تصاوير GIF89 مانند این است که با قیچی در تصوير حفرهای ایجاد کنید. نتیجه آن این است که زمینه اصلی تصویر فقط از قسمتهای بریده شده، نمایان می شود. این حالت زمانی خوب است که حفرهی شما دارای لبه های افقی یا عمودی باشد. اما اگر این کار را با سایه های ناهماهنگی انجام دهید، تصویر شما دارای لبه های ناهموار می شود.

امروزه به دلیل محدودیت هایی که اشاره کردیم، تصاویر GIF89 کاربرد زیادی ندارند. از این فرمت در وب فقط در یک موقعیت می توان استفاده کرد: زمانی که می خواهیم به منظور تراز شدن صفحه از فاصله اندازها استفاده کنیم تا طول خانه های جدول بیشتر شود. اما توصیه می کنیم از این روش استفاده نکنید زیرا با استفاده از CSS بهتر و دقیق تر میتوانید در صفحه فضاهای خالی ایجاد کنید تا تراز صفحه شما حفظ شود.

فرمت PNG

فرمت PNG مخفف Portable Network Graphics) مدت ها به عنوان یک فرمت مردود شده محسوب می شد. این فرمت که ابتدا برای جانشینی GIF طراحی شده بود، دارای مزیت هایی نسبت به فرمت GIF بود. از جمله می توان به پالت رنگ های انعطاف پذیرتر و ویژگی شفافيت آلفا اشاره کرد. بعضی از طراحان معتقدند که فرمت PNG می تواند جایگزین JPEG نیز شود. اما این کار را توصیه نمی کنیم، زیرا تصاویر PNG دارای حجم بیشتری نسبت به تصاویر JPEG هستند. این فرمت برای تصاویری که دارای خطوط تیز، رنگ های ساده و یا جایی که شفافیت آلفا مورد نیاز است گزینه مناسبی است.

فرمت SVG

تصاویر SVG، که مخفف Scalable Vector Graphics هستند، نوعی از فرمت های تصویری برداری می باشند که برای استفاده در صفحات وب طراحی شده اند. این فرمت به دلیل استفاده از عناصر برداری به جای پیکسل های معمولی، امکان بزرگنمایی بدون از دست دادن کیفیت را فراهم می آورد. SVG ها با استفاده از تعاریف ریاضیاتی شکل ها و مسیرها، تصاویری را ایجاد می کنند که می توانند به راحتی در اندازه های مختلف نمایش داده شوند، بدون آن که وضوح آن ها تحت تأثیر قرار گیرد.

علاوه بر این، SVG ها از تعاملات CSS و جاوا اسکریپت پشتیبانی می کنند، که این امر آن ها را برای طراحان و توسعه دهندگان وب بسیار جذاب می سازد. به عنوان مثال، می توان رنگ ها، اندازه ها و حتی انیمیشن های تصاویر SVG را با استفاده از CSS تغییر داد، یا با استفاده از جاوا اسکریپت به آن ها واکنش هایی را اضافه کرد. این ویژگی ها SVG را به یک ابزار قدرتمند برای ایجاد تجربیات کاربری پویا و تعاملی در وب تبدیل می کنند.

فرمت WebP

فرمت تصویر WebP، که توسط گوگل توسعه یافته است، به عنوان یک جایگزین مدرن برای فرمت های تصویری مانند JPEG و PNG مطرح شده است. این فرمت با استفاده از کدک ویدیویی VP8، تصاویری با کیفیت بالا را در اندازه های کوچکتر ارائه می دهد، که این امر می تواند به بهبود سرعت بارگذاری سایت ها و کاهش استفاده از پهنای باند کمک کند.

فرمت WebP ترکیبی از فشرده سازی پیشرفته و بدون تلفات را ارائه می دهد که می تواند کیفیت تصاویر JPEG و PNG را بهبود بخشد.

از مزایای استفاده از فرمت WebP می توان به افزایش عملکرد وب سایت، صرفه جویی در پهنای باند و بهبود سرعت بارگذاری صفحات اشاره کرد. این فرمت تصاویر را تا 25 تا 34 درصد کوچکتر از PNG و JPEG فشرده می کند، که این امر می تواند برای وب سایت هایی با تصاویر زیاد، مانند وبلاگ های غذا، مسافرت یا عکاسی، بسیار مفید باشد. با توجه به اهمیت سرعت بارگذاری صفحات برای موتورهای جستجو مانند گوگل، استفاده از فرمت WebP می تواند به بهبود سئو و رتبه بندی وب سایت ها کمک کند.

سایر فرمت های تصاویر

ممکن است در گذشته سایت هایی را دیده باشید که دارای فایل هایی با پسوندهای TIFF یا BMP بوده اند. این فرمت ها برای استفاده در وب استاندارد نیستند. با اینکه گاهی این فرمت های تصاویر ممكن است مشکلی در نمایش مرورگرها ایجاد نکنند، اما برای نمایش در صفحه مرورگر نیاز به نرم قرارهای دیگری دارند (در بسیاری از موارد با این فرمت ها اصلا نشان داده نمی شوند و یا یکپارچه نمایش داده نمی شوند).

علاوه بر این، دیگر فرمت های تصاویر مانند JPEG ،PNG ،GIF و حتی SVG و WebP به دلیل این که می توان اطلاعات تصویری زیادی را در یک فایل کوچک قرار داد، در وب مورد استفاده قرار می گیرند. اگر همین مقدار اطلاعات را در فایل های TIFF یا BMP قرار دهید نه تنها کیفیت تصاویر افزایش نخواهد یافت (دقت تصاویر پایین در وب را در نظر بگیرید) بلکه زمان دانلود نیز آن خواهد یافت.

بنابراین برای تصاویر در وب از فرمت هایی به غیر از JPEG ،PNG و GIF است نکنید (در صورت استفاده از PNG شفاف اطمینان حاصل کنید که کاربران شما قادرن تصاویر را ببینند).