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

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

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

با در نظر گرفتن این عوامل فرمت مناسب با توضیحات زیر را برای تصویر خود انتخاب کنید.

 

۱-JPEG (تلفظ : جی-PEG)

یک فایل با فرمت محبوب است که ممکن است شما در حال حاضر با آن آشنا باشید. معمولا عکس ها از روی دوربین دیجیتال با فرمت JPEG ذخیره می شوند. این نوع فایل ها معمولا با jpg. و یا  JPEG. به پایان می رسد.
JPEG یک فرمت بزرگ برای عکس است (P در JPEG مخفف عکاسی(photographic))، که سرشار از رنگ و بافت می باشد.
JPEG ،اطلاعاتی که یک فایل بسیار کوچکتر را تولید میکند را در تصویر شما ذخیره می کند ، که در حین طی کردن مراحل، آن تصویر کمی تغییر می کند و در نتیجه کیفیت آن کاهش می یابد. این تکنیک اتلاف نامیده می شود، چون بعضی از داده ها هنگام پردازش برای ذخیره شدن به فرمت JPEG از دست می روند. ولی اگر این کار به درستی انجام شود، کاهش کیفیت عکس برای اکثر بینندگان وب سایت شما غیر قابل توجه خواهد بود.
دوربین های دیجیتال عکس ها را با وضوح بسیار بالا ذخیره می کنند و این یعنی اینکه عکس شما ابعاد بسیار بزرگی خواهد داشت، یعنی بسیار پهن تر و بلندتر از صفحه نمایش اکثر مردم خواهد بود. بنابراین مهم است که مطمئن شوید که عکس شما پیش از استفاده روی وب سایت به اندازه کافی تغییر اندازه داده شود. برای نتیجه بهتر ، فایل های خود را در یک محیط با کیفیت که سایز را به کوچکترین اندازه ممکن می رساند نگهدارید و و فایل تان را بدون داده های متا ذخیره کنید. این گزینه ها در انواع نرم افزارهای دستکاری عکس مانند فتوشاپ در دسترس شما هستند.

 

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

۲-PNG

 

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

– نکات PNG
از PNG برای گرافیک ساده استفاده کنید.
از PNG برای گرافیکی است که شامل شفافیت، به ویژه شفافیت جزئی می باشد استفاده کنید.

 

۳-GIF

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

نکات GIF
از GIF برای گرافیک های متحرک کوتاه مانند آیکون های بارگذاری استفاده کنید.
برای انیمیشن های طولانی تر، به ویژه کلیپ های ویدیوئی، پیشنهاد می شود فایل را در یک فرمت فایل های ویدئویی ذخیره کنید.
از GIF برای تصاویر گرافیکی بسیار کوچک استفاده کنید.

 

 

۴- SVG

SVG یک فرمت اورژانسی بر روی وب، به منظور افزایش پشتیبانی مرورگر وب است. SVG یک فرمت برای قرار دادن تصاویر وکتور در وب است. همونطور که میدونید وکتور به تصاویری گفته میشود که با زوم کردن یا ریسایز کردن کیفیت شان کاهش پیدا نکند. SVG امکان چاپ با وضوح بالا، کارایی بالا در زوم و سوژه متحرک از روبرو، و حتی تعبیه تصاویر یا اطلاعات دیگر در داخل تصویر SVG با ابعاد خود را میسر می سازد. تصاویر SVG را می توان در داخل و خارج بزرگنمایی کرد به طوری که  بدون از دست دادن هر گونه اطلاعات و کیفیت باشد و همچنین انتظار می رود به اندازه فایل هایی  حتی کوچکتر از عکس JPEG، GIF یا PNG باشد.
۵-WebP

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

۶-BMP

BMP فرمت تصویری است که شما ممکن است در برنامه paint مایکروسافت دیده باشید. فایل های BMP فشرده سازی lossless هستند، اما اغلب بسیار بزرگ – بزرگ تر از فرمت های دیگر مشخص شده در اینجا- هستند. مرورگر وب فاقد پشتیبانی برای BMP است. هرگز از فایل های BMP در وب سایت استفاده نکنید.

۷-APNG

APNG یک فرمت شبیه PNG است، اما توانایی اضافه کردن انیمیشن را دارد. مرورگر وب به ندرت از APNG پشتیبانی می کند، به طوری که استفاده زا آن در وب توصیه نمی شود.

۸-ICO

ICO یک فرمت مورد استفاده برای ذخیره کردن آیکون است. ICO فقط باید برای آیکون های مورد علاقه روی وب استفاده شود.

 

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

یکی دیگر از عناصر مهم و اصولی در طراحی سایت ، فرمت های گرافیکی به کار رفته در آن است. در هنگام طراحی سایت باید در انتخات نوع فرمت های گرافیکی بسیار دقت نمایید و فرمت هایی را انتخاب کنید که تقریبا با تمام مرورگرها سازگار باشد. برای اینکه بتوانید انتخابی صحیح داشته باشید، باید ابتدا با این فرمت ها و انواع آنها آشنایی داشته باشید. در این بخش از آموزش طراحی سایت قصد داریم شما را با این فرمت ها آشنا نماییم. فرمت های گرافیکی در طراحی سایت فرمت های گرافیکی در طراحی سایت دارای ویژگی هایی نظیر شفافیت، interlacing، پروگرسیو، فشرده سازی و انیمیشن است. بنابراین به این ویژگی ها نیز در انتخاب فرمت گرافیکی مناسب در طراحی سایت توجه نمایید. برخی از فرمت های گرافیکی رایج که استفاده از آنها در طراحی سایت متداول است، عبارتند از GIF، JPEG و PNG. فرمت GIF نمونه ای از قدیمی تری اشکال گرافیکی است که از آن در طراحی سایت استفاده می شود. استفاده از این فرمت در طراحی سایت دارای مزایایی نظیر پشتیبانی از بیشترین فرمت گرافیکی ، نمایش بهتر دیاگرامهای تصویری و پشتیبانی از Transparency است. فرمت JPEG دارای کیفیت تصویر بسیار بالایی است. بنابراین هنگامی که کیفیت تصاویر در طراحی سایت از اهمیت بالایی برخوردار است، از این فرمت گرافیکی استفاده می شود. این فرمت به موجب قدرت فشرده سازی بالایی که دارد ، سرعت بارگذاری را افزایش می دهد. فرمت PNG را می توان جایگزین مناسبی برای انواع فرمت های GIF در طراحی سایت دانست. دیاگرام های توصیفی در این فرمت نسبت به JPEG به صورت بهتری نمایش داده می شوند و همچنین می توان از متون توصیفی در این فرمت استفاده کرد. این فرمت بر محدودیت رنگ که در فرمت GIF وجود داشت، غلبه می کند. به طور معمول در طراحی سایت برای تصاویر پس زمینه، فریم ها و همچنین باکسها که نیاز به فایل هایی با حجم کمتر دارند از فرمت GIF استفاده می کنند، و عکسها و تصاویر در طراحی سایت معمولا دارای فرمت JPEG هستند.

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