آموزش ذخیره تصاویر برای وب در فتوشاپ

صفحه اصلی » وبلاگ » آموزش رایگان طراحی » آموزش فتوشاپ » آموزش ذخیره تصاویر برای وب در فتوشاپ

آموزش ذخیره تصاویر برای وب در فتوشاپ

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

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

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

ذخیره تصاویر برای وب

دیتاهای کم مصرف در برابر دیتاهای پرمصرف

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

تصاویر، فرمت های گوناگون و زیادی مانند jpg, png, gif و … دارند که برای ذخیره تصویر می توان از آن ها استفاده نمود. تفاوت این فرمت ها علاوه بر مکان استفاده آنها، حجمی است که هنگام ذخیره سازی به خود می گیرند. معمولا فرمتی مانند jpg حجم بالایی به خود میگیرد و جزء دیتاهای پرمصرف دسته بندی می شود. فرمت های  GIF و PNG و TIFF از پراستفاده ترین فرمت های صرفه جو هستند که در هنگام کاهش حجم، کیفیت کمتری را از دست می دهند.

 

نحوه ذخیره سازی تصویر برای وب save for web

برای اینکه در فتوشاپ بتوانید تصویر را برای استفاده در وب ذخیره نمایید از save for web استفاده نمایید. این گزینه که در منوی File وجود دارد بهترین مورد برای ذخیره سازی تصویر با حجم کم و کیفیت مناسب است. بعد از کلیک روی آن با تصویری مانند زیر مواجه می شوید که دارای تنظیمات مختلفی برای تصویر است.

  آموزش پالت ها در فتوشاپ

ذخیره تصاویر برای وب

00021 - آموزش ذخیره تصاویر برای وب در فتوشاپ

ذخیره سازی عکس برای وب با مثال

شما چه از دوربین عکاسی استفاده کنید و چه بخواهید با دوربین حرفه ای عکاسی نمایید، معمولا تصاویر شما با فرمت jpeg ذخیره خواهد شد. علت آن کیفیت بالای این فرمت است که البته حجم بالایی نیز دارد و مناسب استفاده در فضای وب نیست. فرمت jpeg  از نام بنیانگذاران آن یعنی “Joint Photographic Experts Group” گرفته شده است. یکی دیگر از دلایلی که این فرمت را برای دوربین های عکاسی محبوب کرده است قابلیت ذخیره سازی اطلاعات عکس مانند زمان و …. است.

 

بعد از کلیک بر روی گزینه save for web تنظیماتی که در بالا نشان دادیم ظاهر می شود که برای ذخیره تصویر با کیفیت و حجم دلخواه مورد استفاده قرار می گیرد. اولین چیزی که باید به آن توجه کنیم کیفیت تصویر است که در سه کیفیت low , Medium  و High موجود است. در تصویر زیر مشاهده می نمایید که کیفیت عکس مورد نظر ما در حالت های مختلف به چه شکل است. در عکس زیر سایز تصویر نیز در سه حالت low کم ، Medium متوسط و High زیاد، نمایش داده شده است. در این مثال ما از فرمت jpeg استفاده کردیم و فرمت های دیگر نیز موجود است که می توانید هر کدام از آن ها را امتحان کنید.

 

00031 - آموزش ذخیره تصاویر برای وب در فتوشاپ

ذخیره تصاویر برای وب

تصاویر با فرمت Gif

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

Gif یا Graphics Interchange Format توانایی این را دارد که پیکسل های تکی را برای تبدیل شدن به transparent آماده کند که هدف ما در این مطلب، آموزش این بحث نیست و بخث های پیشرفته تر در رابطه با این موضوع را در مطالب دیگری دنبال خواهیم کرد.در زیر دو تصویر مشاهده می کنید که یکی با فرمت jpeg و دیگری با فرمت Gif ذخیره شده است. با دقت در تصاویر متوجه خواهید شد که در تصوایر تک رنگ یا تصاویری که در آن رنگ های محدودی به کار رفته است استفاده از فرمت Gif بهتر عمل می کند.

 

00041 - آموزش ذخیره تصاویر برای وب در فتوشاپ

 

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

  آموزش ابزار های ساخت اشکال در فتوشاپ

ذخیره تصاویر برای وب

فرمت محبوب png

فرمت PNG یا Portable Network Graphics از فرمت های دیگر ذخیره سازی تصاویر است که مانند gif صرفه جو است و باعث کاهش حجم تصویر می شود. مهمترین تفاوت png با gif در پشتیبانی آن ها از رنگ هاست. فرمت png از تعداد رنگ بیشتری استفاده می کند و همچنین می توانند به جای single transparent pixels یا به عبارت دیگر تک پیکسل های شفاف، کانال های شفاف آلفا یا alpha transparency channels را پشتیبانی کنند.

ذخیره تصاویر برای وب

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

 

مطالعه مطالب زیر هم پیشنهاد میشود :

1- لایه ها در فتوشاپ

2- حل مشکل رم فتوشاپ

ارسال دیدگاه