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

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

حقایقی در مورد فرمت های گوناگون تصاویر

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

در مورد تصاویر، دو نوع فشرده سازی وجود دارد:

  • Loosy : در این نوع فشرده سازی، هرگاه بخواهیم عکس فشرده شده را از حالت فشرده خارج کنیم، هرگر به کیفیت عکس اصلی نخواهیم رسید؛ هرچند ممکن است این تمایز از فاصله دور مشخص نباشد و شما تصور کنید که عکس اُفت کیفیتی نداشته است. این روش فشرده سازی تصاویر، مناسب برای استفاده در صفحات وب است. تصاویری که به این صورت فشرده شده اند، با وجود اینکه حافظه بسیار کوچکی را طلب میکنند، از کیفیتی مناسب برای انتشار در اینترنت برخوردار هستند.
  • Lossless : تصویری که از این نوع فشرده سازی استفاده میکند، هر زمان که از حالت فشرده خارج شود، دقیقا کیفیتی برابر با تصویر اصلی خواهد داشت. در این نوع فشرده سازی تصاویر به مقدار بیشتری از حافظه نیاز دارند، بنابراین برای استفاده در اینترنت مناسب نیستند.

JPEG

JPEG نام یک فرمت برای ذخیره سازی تصاویر است و .jpg یک بسط از این فرمت است. این فرمت از نوع Loosy استفاده می کند و هنگام فشرده سازی آن می توان کاملا به میزان فشرده شدن تصویر کنترل داشت. این فرمت برای ذخیره سازی تصاویری که در آنها از میلیون ها رنگ استفاده شده است مانند عکس های گرفته شده توسط دوربین عکاسی و یا تصاویری که از طیف های رنگی زیاد و یا از گرادینت استفاده کرده اند، مناسب است.

GIF

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

فرمت gif میتواند چندین جدول ذخیره سازی اطلاعات داشته باشد؛ بنابراین میتواند با ذخیره سازی اطلاعات فریم های مختلف، یک انیمیشن را نمایش دهد.

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

PNG

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

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


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

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

در اکثر نرم افزارهای ویرایش تصاویر گزینه ذخیره سازی برای وب (Save for web) در منوی فایل قرار دارد. ممکن است در سایر ویرایشگرهای مشابه این گزینه در منوی فایل و زیر منوی Export قایل دسترسی باشد.

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

  1. یک تصویر با کیفیت اصلی را در فتوشاپ باز کنید. مشاهده تصویر تمرینی من
  2. از منوی فایل گزینه Save for web را انتخاب کنید.
  3. از آنجا که این یک تصویر واقعی از طبیعت و دارای تعداد رنگ بالا است، از سمت راست گزینه jpeg را انتخاب کنید.
  4. در صورت تمایل گزینه Progressive را تیک بزنید. تصاویری که با این خاصیت ذخیره میشوند هنگام بارگزاری ابتدا به صورت تار و مات ظاهر شده و به تدریج واضح می شوند. تصاویر غیر progressive هنگام بارگزاری به صورت خط به خط بارگزاری میشوند.
  5. اکنون میزان کیفیت را تعیین کنید. اگر قصد دارید خود تصویر را مستقیما نمایش دهید کیفیت High را انتخاب کنید و اگر تصویر را به عنوان پس زمینه در نظر گرفته اید گزینه های Medium و Low را انتخاب کنید.
  6. اگر می خواهید کنترل بیشتر و جزئی تری روی تصویر داشته باشید، می توانید از دستگیره فیلد Quality استفاده کنید و یا مستقیما عدد مورد نظر را وارد کنید.
  7. هنگامی که مقادیر فوق را تغییر میدهید، همزمان به تصویر و گوشه سمت چپ زیر تصویر جایی که مدت زمان بارگزاری و حجم فایل نشان داده میشود نگاه کنید تا به حجم و کیفیمت مناسب برسید.

    • اگر تصویر یک پس زمینه است، حجم آن را کمتر از 5KB انتخاب کنید. تا 2KB بهتر است.
    • اگر تصویر هدر سایت است، تا حجم 40KB قابل قبول است.
    • اگر این تصویر برای نمایش در داخل یک صفحه بهینه سازی میشود، حجم 20-30KB می تواند مناسب باشد که تفاوت 10KB بستگی به سایز آن دارد.
    • تصاویر هنری می توانند با کیفیت بهتری ذخیره شوند، چراکه بازدیدکنندگان اینگونه وبسایتها، تمایل به دیدن عکس هایی با کیفیت بالا دارند.
  8. هنگامی که بین کیفیت عکس و حجم آن تعادل قابل قبولی برقرار شد، دکمه Save را کلیک کنید.

مشاهده تصویر ذخیره شده با کاهش 60 درصدی کیفیت و حجم 42KB

این تصویر با یک کانکشن 56kbps در مدت زمان 8 ثانیه بارگزاری خواهد شد. این تصویر در بهترین کیفیت خود نیست و ممکن است قسمت هایی از آن تار شده باشد. اما برای اهداف وب بسیار مناسب است چراکه نسبت کیفیت اولیه خود، 75 درصد کمتر نیاز حافظه دارد.

