در اين بخش مي‌توانيد در مورد تمامي مباحث گرافيک و طراحي گرافيکي به بحث بپردازيد
Moderator

Moderator



نماد کاربر
پست ها

935

تشکر کرده: 120 مرتبه
تشکر شده: 52 مرتبه
تاريخ عضويت

چهارشنبه 6 تیر 1386 02:01

محل سکونت

I.R.Iran

آرشيو سپاس: 3600 مرتبه در 672 پست

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

توسط CentralWeb » يکشنبه 13 شهریور 1390 11:15

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


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

ممکن است یک صفحه ۴۰ کیلو بایت به نظر خیلی سبک و نامناسب بیاید ولی به خاطر داشته باشید همین صفحه ۱۳ ثانیه طول می کشد تا با یک مودم ۵۶K بالا بیاید.

بررسی ها نشان داده است که اگر بالا آمدن تصاویر سایت ها بیش از ۱۵ ثانیه طول بکشد ممکن است سرورها تصاویر را بلرزانند و یا تکه تکه بیاورند، هر چند بعضی مراجعه کنندگان به سایت شما دارای اتصال هایی با باند هستند، ولی بعضی کاربران ممکن است با موبایل به سایت شما وصل شوند.

برای اطلاعات بیشتربه سایت http://Usability.gov مراجعه کنید.

برای این که یک سایت متعادل داشته باشید باید مقیاس های فیزیکی تصاویرتان را کاهش دهید و آنها را فشرده کنید تا فایل شما به کوچکترین اندازه ممکن تقلیل یابد. این همان روند بهینه سازی تصاویر است. هر چه بیشتر تصویر را فشرده کنید، البته که جزئیات بیشتری را از دست می دهید، بنابر این باید تمهیدی به خرج دهید که بین اندازه فایل و کیفیت تصویرتان همخوانی مناسبی ایجاد شود. همیشه این سؤال را از خودتان بپرسید که آیا این تصویر لازم است؟

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

گام اول: آماده سازی تصویر
بسیار ساده می توانید فایل را با فتوشاپ ویرایش کنید و آن را ف_*ل_ن*__ر گذاری کنید. برنامه گرافیکی خود را در Mode RGB (و نه CMYK) تنظیم کنید و اگر در نظر دارید بعداً آن را ویرایش کنید، حتماً آن را لایه لایه ذخیره کنید.
ـ نکته:همیشه تصویر Gif را قبل از آن که بخواهید ویراش کنید و یا تغییر اندازه دهید به RGB برگردانید.

گام دوم: حذف زوائد
از ابزار Crop برای حذف چیزهای زائد پیرامون تصویر استفاده کنید. Crop ابزاری است که به سادگی می توانید آن را انتخاب کنید و سپس چهار گوشی برای محدوده مورد نظر بکشید.

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

گام چهارم: تنظیم کنید
وقتی می خواهید عرض تصویر را تنظیم کنید، اول ببینید که کیفیت کار بر روی صفحه معمولی چگونه است. برای نشان دادن یک تصویر۴۸۰*۶۴۰ باید یک محدوده پیکسل ۳۰۰*۶۰۰ و برای یک تصویر۳۰۰*۷۶۰ یک محدوده ۶۰۰*۸۰۰ و برای یک تصویر۶۰۰*۹۵۵ یک محدوده ۷۶۸*۱۰۲۴ در نظر بگیرید.

ـ نکته: همیشه سعی کنید تصاویر وب را به صورت ۷۲ نقطه در اینچ ذخیره کنید.

گام پنجم: JPEG یا GIF
جستجوگر همه موضوعاتی را که کماکان به صورت JPEG و GIF وجود داشته باشد پشتیبانی می کند. JPEG می تواند میلیون ها رنگ را پشتیبانی کند، در حالی که GIF فقط ۲۵۶ رنگ را پشتیبانی می کند. بنابر این GIF برای تصاویر گرافیکی مثل آیکون ها، لوگوها و دکمه ها مناسب است، اما JPEG برای عکس هایی که ترکیبات رنگ پیچیده تر دارند بکار می رود.

گام ششم: فشرده سازی JPEG
JPEG از یک نوع تکنیک ریاضی بسیار پیچیده برای تولید یک مقیاس قابل تغییر در فشرده سازی تصاویر استفاده می کند. بسیاری از برنامه های گرافیکی نیز این امکان را دارند که میزان تأثیری را که فشرده سازی بر روی تصویر می گذارد نشان دهند.

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

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

گام نهم: فرمت GIF
برای کوچک نگهداشتن اندازه فایل از این فرمت استفاده می شود. فرمت GIF حداکثر ۲۵۶ رنگ را پشتیبانی می کند. اگر تعداد رنگ ها را کمتر کنید، اندازه فایل ها را هم می توانید کوچک تر کنید. GIF همچنین می تواند ذخیره سازی را مرحله ای انجام دهد، رنگ را شفاف سازد و انیمیشن هم داشته باشد.

گام دهم: مواظب باشید
نه تنها ذخیره سازی و فشرده سازی تصاویر GIF کار مشکلی است، بلکه گاهی اندازه ها در جاهای مختلف تصویر، متفاوت ذخیره می شوند. ممکن است همواره این اتفاق نیافتد ولی معمولاً این گونه می باشد. در نتیجه بهتر است همواره از JPEG استفاده کنید و گرنه ممکن است رنگ ها در تصورتان به صورت نواری دربیایند.

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

گام دوازدهم: سایر موارد
همه کاربران نمی توانند تصاویر گرافیکی را روی سایت شما ببینید، بنابر این بسیار مهم است که سایت شما شامل text مربوط به تصاویر هم باشد. شما می توانید درسایت ها از نمودارها و دیاگرام ها نیز استفاده کنید.


منبع : ایران آرت


 لينکها براي کاربران مهمان قابل دسترسي نيست، براي مشاهده ي لينکها لطفا ثبت نام کرده و وارد شويد  | ***  لينکها براي کاربران مهمان قابل دسترسي نيست، براي مشاهده ي لينکها لطفا ثبت نام کرده و وارد شويد  *** |  لينکها براي کاربران مهمان قابل دسترسي نيست، براي مشاهده ي لينکها لطفا ثبت نام کرده و وارد شويد 

کاربران زیر از شما کاربر محترم جناب CentralWeb تشکر کرده اند:
CAPTAIN PILOT, HESAM-007, abbas.m.k, MASTER

 


  • موضوعات مشابه
    پاسخ ها
    بازديدها
    آخرين پست

چه کسي حاضر است ؟

کاربران حاضر در اين انجمن: بدون كاربران آنلاين و 0 مهمان