آموزش کاهش حجم تصاویر بدون افت کیفیت در وب

جمعه ۳ بهمن ۱۳۹۳
نویسنده: محسن طاوسی
بازدید ها: 11,343 views
آموزش کاهش حجم تصویر بدون افت کیفیتتصویر نمونه کم حجم

قصد دارم در این آموزش ، کاهش حجم تصاویر رو بدون اینکه روی صفحه نمایش، دچار کاهش کیفیت بشه (یا کاهش خیلی سطحی) آموزش بدم.

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

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

 

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

Solid Color : به معنی رنگ ساده هست.مثلا قرمز خالی.سیاه خالی.سبز خالی.زرد خالی. اما رنگ سبزی که ترکیبی از سبز کمرنگ و پررنگ هست، solid color محسوب نمیشه.یا مثال دیگه، برگ درختان یک درخت در طبیعت با اینکه همگی سبز هستند، Solid محسوب نمیشه.چون در اون درخت ترکیبی از رنگ های سبز وجود داره که توسط زاویه تابش نور،سایه های ایجاد شده، عمر متفاوت هر برگ، رگه های روی هر برگ، جند رنگه بودن هر برگ (مثلا زرد متمایل به سبز در بالای برگ و سبز تیره در پایین برگ)،ایجاد شده.در حالت کلی، تصاویر طبیعت، هیچ کدوم دارای Solid Color نیستند.

 

اما فرمت ها:

۱- BMP – به دلیل حجم بالا و عدم کاربرد و مزیت در وب، اصلا توصیه نمیشه.

۲-JPG – این فرمت تصاویر رو فشرده سازی می کنه و محدودیتی در نمایش طیف های رنگی نداره و در سطوح مختلف با کیفیت و بی کیفیت قابل ذخیره سازی هست و به شدت استفاده از این فرمت توصیه میشه.

۳-GIF – این فرمت حداکثر دارای ۲۵۶ رنگ هست و طبیعتا کیفیت بالایی نداره.اما برای تصاویر ساده که رنگ های solid دارند، به شدت توصیه میشه چون حجم رو خیلی خیلی میتونه کم کنه.در حقیقت برای تصاویر ساده، بهترین فرمت GIF هست.همچنین این فرمت از کانال Alpha پشتیبانی می کنه.

۴-PNG – این فرمت هم مشابه JPG هست اما در فشرده سازی تصویر به اندازه JPG قدرتمند نیست و مزیتش نسب به JPG اینه که از کانال Aplpha پشتیبانی می کنه.اگر به کانال alpha نیاز دارید و نمی خواید کیفیت تصویرتون پایین بیاد، استفاده از این فرمت توصیه میشه.

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

 

 

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

تصویر نمونه پر حجمتصویر نمونه حجم متوسطتصویر نمونه کم حجم

 

 

اکثر رنگ های موجود در تصویر بالا به صورت Solid هستند.تصاویر در یک نگاه، هیچ فرقی با هم ندارند.اما با نگاه مجدد، متوجه کاهش کیفیت تصویر وسطی و کاهش بیشتر کیفیت تصویر سمت چپ خواهید شد.حالا فرض کنید، شما فقط تصویر ۶ کیلوبایتی را در سایتی مشاهده می کنید.آیا نسبت به آن سایت حس بدی پیدا می کنید؟اصلا چقدر به بی کیفیتی این تصویر توجه می کنید؟و یا چقدر بی کیفیت بودن این تصویر برای شما زننده است؟پس بهتر است به جای تصویر ۴۰ کیلوباتی در صفحات وب سایت خود از تصویر، ۶ کیلوبایتی یا ۱۲ کیلوبایتی که مشاهده می کنید استفاده کنید.

 

قبل از اینکه آموزش عملی را شروع کنیم نیاز است که شما قبل از کاهش حجم، متوجه شوید، چقدر امکان کاهش حجم وجود دارد.برای این تشخیص شما باید به سادگی و اندازه تصویر و فرمت آن نگاه کنید.اگر دارای رنگ های ساده و solid هست، بدون شک جای کار دارد.همچنین اگر ابعاد عکس بزرگ است (مثلا ۲۰۰۰ در ۳۰۰۰) با یک کاهش اندازه ، حجم آن به شدت کاهش می یابد.در نتیجه جای کار دارد و بدون شک برای مشاهده در صفحه نمایش، بدون زوم روی تصویر، نیازی نیست که با وضوح تصویر ۳۰۰۰ در ۲۰۰۰ نمایش داده شود.

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