ذخیره سازی تصاویر تخت و ساده و نمودارها

  1. یک تصویر با کیفیت اصلی را در فتوشاپ باز کنید. مشاهده تصویر تمرینی من
  2. از منوی فایل گزینه Save for web را انتخاب کنید.
  3. از آنجا که این یک تصویر حاوی تعداد رنگ های کم است، از سمت راست گزینه gif را انتخاب کنید.
  4. اگر تصویر شما دارای نقاط بی رنگ (Transparent) است، حتما گزینه Transparency را تیک بزنید.
  5. در حال که تصویر را زیر نظر دارید، از بخش Color کمترین تعداد رنگی را که ممکن است انتخاب کنید.
  6. چنانچه تصویر شما مانند پس زمینه ها، در دید مستقیم نیست، با افزایش میزان بخش Lossy حجم تصویر را کمتر کنید.
  7. هنگامی که بین کیفیت عکس و حجم آن تعادل قابل قبولی برقرار شد، دکمه Save را کلیک کنید.

تصویر ذخیره شده در فرمت GIF با 8 رنگ، 50 درصد Loosy با حجم 25KB

این تصویر با یک کانکشن 56kbps در مدت زمان 5 ثانیه بارگزاری خواهد شد. اگر از نزدیک به تصویر نگاه کنیم، تفاوت زیادی بین تصویر بهینه شده و اصلی است اما تصویر بهینه شده برای هدف ما و استفاده در وب به عنوان پس زمینه به حد کافی مناسب است. چیزی که مهم است اینست که حجم تصویر بهینه شده فقط به اندازه 15 درصد از تصویر اصلی است!

نظرات (15) -

  • حامد

    09/10/1390 01:32:36 ق.ظ | پاسخ به این نظر

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

    • Admin

      09/10/1390 02:49:24 ق.ظ | پاسخ به این نظر

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

  • pop_0098

    10/29/1390 09:18:23 ب.ظ | پاسخ به این نظر

    بهتر بود از الگوریتم داخلی فشرده سازی در فرمت های jpg , gif , png هم مینوشتید

    خود قالب یک فرمت خصوصیاتی دارد ولی الگوریتم داخلی برای قالب هم وجود دارد که در ایران کسی حرفی از آنها نمیزند
    در فرمت jpg من حدود 6 الگوریتم فشرده سازی داخلی را دیدم و ازشون استفاده می کنم که هر کدام خصوصیات خوب و بدی را دارند که برای دیگر فرمت ها م هم هست که مثل فشرده سازی با فشرده سازی بسته به رنگ و ... دیگری که خصوصیات عکس های کامپویتر را تشکیل میدهند که من به شخصه استفاده میکنم که مثلا یک عکس را با استفاده فرمت jpg که معمولا همان عکس را به هر کسی دادم از 1 مگ به 150 کیلوبایت تبدیل میکنه و فکر میکنند این دیگه اخر فشرده شدنش هست بعد با الگوریتم که دیدم حجم را به 70 و در بعضی زمان ها تا 20 کیلو بایت فشرده کردم

    • Admin

      10/30/1390 10:45:16 ب.ظ | پاسخ به این نظر

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

  • مرجان

    12/02/1390 11:23:18 ق.ظ | پاسخ به این نظر

    خیلی سایتتون باحاله. کلی حال کردم باهاش.چیزای خوب و به درد بخور توش پیدا میشه.

  • مهدی

    02/14/1391 05:23:32 ب.ظ | پاسخ به این نظر

    آقا خیلی آقایی
    جدی میگم
    این کاهش تصویر خیلی کار من رو راه انداخت
    همیشه بچه ها با دیال آپ که کانکت میشدن شاکی بودن سایت خیلی سنگینه
    دست مریزاد ایول داری

  • حسین

    02/29/1391 12:36:07 ق.ظ | پاسخ به این نظر

    سایت خیلی زیبایی دارین.
    like+ واسه: طراحی و مطالب

  • MM888

    06/11/1391 06:46:43 ق.ظ | پاسخ به این نظر

    سلام
    واقعا سایت خوبی دارید. توپه توپه!!
    ظاهر سایتتونم خیلی قشنگه. (به خودم می گم: میخواستی با این همه آموزش CSS و HTML  که تو سایت هست،سایتشون زشت باشه!!)

  • leila

    02/14/1392 11:42:05 ق.ظ | پاسخ به این نظر

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

  • بامداد

    05/01/1393 09:36:47 ق.ظ | پاسخ به این نظر

    سلام
    من همش از همین روش استفاده میکنم اما همش با jpg تصاویر رو ذخیره میکنم
    با خوندن این مطلب و در شرایطی که یک تصویر "سه رنگ" تو فتوشاپم باز بود و save for web با فرمت png اش کردم و دیدم خدایا چقدر حجمش کمتر شد (44 بود شد 14) یه لحظه احساس کردم از خوشحالی دارم میمیرم . با کلی ذوق رفتم فایل تصاویر رنگی سایتم رو باز کردم که همشو png کنم اما دیدم فرمت png فقط برای زیر 256 رنگ عالی جواب میده
    خورد تو ذوقم Frown
    اما در کل ممنون یه چیز جدید یاد گرفتم Smile که حداقل در طیف رنگی پایین png استفاده کنم

    خیر ببینید Smile

Loading