زمان کنونی: ۹-۱-۱۴۰۳, ۱۰:۱۳ عصر درود مهمان گرامی! (ورودثبت نام)


ارسال پاسخ 
 
امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
بهینه سازی تصاویر برای سایت..؟
۱۲-۷-۱۳۹۱, ۰۱:۴۵ صبح (آخرین ویرایش در این ارسال: ۱۴-۷-۱۳۹۱ ۰۲:۵۳ صبح، توسط محمدسلیمانی.)
ارسال: #1
بهینه سازی تصاویر برای سایت..؟
باسلام خدمت همه دوستان خوبم در انجمن خوب پارس جوم
پیرو صحبتی که قبلا شده بود مبنی بر اینکه بعضی از دوستان که با جوملا آشنا میشند فکر میکنند همه نیازشون برطرف شده قبلا چندین تایپک در انجمن معرفی شد
مثل این دو پست که به دوستان پیشنهاد میکنم تا تهش بخونند
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

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

میرسیم به مبحث شیرین و دوست داشتنی گرافیک و کار با تصاویر
چون هرچقدر در کد نویسی و رعایت سئو موفق باشید وقتی تصاویر بهینه ای نداشته باشید میشید مثل این
[تصویر:  1349189459_499_17abfc9339.gif]
در این آموزش یاد میگیریم چطوری حجم تصاویر و بهینه سازی کنیم و عکس ها همراه با کیفیت مناسب برای استفاده در وبسایت را تشریح کنم.
در این مطلب حقایقی در زمینه فشرده سازی تصاویر مطرح میشه که نشان میده چرا در برخی وب سایت ها سرعت بارگزاری یک تصویرِ نه چندان بزرگ به قدری کُند است، که قبل از بارگزاری کامل آن تصویر، میتوانید مطلب خود را یافته، مطالعه کرده و سایت را ترک کنید! و چرا در مقابل وبسایت هایی وجود دارند که با وجود تصاویر نسبتا بزرگتر سرعت بارگزاری آنها قابل تحسین است.

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

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

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

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

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

JPEG

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

GIF

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

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

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

PNG

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

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

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

