بهینه سازی تصاویر برای سایت..؟

[محمدسلیمانی]

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

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

میرسیم به مبحث شیرین و دوست داشتنی گرافیک و کار با تصاویر
چون هرچقدر در کد نویسی و رعایت سئو موفق باشید وقتی تصاویر بهینه ای نداشته باشید میشید مثل این

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

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

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

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

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 قایل دسترسی باشد.

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

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

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

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

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

یک تصویر با کیفیت اصلی را در فتوشاپ باز کنید.
از منوی فایل گزینه Save for web را انتخاب کنید.
از آنجا که این یک تصویر حاوی تعداد رنگ های کم است، از سمت راست گزینه gif را انتخاب کنید.
اگر تصویر شما دارای نقاط بی رنگ (Transparent) است، حتما گزینه Transparency را تیک بزنید.
در حال که تصویر را زیر نظر دارید، از بخش Color کمترین تعداد رنگی را که ممکن است انتخاب کنید.
چنانچه تصویر شما مانند پس زمینه ها، در دید مستقیم نیست، با افزایش میزان بخش Lossy حجم تصویر را کمتر کنید.
هنگامی که بین کیفیت عکس و حجم آن تعادل قابل قبولی برقرار شد، دکمه Save را کلیک کنید.
تصویر ذخیره شده در فرمت GIF با 8 رنگ، 50 درصد Loosy با حجم 25KB

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