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

در این مقاله قصد دارم برای شما دوستان عزیز در خصوص بهترین فرمت برای تصاویر سایت نوضیح بدیم. قبل از ورود به موضوع اصلی و معرفی بهترین فرمت ها برای تصاویر، به صورت مختصر اهمیت استفاده از تصاویر در داخل سایت را برای شما توضیح می دهم تا ذهن شما رو آماده تر کنم در ادامه ی آن به شما عزیزان خواهم گفت برای اینکه از تصاوبر به نحو احسنت استفاده کنید، باید ازچه فرمت هایی برای تصاویر سایت استفاده کنید. همچنین ویژگی ها و قابلیت های هر یک از فرمت ها را به شما خواهم گفت و تأثیرات و عملکرد اونا رو براتون مقایسه می کنم.

مقدمه

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

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

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

همونطور که گفتم تصاویر از فرمت های مختلفی تشکیل شدن که بیان کننده ی هویت آنهاست. BMP، JPEG، JPEG2000، TIFF، GIF، PNG، SVG، WEBP، JPEG-XRtv از جمله فرمت های تصاویر هستند که می تونید از آنها برای سایت خودتون استفاده کنید و هر یک از این فرمت ها در جا و مکان خاص خودشون بهترین هستن. اینکه شما از چه فرمتی استفاده کنید، به خود عکستون هم بستگی داره. شما نمی تونید از تمامی این ها برای سایت خودتون استفاده کنید پس هر فرمت تصویری، کارایی و ویژگی خاص خودشو داره. نه تنها در خصوص فرمت تصاویر بلکه استفاده از هر چیزی در داخل سایت یه سری شرایط خاص خودشو داره که باید رعایت بشه. مثلا ما برای تصاویر ویکی دمی نیومدیم از هر فرمتی که دستمون برسه استفاده کنیم. اومدیم فرمت هایی رو برای تصاویرمون انتخاب کردیم که برای موتور جسجو قابل فهم باشه، جزء فرمت های تعریف شده برای الگوریتم ها باشه، راحت تر بارگزاری بشه، سرعت بالا اومدن سایت رو کاهش نده، در بهینه سازی سایت به خوبی به ما کمک کنه، برای مرورگر ها بتونن اونو پشتیبانی کنن و سایر موارد مرتبط دیگه مانند حجم و کیفیت و این دسته مسائل.

از چه فرمت های برای تصاویر سایت استفاده کنیم

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

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

با این شرایط همه ی ما میخوایم از فرمتی استفاده کنیم تا کارمون رو به بهترین شکل ممکن راه بندازه و ما رو به نتیجه ایده آلمون نزدیک کنه.

بهترین فرمت ها برای تصاویر سایت که می تونن شرایط بالا رو داشته باشن به ترتیب عبارتند از:

فرمت JPEG یا JPG

Joint Photographic Experts Group یکی از محبوب ترین فرمت های مورد استفاده برای تصاویر در داخل سایت هستش و با تمام مرورگر ها و دستگاه ها، سازگاری داره. JPEG ویژگی هایی داره که باعث می شه از هم نوع های خودش خاص تر شه. عکسا و سلفی هایی که خودمون با گوشیامون می گیریم با همین فرمت داخل گالریمون ذخیره میشه. فرمت JPEG به میزان زیادی کیفیت عکس رو کاهش میده پس بهتره برای تصاویری ازش استفاده کنید که کیفیت و تعداد رنگ بالایی داشته باشه. با این کار تاثیر خیلی چشم گیری در کاهش کیفیت عکستون دیده نمیشه (اگه دقیقتر بخوام بگم بهتره برای عکس های خام ازش استفاده کنید). همچنین عکس های پشت سر هم رو به خوبی متراکم میکنه. شما هر چند بار که یک عکس رو با این فرمت فشرده کنید، به تعداد دفعات از کیفیت عکس کم میکنه. با این شرایط اگه از عکس کم کیفیت استفاده کنید تقریبا میشه گفت که شطرنجیش میکنه. پس فرمت JPEG خوبه ولی نه برای هر عکسی.

