بهترین فرمت عکس برای وب سایت چیست؟ ( انواع فرمت های عکس کدامند؟ )

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

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

بیایید با قدیمی ترین آنها شروع کنیم…

آیا JPEG بهترین فرمت عکس است؟

این تکه الگوریتم ۲۵ ساله که ISO 10918 یا همان JPEG نامیده شده در این سالها به خوبی از آزمون ها سربلند بیرون آمده است. حالا، چطور کار می کند؟ و برای چه چیزی خوب است؟ آیا بهترین فرمت عکس برای وب سایت است؟

فشرده سازیه JPEG تصاویر را به بلوک های پیکسلی ۸*۸ برش می دهد، و سپس یک عملیات دیوانه وار روی آنها انجام می دهد. با مقدار زیادی معادلات ریاضی، JPEG هر پیکسل بلوک که لیستی از مقادیر R، G و B تبدیل می کند که در نقاط متوالی فضا آدرس دهی شده اند را به لیست از ضرایب تبدیل می کند که در معادلاتی استفاده می شوند که بلوک را با تفاسیری از موج های انرژی تعریف می کنند. به اصطلاح فنی، الگوریتم فشرده سازی JPEG اطلاعات مربوط به یک تصویر را از دامنه فضایی به دامنه فرکانسی تبدیل می کند.

در عمل، این مورد بدان معنا می باشد که JPEG خیلی در فشرده سازی تصاویری که تُن تکراری دارند خوب است. تصاویری که تعدد رنگ  بسیار بالایی دارند و به نرمی بین رنگها جابجا می شوند. در بیان دیگر، JPEG تصور می کند که تصویر شما قرار است کم و بیش مثل یک عکس باشد.

در مقابل، فرمت JPEG در فشرده سازی تصاویری با گوشه های تیز یا بافت هایی با نویز و انرژی بالا بسیار بد عمل می کند – JPEG حلقه هایی دور گوشه ها می گذارد و جزییات ظریف را مات می کند.

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

JPEG ییکی از بهترین فرمت تصاویر عکس برای سایت است.

آشنایی با فرمت GIF 

در اوایل عمر وب، اگر یک تصویری JPEG نبود، GIF بود.

یکی از انواع فرمت های عکس GIF می باشد که از الگوریتم فشرده سازی LZW استفاده می کند که بسیار ساده تر از بازی با ریاضی JPEG است. اساسا الگوریتم LZW داده های تصویر شما را اسکن کرده و یک تکه کد خیلی کوتاه ایجاد می کند که مربوط به بخش هایی می باشد که تکرار شده اند. LZW تکرار را کوتاه می کند.

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

با وجود اینکه GIF فرمت ساده ای است قابلیت های تجملی مثل Transparency و انیمیشن را پشتیبانی می کند.

اما GIF در فشرده سازی چیزهایی که حتی تعدد رنگ متوسطی هم دارند افتضاح عمل می کند. همچنین این فرمت محدودیت ۲۵۶ رنگ هم دارد. تبدیل تصویری با تعدد رنگ بیشتر باعث می شود که در نتیجه ی تصویر GIF تصویری با ترکیب رنگی بد داشته باشیم.

به طور خلاصه GIF و JPEG نقاط متضاد و مکمل همدیگر هستند. آنها در گذشته یک تیم قوی در سطح وب می ساختند.

PNG فرمت عکس مناسب وب سایت  

در پاسخ به png بهترین فرمت تصویر است بایستی گفت فرمت PNG با تصاویری که GIF عملکرد خوبی با آنها داشته عملکرد قابل قبولی دارد و مزایای اضافه ای هم در بر دارد:

• حذف محدودیت ۲۵۶ رنگ
• کانال آلفا transparency (که اجازه می دهد قسمتی از یک پیکسل transparence باشد)
• در تمامی به جز برخی گوشه ها از فشرده سازی بهتری بهره می گیرد.

این تصویر قابلیت فشرده سازی PNG را در رنگ کامل با transparency نصفه به خوبی نمایش می دهد.

چطور فایل PNG می تواند GIF را شکست دهد وقتی بحث فشرده سازی مطرح می شود؟ با اضافه کردن لایه هایی به پشته ی فشرده سازی خود…

اولا الگوریتم PNG تلاش می کند که میزان داده که نیاز دارد ذخیره سازی نماید را کاهش دهد. این کار با استفاده از پیکسل هایی که انجام می شود که می شناسد و از انها استفاده می کند تا پیکسل هایی که نمی شناسد را پیش بینی کند. فرمت ۵ نوع استراتژی پیش بینی دارد اما به طور اساسی PNG تصور می کند که پیکسل های کنار هم مشابه یکدیگر هستند. اگر تصور واقعیت داشته باشد PNG در مصرف داده صرفه جویی می نماید. در واقع با ذخیره سازی تفاوت بین پیش بینی و مقدار واقعی فضای کمتری را تصرف می کند که منجر به کاهش فضای مصرفی کل می شود.