فرمت تصاویر نیز بسیار مهم است.گاهی با یک تغییر فرمت، بدون افت کیفیت، کاهش شدید حجم را مشاهده می کنید.برای مثال، در اغلب تصاویر، اگر یک تصویر با فرمت PNG یا BMP را خیلی عادی با پسوند JPG ذخیره کنید، حجم تصویر به شدت کاهش می یابد.زیرا JPG دارای خاصیت فشرده سازی و در عین حال حفظ کیفیت به خصوص برای نمایش در صفحه های نمایش است.

تصاویر زیر نمونه ای دیگر از حجم های مختلف تصویر است که کم بودن کیفیت تصویر کم حجم، به سختی قابل تشخیص است:

 

نمونه تصویر حجم معمولیتصویر حجم متوسط

تصویر با حجم بهینه شده

می دانید چه چیزی باعث شده است حجم تصویر از ۱۳۵  کیلوبایت به ۵۵ کیلوبایت کاهش یابد؟اصلی ترین دلیل آن کاهش ابعاد آن است.در این صفحه من قصد نداشتم اندازه اصلی تصویر که ۱۲۰۰ در ۹۵۰ بود را نمایش دهم.چون اصلا طول صفحه سایت سئوروز، برای محتوا، تقریبا نصف ۱۲۰۰ پیکسل است.(توجه داشته باشید، فقط نحوه نمایش هر سه عکس در یک اندازه یعنی ۶۰۰ در ۴۷۵ است.اما دو تصویر اول، با ابعاد ۱۲۰۰ در ۹۵۰ در سایت آپلود شده اند.فقط در قابی کوچکتر و فشرده تر نمایش داده می شوند).لذا شما باید، با توجه به محل نمایش عکس، ابعاد عکس را کم کنید.واقعا چه نیازی است که تصویر با وضوح ۱۲۰۰ در ۹۵۰ پیکسلی در ابعاد ۶۰۰ در ۴۷۵ پیکسل نمایش داده شود؟و چه فایده ای دارد؟!

 

برای شروع، ابتدا بدون تغییر ابعاد تصویر، اقدام به کاهش حجم تصویر می کنیم.و سپس با کاهش ابعاد تصویر در اندازه مناسب جهت نمایش (که در این آموزش، اندازه مناسب با سئوروز در نظر گرفته شده است) اقدام می کنیم.

 

تمرین یک:

تصویر اصلی با ابعاد ۱۹۰۰ در ۱۲۰۰ با حجم ۶۰۰ KB قابل مشاهده است:

تصویر اصلی پر حجم

تصویر بالا رو ، روی سیستم خودتون ذخیره کنید و با فتوشاپ باز کنید.سپس از منوی File گزینه Save for web & devices رو انتخاب کنید.در پنجره ای که باز میشه در سمت راست بالا،میزان Quality رو روی صفر قرار بدید و فرمت رو JPEG انتخاب کنید و ذخیره کنید:

 

کاهش حجم تصویر بدون افت کیفیت در فتوشاپ

 

نکته های مهم:

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

نمایش حجم حقیقی تصویر قبل از ذخیره

 

حال اگر تصویر را ذخیره کنید به ۱۱۵ کیلوبایت مانند زیر تبدیل می شود و در ظاهر تفاوتی از نظر کیفیت با تصویر ۵۷۵ کیلوبایتی ندارد:

تصویر کم حجم شده تمرین اول

 

حالا بیایید ابعاد تصویر را هم کاهش دهیم.زیرا برای نمایش (در این آموزش) نیازی به ابعاد ۱۹۰۰ در ۱۲۰۰ نیست!

مطابق شکل زیر از منوی Image گزینه Image Size را انتخاب کنید و طول و عرض عکس را به ابعاد دلخواه تغییر دهید (در اینجا ۶۰۰ در ۳۷۵).

 

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

 

 