Joint Photographic Experts Group یکی از محبوب ترین فرمت های مورد استفاده برای تصاویر در داخل سایت هستش و با تمام مرورگر ها و دستگاه ها، سازگاری داره. JPEG ویژگی هایی داره که باعث می شه از هم نوع های خودش خاص تر شه. عکسا و سلفی هایی که خودمون با گوشیامون می گیریم با همین فرمت داخل گالریمون ذخیره میشه. فرمت JPEG به میزان زیادی کیفیت عکس رو کاهش میده پس بهتره برای تصاویری ازش استفاده کنید که کیفیت و تعداد رنگ بالایی داشته باشه. با این کار تاثیر خیلی چشم گیری در کاهش کیفیت عکستون دیده نمیشه (اگه دقیقتر بخوام بگم بهتره برای عکس های خام ازش استفاده کنید). همچنین عکس های پشت سر هم رو به خوبی متراکم میکنه. شما هر چند بار که یک عکس رو با این فرمت فشرده کنید، به تعداد دفعات از کیفیت عکس کم میکنه. با این شرایط اگه از عکس کم کیفیت استفاده کنید تقریبا میشه گفت که شطرنجیش میکنه. پس فرمت JPEG خوبه ولی نه برای هر عکسی.

از طرف دیگر بهتره برای عکس هایی که لبه های تیزی دارن از این فرمت JPG استفاده نشه چونکه در نمایش عکس خوب عمل نمیکنه.

از طرف دیگر بهتره برای عکس هایی که لبه های تیزی دارن از این فرمت JPG استفاده نشه چونکه در نمایش عکس خوب عمل نمیکنه.

مرورگر های زیادی مانند Safari، Internet Explorer ، Edge، Opera، Chrome، Firefox اینو پوشش میدن. این فرمت یک گزینه ی مناسب برای تصایر عکاسی شده هستش. همچنین شما میتونید از JPG برای اسکرین شات ها، نمودار ها، نقشه ها و دیاگرام ها استفاده کنید به شرط اینکه فشردشون نکنید اگرم این کارو کردین جوری نباشه که زیاد از کیفیتشون بیاد پایین.

موضوعات مرتبط: طراحی سایت

فرمت GIF

از دیگر فرمت های مورد علاقه برای ذخیره ی تصاویر سایت، GIF یا به عبارت دیگر Graphic Interchange Format است. این فرمت بیشتر برای تصاویر متحرک و کم حجم کارایی داره به همین خاطره که خیلی از کاربران میگن واسه تصاویر، زیاد خوب نیست. اگه شما می خواید برای سایت خودتون از تصویری با تعداد رنگ کم استفاده کنید، GIF یک گزینه ی مناسب برای شما هستش. حالا خلاصه وار بگم که اصلا این GIF چجوری کار میکنه. گیف میاد با استفاده ار الگوریتم LZW عکس شما رو فشرده می کنه. در طی انجام این کار برای کاهش حجم تصویر، رنگ زیادی رو پوشش نمیده (حداکثر 256 رنگ) پس طبیعتا میزان کیفیت رو هم پایین میاره که برای بعضی از دوستان خوشایند نیست، به همین خاطرِ که خیلیا معتقدن  گیف یا جیف فرمت مناسبی برای تصاویر نیست. یه جورایی میشه گفت، در فشرده سازی تصاویر تیز و لبه دار، خوب کار نمی کنه.

اما با این تفاسیر باز یکی از گزینه های خیلی خوب برای استفاده در داخل وب سایت ها هستش. این فرمت بیشتر برای تصاویری که تعداد رنگ های آن کم است و طیف رنگی در اون ها زیادی تیز نیست می تونه گزینه ی خیلی مناسبی باشه. همچنین برای تصاویر آیکون ها، در صورتی که تراکم رنگِ بالایی نداشته باشیم هم میشه بخوبی از GIF استفاده کرد. راستی اینو هم بگم که این GIF با اون JPEG یه جورایی همو کامل می کنن. از طرف دیگرخیلی از مرورگر ها مانند Safari، Internet Explorer، Edge، Opera، Chrome، Firefox این فرمت تصویر رو پوشش میدن.

فرمت PNG