دوما PNG تکرار را از بین می برد که بوسیله ی اشاره به پیکسل های مشابه متوالی قبلی انجام می شود. این کار با استفاده از الگوریتمی به نام LZ77 انجام می شود. اگر دو الگوریتم LZ77 مربوط به PNG را با LZW مربوط به GIF را کنار هم بگذارید در واقع تو الگوریتم به یک نتیجه می رسند – حذف تکرار – اما راهی که به آن می رسند انقدر متفاوت است که باعث بروز مشکلات حقوقی در زمینه ی ثبت اختراع نشود. با این روش همه برنده اند!

و بالاخره در پایان، همه این ها را که PNG انجام داد، یک پردازشی را استفاده می کند که به نام “Huffman coding” مشهور است با این پردازش تلاش می کند به وسیله استفاده از کوچکترین کد نویسی موجود مقادیر باقی مانده را هرچه می تواند کوچکتر نماید.

ترکیب این سه مورد فوق (بدون از دست دادن چیزی) در مقابل GIF که فقط از یک استراتژی استفاده می کند مزایای بسیار بیشتری به ارمغان میاورد. و در کنار اینها ابزارهای کاربردی هم وجود دارند که حتی می توانند فشرده سازی را در ضرایب بالاتری هم انجام دهند.

در آخر تمام چیزی که شما باید بدانید این است که: PNG وقتی پای عکس مطرح می شود عملکرد بدتری از JPEG دارد و تقریبا همیشه بهتر از GIF عمل می کند. بنابراین زمانی ببهترین فرمت عکس برای سایت است که تعدد رنگ کم و تغییر رنگ های نرم ندارید.

SVG چیست؟

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

SVG ها به هیچ درخواست HTML نیاز ندارند و بنابراین سرعت صفحه را بهبود می بخشند. این همچنین بدان معنی است که SVG ها برای ایجاد لوگو هایی که در اندازه ها و وضوح صفحه نمایش های مختلف استفاده خواهند شد مناسب است.

نکته دیگری که باید در مورد SVG به یاد داشته باشید این است که می توان آنها را نیز متحرک کرد. آنها بسیار شبیه به GIF هستند به غیر از این واقعیت که آنها بردار هستند و نه raster هستند.

آشنایی با فرمت عکس مناسب وب سایت webp

فرمت WEBP یک فرمت برگرفته از فرمت ویدیو WebM گوگل می باشد. هسته فشرده ساز آن قابل پیش بینی می باشد. استراتژی فشرده سازی آن برگرفته از PNG می باشد اما آنرا به سطح دیگری برده است. WebP یکی از ۱۶ استراتژی پیش بینی برای هر بلوک (در سایز های مختلف) را استفاده می کند و می تواند هم به صورت از دست دادن داده و هم بدون از دست دادن داده فشرده سازی را انجام دهد.

پیچیدگی این فرمت این امکان را می دهد که بسیار انعطاف پذیر باشد؛ همچنین این فرمت برای گونه های مختلف تصویری مناسب می باشد (هم گرافیکی اگر بخواهید از قابلیت فشرده سازی بدون از دست دادن داده و عکاسی با قابلیت فشرده سازی با از دست دادن داده استفاده کنید.) این فرمت (عموما) از فشرده سازی بهتری به نسبت PNG یا JPEG برخوردار است.

اما این یک فرمت مختص گوگل می باشد و فعلا تنها در Chrome پشتیبانی می گردد.

JPEG-XR

فرمت نسل آینده ی مورد انتخاب مایکروسافت، JPEG-XR تکنیک های جدیدی را در کنار تکنیک های قبلی به کار میگیرد. تحت این فرمت قابلیت های زیر ارائه می شود:

• فشرده سازی بدون اتلاف
• فشرده سازی با اتلاف بهینه تر
• کانال آلفا نیمه transparency

مشابه WebP فرمت JPEG-XR خیلی پیچیده، سازگار و کمتر پشتیبانی به نسبت اجداد خود می شود. (در حال حاضر)، این فرمت فعلا تنها در مرورگر ie و Edge پشتیبانی می شود.

به شما پیشنهاد می شود مقاله ما را برای کسب اطلاعات در حوزه ی آموزش بهینه سازی تصاویر سایت مطالعه نمایید.