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

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

در این مقاله می خوانید:

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

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

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

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

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 هستند. این فرمت برای تصاویری که دارای خطوط تیز، رنگ های ساده و یا جایی که شفافیت آلفا مورد نیاز است گزینه مناسبی است.

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

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

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

تیم تحریریه کلیک اول

نویسنده در بلاگ کلیک اول

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

0 دیدگاه ثبت شده است.

در بحث و گفتگوی مربوط به این مطلب شرکت کنید!

آکادمی کلیک اول

دریچه ای به سوی آموزش های رایگان در فضای دیجیتال مارکتینگ

آموزش پایه ای کار با ابزار گوگل سرچ کنسول

دوره آموزشی گوگل سرچ کنسول (Google Search Console)

سئو و بهینه سازی

گوگل سرچ کنسول یا Google Search Console یکی از مهم ترین ابزارهای سئوی حرفه ای سایت است. شما با کمک این ابزار می توانید با گوگل ارتباط برقرار کرده و به درستی یا نادرستی عملکرد خود در مسیر بهینه سازی سایت پی ببرید.

02:21:00
آموزش پایه ای کار با گوگل آنالیتیکس

دوره آموزشی گوگل آنالیتیکس 4 (Google Analytics 4)

سئو و بهینه سازی

گوگل آنالیتیکس (Google Analytics) یکی از ابزارهای پرکاربرد گوگل بوده و وظیفه آن بررسی آمار سایت ها و تحلیل آن هاست..

02:43:00
آموزش کار با افزونه پرکاربرد یواست

آموزش کار با افزونه پرکاربرد یواست (Yoast)

دیجیتال مارکتینگ

یواست سئو (Yoast SEO) یک افزونه وردپرس است که به عملکرد بهتر سایت در موتورهای جستجو مانند گوگل کمک می کند. همچنین ابزارهایی را در اختیار شما قرار می دهد تا محتوای خود را به بهترین استانداردهای سئو و خوانایی برسانید.

00:22:06