فراموش نکنید، هیچ وقت نسب ابعاد تصاویر را به هم نریزید زیرا تصویر حالت اصلی خود را از دست می دهد و کشیده یا جمع می شود.برای جلوگیری از اشتباه مطابق تصویری بالا، قبل از تغییر ابعاد، گزینه Constrain Proportions را تیک بزنید.همچنین اگر در تصویر خود از افکت و style استفاده کردید، گزینه Scale Styles را نیز تیک بزنید.(در این آموزش تیک زدن یا نزدن Scale Styles هیچ تفاوتی ندارد).سپس مجددا تصویر را مانند قبل، Save For Web کنید(عینا مرحله قبلی را هنگام ذخیره تکرار کنید) و نتیجه ۲۰ کیلوبایتی را با همان کیفیت مشاهده کنید:

 

تصویر نهایی کاهش یافته حجم و ابعاد

 

نکته مهم:

شما نباید برای همه تصاویر به شکلی که توضیح داده شد عمل کنید و تا آخر کیفیت را پایین بیاورید(Quality را نباید صفر کنید).با هر عکس، با بالا پایین کردن کیفیت، و تغییر فرمت فایل ها(PNG 8 – JPG – GIF) و با تغییر اندازه عکس و تراکم رنگ ها، می توانید به نتیجه دلخواه برسید.همچنین عکس هایی که سایه دار هستند، را نمی توانید با تراکم رنگ پایین یا با فرمت GIF که تراکم رنگ ۲۵۶ تایی دارد، کم حجم کنید.برای کاهش تصاویر سایه دار، علاوه بر موارد یاد شده، باید سایه ها را نیز حذف کنید.

درباره نویسنده
محسن طاوسی
مطالب نویسنده
7 سالی هست که برنامه نویس .NET هستم و در زمینه سئو موضوعات رقابتی، فعالیت می کنم.

