چگونه عکس را متناسب عرض صفحه وب خودمان کنیم؟

سلام دوستان، 

یک روش معمول شده که برای متناسب کردن عکس با عرض سایت گوشه عکس رو میکشیم(شایدم هل میدیم!) تا عکس کوچک بشه.

اما این کاری بس اشتباه است! چرا؟

دوستان تصور کنید شما با دوربین عکاسی یک عکس تهیه کردید که میخواهید در وبسایت خود قرار دهید اما آیا میدانید عرض عکس شما چقدر است؟! و شما با این روش چقدر باید عکس را کوچک کنید؟! ضمن این که کسانی که سایت دارند و فضای هاست آنها محدود است باید برای هر عکس از دوربین عکاسی حداقل دو مگابایت فضا را اشغال کنند و با این روش ممکن است هاست به سرعت اشغال شود! زیان بعدی این کار برای بازدیدکننده سایت است، وقتی بازدیدکننده به سایت شما می‌آید اگر 4 عکس در سایت شما باشد و هر عکس 2 مگابایت، در نهایت کاربر باید به اندازه دانلود شدن 8مگابایت[با این وضع سرعت اینترنت!] برای دیدن عکس‌های وبلاگ شما صبر کند!

خب فکر کنم جلسه توجیحی تا همین جا کافی باشه :)

اول آموزش بگم: این مطلب در مورد وبلاگ و وبسایت صدق میکنه لذا در متن به این کلمات حساس نشوید! راستی اگه خطای تایپی هم بود گزارش بدید تا اصلاح کنم :)

بریم سرغ این که چه چیزایی می‌خوایم یاد بگیریم و پیش‌نیازهای آموزش چی هستن:

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

پیش‌نیاز: شخص شما! + یک رایانه! + یک عکس تقریبا بزرگ + وبلاگ یا وبسایت شما + فتوشاپ!

شروع!

ابتدا باید عرض سایتمون رو پیدا کنیم. برای این کار روش های مختلفی وجود داره اما من راه ساده به شما پیشنهاد میکنم.

سایت خودتون رو باز کنید و از روی صفحه کلید دکمه «print screen» رو بزنید.. البته اگر این دکمه رو پیداش نکردید یک راهنمایی‌تون میکنم: این دکمه دقیقا سمت راست دکمه «F12» هست.(ردیف اول کلیدها) اگر هنوز دارید دنبالش میگردید توی گوگل این رو سرچ کنید! : print screen key

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

حالا وارد فتوشاپ بشید.

ممکنه نسخه فتوشاپ شما با نسخه من متفاوت باشه اما مواردی که ما باهاش کار داریم در همه نسخه ها وجود داره.

بعد از این که وارد فتوشاپ شدید از منوی File روی New... کلیک کنید و بعد OK رو بزنید.

حالا از منوی Edit بر روی Paste کلیک کنید.

حالا از روی صفحه کلید بر روی دکمه C کلیک کنید تا ابزار crop یا همان برش باز شود.

حالا کادر نوشته‌های وبلاگتون رو با این ابزار انتخاب کنید و دکمه Enter رو از صفحه کلید بزنید.

در این مرحله باید چیزی شبیه به این عکس داشته باشید:

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

حالا برای به دست آوردن عرض کافیست از منوی Image روی Image Size... کلیک کنیم. در پنجره باز شده عددی که مقابل نوشته Width قرار دارد همان اندازه عرض صفحه وب ما هست. ( این عدد را یا حفظ کنید یا در جایی یادداشت کنید. یک بار برای همیشه عرض سایتتان را بدست آورید!)

عرض کادر نوشته من شد: 494 پیکسل

مرحله بعد نوبت به کوچک کردن عکس برای قرار گرفتن در این سایز است.

عکس را وارد فتوشاپ میکنیم، از طریق منوی File و سپس Open...

بعد از منوی Image روی Image Size... کلیک کنیم. 

در این مرحله به تصویر دقت کنید:

حالا باید به یک نکته اساسی توجه کنید:

نکته اول این که به عدد 180 در عکس بالا توجه کنید این عدد نشانگر رزولوشن عکس شماست. روزلوشن به کیفیت عکس برای کاربردهای مختلف میکن. برای کارهای چاپی اعدادی بالاتر انتخاب میشه اما برای کاربرد ما که وبسایت هست این عدد رو باید به 72 تغییر بدیم.

نکته دوم این که به علامت زنجیری که بین طول و عرض عکسه توجه کنید، اگر این زنجیر انتخاب شده باشه [مثل تصویر بالا] اگر شما یکی از اعداد طول یا عرض رو تغییر بدید اون یکی هم متناسب با اون تغییر میکنه (به هم وابسته اند) اما اگر زنجیر انتخاب نشده باشه وقتی یکی از طول و عرض رو تغییر بدید اون یکی دیگه از طول یا عرض ثابت باقی می‌مونه و اگر در این حالت OK کنید عکس بسته به اعدادی که وارد میکنید یا کش میاره یا فشرده میشه.

حالا ادامه کار:

سایز عرض کادر سایتم رو درآوردم که 494 پیکسل بود. خب اول رزولشن رو باید از 180 به 72 تغییر بدیم. بعد باید  بررسی کنیم که حتما علامت زنجیر انتخاب شده باشه ، حالا می تونیم عرض(Width) عکسمون رو به 494 پیکسل تفییر بدیم. و بعد OK :)

حالا رسیدیم به آخرای کار...

مرحله نهایی کم حجم کردن عکسه و ذخیره کردن اون هست:

برای این کار از منوی File روی Save For Web... کلیک کنید.

در پنجره باز شده در سمت راست بالای کادر این موارد رو دارید:

در تصویر بالا دقت کنید که موارد زیر مهم هستند:

Quality: این مورد برای کاهش حجم عکس شما کاربرد داره عددی یبن 0 تا 100 میتونید انتخاب کنید که پیشنهاد من این هست که این عدد رو تا جایی که امکان داره کمتر در نظر بگیرید(تا حدی که کیفیت عکس قابل قبول باشه) معمولا من این عدد رو بین 40 تا 75 با توجه به نوع عکس و نوع کاربردش در نظر میگیرم.

مورد دیگه ای که مهم هست فرمت تصویر هست که باید روی JPEG بذارید. (البته فرمت های دیگه ای هم در لیست هست اما کاربرد خاص خودشونو دارن.)

تیک گزینه Optimized رو هم بهتره بزنید: این گزینه به کمتر شدن حجم عکستون کمک میکنه.

حجم نهایی عکستون رو میتونید در همین کادر پایین عکس ببینید.

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

تمام!