یکی دیگه از بهترین فرمت های تصاویر که می خوام براتون بگم PNG یا همونPortable Network Graphics هستش. این فرمت اومده و نقاط ضعف فرمت GIF برای تصاویر رو مورد هدف قرار داده و اونارو تقریبا برطرف کرده. در واقع می تونم اینجوری بگم که علاوه بر مزیت ها ی گفته شده برای GIF، تصاویر با تراکم رنگ بالا رو هم ساپورت میکنه. اگه یادتون باشه اون تصاویر نوک تیز و لبه دار رو هم که قبلا گفتم، اینجا با استفاده از روش LossLess به خوبی متراکم می کنه و با استفاده درست از کد های هافمن (Huffman Code)، زیادی از کیفیتشون کم نمی کنه. وقتی از کیفیتش کم نکنه یعنی همه چی سرجای خودشه و هیچی از داده هاش کم و کسر نمیشه. پس تصاویر در این فرمت کیفیت و حجم بالایی دارن که تمام و کمال از صدقه ی سر همین LossLess هستش.

مرورگرایی هم که ازش پشتیبانی می کنن  Safari، Internet Explorer، Edge، Opera، Chrome، Firefox هستش. اینم بگم که برای تصاویر آیکون ها خیلی گزینه ی خوبی هستش. برای اسکرین شات ها، نموداررها، دیاگرام ها و نقشه ها در صورتی که زیادی فشردشون نکنیم که کم کیفیت بشن هم بهترین گزینه هستش.

فرمت APNG

این فرمت دوست داشتنی همون فرمت تصویری PNG هستش فقط پیشرفته تر شده. فرمت تصویری APNG نه تنها تمام کارای PNG رو انجام میده، بلکه انیمیشن رو هم ساپورت می کنه یعنی شما می تونید با این فرمت تصاویر متحرک با عمق رنگ بالا رو هم پشتیبانی کنید. البته اینو هم بگم که GIF هم این کارو می کرد ولی متاسفانه مشکلش این بود که نمی تونست رنگ زیادی رو پوشش بده. درکل در APNG این مشکل هم برطرف شده و انیمیشن های باکیفیت تری ازش می بینیم. از این فرمت بیشتر برای ساخت انیمشن استفاده میشه. این انیمشن ها بی صدان و انتظار زیادی ازشون نباید داشته باشید. با این اوصاف خیلی کارا میشه باهاش کرد مثلا همین استیکر های متحرک در نرم افزار های ارتباطی، نمایش انیمیشنِ در حال انتظار و چیزایی شبیه به اینا.

مرورگر های Chrome 59، Firefox 3، Edge 12، Opera 46، Safari 8 این فرمت رو به خوبی پشتیبانی می کنن.

فرمت تصویریWEBP

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

اگه تخصصی تر بخوام بگم، این فرمت تصویری با بکارگیری قابلیت فشرده سازی Loosy  می تونه عکس شما رو تا میزان زیاد یعنی نزدیکای 45 درصد فشرده کنه ولی عکس تقریبا با همون کیفیت بمونه که به نظر من این خیلی خیلی عالیه. در این فرمت اومدن کد های هوشمندی رو روی VP8 Video codec بارگزاری کردن که همین کار خلاقانه باعث شده که WEBP بتونه در حوزه ی انیمیشن هم ورود کنه و قابلیت ساخت تصاویر متحرک رو داشته باشه. از طرف دیگه اگه شما بخواید تصویری بزرگ و با کیفیت در حجم کم داشته باشین و یا بخواین از تصاویر عکاسی شده استفاده کنید، یکی از بهترین گزینه های پیش روی شما فرمت WEBP هستش.

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

فرمت تصویری JPEG-XRtv

فرمت تصویری JPEG-XRtv یکی دیگه از بهترین فرمت ها برای تصاویر سایت هستش که توسط شرکت بزرگ مایکروسافت ارائه شده است. اگه دقت کرده باشین یکی از مهمترین شرایطی که فرمت ها را مورد پسند میکرد یا از چشم مینداخت، قابلیت فشرده سازی بود. در این فرمت شما می تونید با حفظ و داشتن کیفیت عکس، عمل فشرده سازی تصاویر را به خوبی و به میزان زیادی انجام بدین که این به نظر عالی میرسه. فرمت تصویر JPEG-XRtv هم مثل فرمت تصویریWEBP توسط خیلی از مرورگر ها پشتیبانی نمی شه و این باعث شده کاربران کمی به سمتش برن (البته در حال حاضر اینجوریه و احتماش خیلی زیاده در آینده کاربرپسند بشه). این فرمت توسط مرورگر Microsoft Edge که برای خود کمپانی سازنده ی آن است پشتیبانی میشه. اینم بگم که فرمت JPEG-XRtv سازگاری خوبی با فرمت WEBP داره.

نتیجه گیری

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