اخبار سایت
سعادتمند كسی است كه از هر اشتباه و خطایی كه از او سر می زند، تجربه ای جدید به دست آورد - سقراط
مجموعه آموزش های ویدیویی به زبان فارسی
خانه / طراحی وب / بهینه سازی تصاویر برای استفاده در وب سایت در فتوشاپ

بهینه سازی تصاویر برای استفاده در وب سایت در فتوشاپ

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

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

بهینه سازی تصاویر برای استفاده در وب سایت در فتوشاپ

در ابتدا تصویر مورد نظر خود را توسط برنامه محبوب و کاربردی فتوشاپ باز کنید.

سپس از سربرگ File گزینه Save for Web را انتخاب کنید.

بهینه سازی تصاویر برای استفاده در وب سایت در فتوشاپ-01

البته کلید میانبری نیز برای انتخاب این گزینه در نظر گرفته شده است. شما میتوانید با استفاده از کلید ترکیبی Alt+Shift+Ctrl+S این کار را به سادگی انجام دهید.

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

بهینه سازی تصاویر برای استفاده در وب سایت در فتوشاپ-02

گزینه های پر کاربرد در ذخیره سازی تصویر وب عبارتند از:

1- کادر انتخاب فرمت تصویر: با کلیک بر روی این کادر فرمت های ذخیره سازی تصویر برای شما نمایش داده خواهد شد. بهترین و بهینه ترین فرمت تصویر فرمت JEPG میباشد. در این آموزش ما بهینه کردن تصویر با این فرمت را مد نظر قرار داده ایم.

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

بهینه سازی تصاویر برای استفاده در وب سایت در فتوشاپ-03

راه دیگر تنظیم کیفیت تایپ درصد دلخواه در کادر Quality میباشد.

3- کادر پیش نمایش: در این کادر پیش نمایشی از تصویر به شما اراده خواهد شد. در زیر این کادر حجم تصویر درج میگردد.

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

Original: با انتخاب این گزینه تصویر در حالت اصلی (بدون بهینه سازی) نمایش داده خواهد شد.

Optimize: با انتخاب این گزینه تصویر پس از بهینه شدن (با انتخاب درجه کیفیت) نمایش داده میشود.

2UP : از این گزینه برای نمایش تصویر اصلی و تصویر بهینه شده در بالا و پایین هم استفاده میشود. تصویر اصلی در بالا و تصویر بهینه شده در پایین قرار خواهند گرفت.

4 UP : از این گزینه برای نمایش تصویر در چهار کیفیت متفاوت بهینه شده استفاده میگردد. بالاترین تصویر، تصویر اصلی و به ترتیب تا پایین ترین تصویر از کیفیت تصویر کاسته و بهینه تر میگردد.

در نهایت بواسطه گزینه های توضیح داده شده در بالا، تصویر خود را به مقدار لازم بهینه نموده و با کلیک بر روی دکمه Save که در پایین این کادر قرار دارد (5) اقدام به ذخیره سازی تصویر بهینه شده در محل دلخواه خود کنید.

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

درباره عليرضا مقدم

امیدوارم از آموزش هایی که اینجانب به عنوان یکی از آموزش دهندگان گروه آموزشی هنردیجیتال برای شما دوستان عزیز منتشر کرده ام بهره لازم را ببرید. با تشکر، علیرضا مقدم

۱ دیدگاه

  1. با سلام
    ضمن تشکر از آموزش شما ای کاش سایر گزینه ها در صفحه ذخیره سازی را مانند گزینه های convert to sRGB و Image Size هم توضیح می دادید.

    جملات قصار که با بازدید هر صفحه تغییر می کند را با افزونه نمایش می دهید یا کد خاصی؟ در صورت در این موردنیز توضیح و راهنمایی نماییدکه برای قرار دادن آن در سایت باید چه اقدامی کرد؟
    با تشکر

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شدبخش های مورد نیاز علامت گذاری شده است *

*