۲۹ دیدگاه نوشته شده است! می توانید دیدگاه خود را بنویسید

  1. احسان چهری می‌گه:

    کسانی که نرم‌افزار فوتوشاپ ندارن می‌تونن این ویژگی‌های تغییر حجم و سایز تصاویر رو در نرم‌افزار Light Image Resizer بدست بیارن
    حجم نرم‌افزار Light Image Resizer هفت مگابایته

  2. اسماعیل می‌گه:

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

  3. سارایه بدبخت می‌گه:

    سلام خسته نباشید
    ممنون ولی ایا میشه همین کار و با موبایل هم انجام داد ؟ اگه میشه باید از کدوم نرم افزار استفاده کرد ؟ من نرم افزار فتوشاپ اکسپرس و دارم ولی اینکار و نمیتونم بکنم !!! توروخدا راهنمایی کنید من وبلاگ دارم و میخوام عکسا رو بزارم توش ولی نمیخوام کیفیتشون پایین بیاد چیکار کنم ؟؟
    ممنون

  4. Mahyar می‌گه:

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

  5. یک دوست می‌گه:

    آقا محسن آموزش فوق العاده ای بود

  6. مهدي می‌گه:

    آقا سلام
    بنده تازه با سایت شما آشنا شدم
    مبتدی هستم.
    شروع کردم مطالب شما رو مطالعه می کنم . این مطلب واقعا به من کمک کرد.
    سطح یادگیری که اینجا یاد می گیرم رو با سایت های دیگه مقایسه می کنم واقعا احساس می کنم دارم حرفه ای می شم (ازخود تعریف نباشه- از سایت شما دارم آموزش ها رو یکی یکی روزانه مطالعه می کنم.)
    واقعا حق استادی به گردن ما دارید.
    باز هم تشکر برای اینکه ساده می نویسید و جامع تا همه بتونند یاد بگیرند.

  7. علی می‌گه:

    سلام
    ممنون 🙂

  8. افراچال می‌گه:

    سلام .. خیلی جالب بود و درعین حال ساده .. ممنون

  9. مریم می‌گه:

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

  10. آذر می‌گه:

    ممنون بسیار مطلب آموزنده ای بود.

  11. مهدي فردوسي می‌گه:

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

    • محسن طاوسی می‌گه:

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

  12. آبنما می‌گه:

    به نظرم سایت tinypng یکی از سایتهای خوب می باشد جهت بهینه سازی تصاویر

    • محسن طاوسی می‌گه:

      زشته به خدا سال ۲۰۱۶، درج کامنت اسپم با ظاهر غیر اسپم! حداقل توی سایت هایی که بدرد چنین کاری میخورن، کامنت اسپم بذارید.

  13. عطربازان می‌گه:

    بسیار عالی و کارآمد ممنون

  14. yt می‌گه:

    با سلام
    ضمن تشکر از پست کابردی شما
    دو سئوال در رابطه با تصاویر سایت دارم که مطرح و تقاضا دارم که در صورت امکان پاسخ لازم ارائه فرمایید:
    ۱٫مشخصات تصویر استناندارد وب سایت از جهت اندازه، رزولوشن، میزان فشرده سازی چیست، به نحوی که اگر قالب سایت را در فواصل زمانی خاص مثلاً سالانه عوض کردیم همان تصویر مناسب باشد؟
    ۲٫آیا اگر در فتوشاپ سندی جدیدی باز شود و مثلاً فایلی با مشخصات :اندازه ۶۰۰ در ۳۰۰ پیکسل ، رزولوشن ۹۶ و با ۸ بیت ایجاد و یک عکس با فرمت jpg را پس از قراردادن در این سند و انجام تنظیمات آن با Save for web ذخیره نماییم یک تصویر بهینه سازی شده است یا این که بهینیه سازی عملی مجزایی است و در صورت اخیر یک تصویر را چگونه می توان (به غیر از استفاده از افزونه های مربوطه در این زمینه) برای یک سایت وردپرسی بهینه سازی کرد؟
    با تشکر

  15. الهام علیزاده می‌گه:

    مطالبتون واقعا عالین . از نظر من بهترین و با کیفیت ترین سایتی هستین که در زمینه سئو کار میکنه. تبریک میگم بهتون و ممنون از مطالب خوبتون

  16. نسرین می‌گه:

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

  17. ghazavatonline می‌گه:

    سلام
    عنوان پست و مطالب آن بسیار مفید است.کاش یکی به سئوالاتی که yt مطرح کرده است و جواب کاملی بدهد تا مورد استفاده دیگران هم قرار بگیرد.
    با سپاس

  18. رضا علیزاده می‌گه:

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

    یک روش ساده برای کم کردن حجم عکس بدون از دست دادن کیفیتش, کمپرس کردن اون به وسیله سایت https://compressor.io هست

    موفق باشید

  19. iamreza می‌گه:

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

  20. گلکسی تولز می‌گه:

    سلام. این روش به طرز قابل توجهی کیفیت رو پایین میاره و در خیلی از موارد تاثیر نداره. ولی من با یه نرم افزار که اسمش jpg imager هست، کاور های مطالبم که معمولاً بین ۱۰۰ تا ۲۰۰ کیلوبایت هستن رو به کمتر از ۴۰ کیلوبایت میرسونم و کیفیتش زیاد کم نمیشه.(میتونید توی سایتم نمونه هاشو ببینید) اما قبلاً با همین روش این کارو میکردم که واقعاً کیفیتشون افتضاح میشد و تازه مجبور میشدم حجمشون رو حدود ۶۰ کیلوبایت بگیرم که بشه نوشته هاشو خوند!!!

  21. yeknam می‌گه:

    سلام.
    دوست عزیز من خودم توی فتوشاپ زمینه ای دارم و خودم یک وبمستر هستم. اما سوالم اینجاست که واقعا روی عکسی که نشان دادیم واقعا از Quality صفر استفاده کردید.
    ببینید هیچ تصویری جز تصاویری که دارای رنگ های خیلی خیلی ساده هستند نمیشه Quality صفر بهشون داد چون تصویر رو واقعا داغون میکنه چون این تصویری که شما Quality رو صفر کردید میتونم صد در صد بگم که شاید اگر Quality رو به زیر ۴۰ یا ۳۵ بیارید افت کیفیت پیدا می کنه تا جایی قابل دیدن هست.
    ولی امیدوارم که این مطلب رو تصحیح کنید.

    • محسن طاوسی می‌گه:

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

دیدگاه خود را به ما بگویید.


پربازدیدترین مقالات
ارتباط با ما
تماس و مشاوره رایگان :
مهدیزاده -09129175306
کلیه حقوق این سایت برای سئو روز محفوظ است.
صفحه اصلی   |    درباره ما   |    خدمات سئو   |    تماس با ما   |    شرایط و قوانین