تصاویر شطرنجی

تصاویر شطرنجی را می توان مجموعه ای از دستورالعمل های پیکسل به پیکسل برای ارائه یک شبکه دو بعدی در نظر گرفت. فرمت های رایج تصویر شطرنجی عبارتند از GIF (.gif)، JPEG (.jpg)، PNG (.png) و WebP (webp.). روشی که هر فرمت تصویری این دستورالعمل ها را فشرده و رمزگذاری می کند متفاوت است، و در نتیجه اختلاف زیادی بین اندازه فایل ایجاد می شود: یک تصویر عکاسی که به صورت JPEG کدگذاری شده است ممکن است تنها چند صد کیلوبایت باشد، در حالی که همان تصویر رمزگذاری شده به عنوان PNG ممکن است چندین مگابایت باشد. هر گونه تفاوت قابل تشخیص در کیفیت برای کاربر نهایی.

یک منبع تصویر شطرنجی که فراتر از ابعاد ذاتی آن مقیاس شده است، مخدوش، مسدود یا تار به نظر می رسد:

برای آثار هنری حاوی سطوح واقعی جزئیات، تصاویر شطرنجی ابزار مناسبی برای این کار هستند.

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

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

از بالا سمت چپ شروع کنید. ردیف یک، ستون یک آبی است. ردیف یک، ستون دو آبی است. ردیف یک، ستون سه آبی است. ردیف یک، ستون چهار قرمز است.

با استفاده از این اطلاعات متنی، می‌توانید تصویری را که من روی برگه‌ی کاغذ گراف خود دارم، کاملاً بازسازی کنید.

سه جعبه آبی افقی به دنبال آن یک کادر قرمز.

تفاوت در قالب‌های تصویر و نحوه کدگذاری آن‌ها به‌عنوان داده را می‌توان به سادگی به‌عنوان روش قالب‌بندی این اطلاعات در نظر گرفت. به عنوان مثال، اطلاعاتی که من برای شما ارسال کرده ام می تواند به آسانی بیان شود:

از بالا سمت چپ شروع کنید. ردیف یک، ستون های یک تا سه آبی هستند. ردیف یک، ستون چهار قرمز است.

هر یک از این توصیفات منجر به یک تصویر می شود، اما مورد دوم قادر است همان تصویر را با کاراکترهای کمتر توصیف کند. این یک روش بدون تلفات برای فشرده‌سازی داده‌های تصویر است: همه اطلاعات یکسان – و در نتیجه، کاهش وفاداری بصری وجود ندارد – اما بایت‌های کمتری که از طریق سیم از من به شما منتقل می‌شود – از سرور به موتور رندر. این معادل زبان ساده «رمزگذاری طول اجرا» برای داده‌های تصویر است، که در آن داده‌ها به‌جای تکرار چندین بار مقدار کامل، به‌عنوان مقداری که باید تکرار شود و یک شمارش کدگذاری می‌شود.

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

فرمت‌های تصویر شطرنجی آنهایی هستند که احتمالاً به عنوان یک توسعه‌دهنده با آن‌ها آشنا هستید - GIF، JPEG، PNG، WebP و غیره. در چند ماژول بعدی با قابلیت های هر کدام آشنا خواهید شد.