[تصویر:  1349189026_499_0329f820ff.jpg]
در اکثر نرم افزارهای ویرایش تصاویر گزینه ذخیره سازی برای وب (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 درصد از تصویر اصلی است!
امضاء محمدسلیمانی
چالش هاتو محدود نکن، محدودیت هاتو به چالش بکش

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
 سپاس شده توسط صدرا حسابی ، mahan ، محمدرضا بهارلو ، vahid.exe ، pari2
۱۲-۷-۱۳۹۱, ۰۳:۱۱ صبح
ارسال: #2
RE: بهینه سازی تصاویر برای سایت..؟
سلام
یک نرم افزاری هست به اسم optipng که می توانید از دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
دانلودش کنید
این نرم افزار کارش اینه که میگرده کمترین حجم ممکن برای عکسهای با پسوند png را پیدا میکنه و ذخیره میکنه
برای کار با این نرم افزار کافیه عکس را در پوشه فایل اجرایی قرار بدهید و عکس را برداشته و روی فایل اجرایی بگذارید و نرم افزار به طور خودکار کار را تمام میکنه
امضاء hoomanb
مزرع سبز فلک دیدم و داس مه نو یادم از کشته خویش آمد و هنگام درو
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
 سپاس شده توسط محمدسلیمانی ، محمدرضا بهارلو
۱۲-۷-۱۳۹۱, ۰۴:۰۱ صبح
ارسال: #3
RE: بهینه سازی تصاویر برای سایت..؟
درود Smile

اولا از آقا محمد گل ، گلاب تشکر ویژه کنم بابت زحماتی که برای انجمن میکشند RoseInloveRose

چیزی که زیاده نرم افزار
مثلا Advanced JPEG Compressor
و دیگر نمونه ها
ولی به نظر من هیچ چیز مثل خود فتوشاپ بهتر نیست.
البته این نظر شخصی منه و میدونم خیلی هم با این سخن موافق هستن.

موفق و پیروز باشید Rose
امضاء محمدرضا بهارلو
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

قم اس ام اس ::. سامانه ارسال پیام کشوری
ارائه پنل کاربری ، نمایندگی ، واگزاری خطوط مجازی ، تعرفه ثابت 100 ریال ، امکانات نامحدود و فوق العاده ، پنل رایگان ، شماره اختصاصی رایگان و....
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
& دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
09109984196
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
 سپاس شده توسط محمدسلیمانی ، صدرا حسابی
۱۲-۷-۱۳۹۱, ۰۵:۱۴ صبح
ارسال: #4
RE: بهینه سازی تصاویر برای سایت..؟
در قدرت و دقت فتوشاپ هیچ شکی نیست اما برنامه های جانبی هم گاهی کار را برای کسانی که فتوشاپ یاد ندارند راحت میکنه
البته اینو فراموش نکنید که یادنداشتن فتوشاپ برای یک طراح اونم طراح سایت یک ضعف محسوس به نظر میاد
گرچه بهینه کردن تصاویر که مورد بحث هست کار سختی نیست.
اگر دوستان علاقه داشته باشند بیشتر به این موضوع می پردازیم.
امضاء محمدسلیمانی
چالش هاتو محدود نکن، محدودیت هاتو به چالش بکش

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
 سپاس شده توسط محمدرضا بهارلو
۱۲-۷-۱۳۹۱, ۰۶:۲۱ صبح
ارسال: #5
RE: بهینه سازی تصاویر برای سایت..؟
به نظر من خیلی خوبه که تو این انجمن به این موضوع پرداخته بشه
من خودم هم به این موضوع علاقه دارم
اگه بشه کد های html رو قرار داد که کیفیت ثابت بشه و حجم کم بشه عالی

مرسی از محمد جان گل

انشاالله که ایت تاپیک ادامه دار باشه

موفق و پیروز باشید Rose
امضاء محمدرضا بهارلو
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

قم اس ام اس ::. سامانه ارسال پیام کشوری
ارائه پنل کاربری ، نمایندگی ، واگزاری خطوط مجازی ، تعرفه ثابت 100 ریال ، امکانات نامحدود و فوق العاده ، پنل رایگان ، شماره اختصاصی رایگان و....
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
& دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
09109984196
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
۱۲-۷-۱۳۹۱, ۰۷:۰۸ صبح (آخرین ویرایش در این ارسال: ۱۲-۷-۱۳۹۱ ۰۷:۱۰ صبح، توسط محمدسلیمانی.)
ارسال: #6
RE: بهینه سازی تصاویر برای سایت..؟
البته پلاگین هایی برای این وجود دارند که خودکار تصاویر رو کوچک میکنه ولی چیزی از حجم عکس کم نمیشه و باید با همون حجم کاربر لود کنه گرچه کوچک میبینش
یا پلاگین هایی که برای بالا بردن سرعت سایت به تصاویر اجازه لود بعد از باز شدن سایت میده که مشکلات خودشو داره پس بهتره درد و درمان کنیم
این مورد را نمیشه با کد پوشش داد
بهتره طبق اموزش تمام تصاویر را بهینه کنید و خودتون ببینید یکی دیگه از معجزه های فتوشاپ رو
امضاء محمدسلیمانی
چالش هاتو محدود نکن، محدودیت هاتو به چالش بکش

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
 سپاس شده توسط محمدرضا بهارلو ، صدرا حسابی
۱۲-۷-۱۳۹۱, ۰۷:۴۵ صبح
ارسال: #7
RE: بهینه سازی تصاویر برای سایت..؟
آقا محمد با حرفتون موافقم و برای تصاویر اصلی بهینه سازی دستی، و ترجیحا با خود فتوشاپ، بهترین گزینس،
ولی بعضی از این پلاگین ها هم واقعا کار فشرده سازی و بهینه سازی تصویر رو به خوبی انجام می دن، از طریق php این کار ممکن هست، مثلا برای اخباری که روزانه قرار توسط یک فرد عادی زده بشه خب به نظرم همین پلاگین ها پاسخگو هست.
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
 سپاس شده توسط محمدسلیمانی
ارسال پاسخ 


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان