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

Pin
Send
Share
Send


بعد از ایجاد انیمیشن در فتوشاپ ، باید آن را در یکی از قالب های موجود ذخیره کنید که یکی از آنهاست GIF. از ویژگی های این فرمت این است که برای نمایش (پخش) در یک مرورگر در نظر گرفته شده است.

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

درس: نحوه ذخیره ویدیو در فتوشاپ

فرآیند ایجاد GIF انیمیشن در یکی از دروس قبلی توضیح داده شد ، و امروز ما در مورد نحوه ذخیره فایل در قالب صحبت خواهیم کرد GIF و در مورد تنظیمات بهینه سازی

درس: یک انیمیشن ساده در فتوشاپ بسازید

صرفه جویی در GIF

ابتدا بیایید مطالب را تکرار کنیم و با پنجره ذخیره تنظیمات آشنا شویم. با کلیک روی مورد باز می شود. صرفه جویی در وب در منو پرونده.

پنجره از دو بخش تشکیل شده است: بلوک پیش نمایش

و تنظیمات مسدود شده است.

بلوک پیش نمایش

انتخاب تعداد گزینه های مشاهده در بالای بلوک انتخاب می شود. بسته به نیاز خود می توانید تنظیمات مورد نظر را انتخاب کنید.

تصویر در هر پنجره ، به جز اصلی ، به طور جداگانه پیکربندی شده است. این کار به این صورت انجام شده است که می توانید بهترین گزینه را انتخاب کنید.

در قسمت بالا سمت چپ بلوک مجموعه کوچکی از ابزار قرار دارد. ما فقط استفاده خواهیم کرد "دست" و "مقیاس".

با دستها می توانید تصویر را درون پنجره انتخاب شده منتقل کنید. انتخاب نیز توسط این ابزار انجام می شود. "مقیاس" همان عمل را انجام می دهد. می توانید با دکمه های موجود در انتهای بلوک بزرگنمایی و خارج کنید.

در زیر دکمه ای با کتیبه قرار دارد مشاهده. این گزینه انتخاب شده را در مرورگر پیش فرض باز می کند.

در پنجره مرورگر ، علاوه بر مجموعه ای از پارامترها ، می توانیم نیز دریافت کنیم کد HTML GIF

تنظیمات بلوک می شوند

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

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

    • ادراکیاما فقط یک "طرح ادراک" هنگام استفاده ، Photoshop با هدایت رنگهای فعلی تصویر ، جدول رنگی ایجاد می کند. به گفته توسعه دهندگان ، این جدول تا حد امکان به چگونگی دیدن چشم انسان به رنگ ها نزدیک است. به علاوه - تصویر نزدیک به اصلی ، رنگ ها حداکثر حفظ می شوند.
    • انتخابی این طرح شبیه به روش قبلی است اما عمدتاً از رنگهایی استفاده می کند که برای وب بی خطر است. همچنین بر نمایش سایه های نزدیک به اصلی نیز تاکید شده است.
    • سازگار. در این حالت ، جدول از رنگهایی ایجاد می شود که در تصویر رایج تر است.
    • محدود. از 77 رنگ تشکیل شده است که برخی از آنها به صورت نقطه (دانه) با رنگ سفید جایگزین می شوند.
    • سفارشی. در هنگام انتخاب این طرح ، می توانید پالت خود را ایجاد کنید.
    • سیاه و سفید. در این جدول فقط دو رنگ (سیاه و سفید) استفاده می شود ، همچنین از اندازه دانه نیز استفاده می شود.
    • در مقیاس خاکستری. 84 سطح مختلف سایه خاکستری در اینجا استفاده می شود.
    • MacOS و ویندوز. این جداول بر اساس ویژگی های نمایش تصاویر در مرورگرهایی که این سیستم عامل ها را اجرا می کنند ، گردآوری می شوند.

    در اینجا چند نمونه از کاربرد مدار آورده شده است

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

  2. حداکثر تعداد رنگ ها در یک جدول رنگی.

    تعداد سایه های تصویر به طور مستقیم بر وزن آن تأثیر می گذارد و بر این اساس سرعت بارگیری در مرورگر. بیشترین مقدار استفاده می شود 128، از آنجا که چنین تنظیماتی تقریباً هیچ تاثیری در کیفیت ندارد ، در حالی که وزن گیف را کاهش می دهد.

  3. رنگ وب این تنظیم تحمل را با استفاده از آن سایه ها از یک پالت وب ایمن به معادلین تنظیم می کند. وزن پرونده با مقدار تعیین شده توسط لغزنده تعیین می شود: مقدار بیشتر است - پرونده کوچکتر است. هنگام تنظیم رنگ وب ، کیفیت را نیز فراموش نکنید.

    مثالی:

  4. Dithering به شما امکان می دهد با مخلوط کردن سایه های موجود در جدول فهرست بندی منتخب ، انتقال بین رنگ ها را صاف کنید.

    همچنین ، تنظیم تا حد امکان به حفظ شیب ها و یکپارچگی بخش های تک رنگ کمک خواهد کرد. هنگام استفاده از جداسازی ، وزن پرونده افزایش می یابد.

    مثالی:

  5. شفافیت قالب GIF فقط از پیکسلهای کاملاً شفاف یا کاملاً مات پشتیبانی می کند.

    این پارامتر ، بدون تنظیم اضافی ، خطوط منحنی را ضعیف نشان می دهد و نردبان های پیکسلی را ترک می کند.

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

  6. درهم تنیده یکی از مفیدترین برای تنظیمات وب است. در این حالت ، اگر پرونده دارای وزن قابل توجهی است ، به شما امکان می دهد بلافاصله تصویر را در صفحه نشان داده و کیفیت آن را همزمان با بارگیری بهبود دهید.

  7. تبدیل sRGB به حفظ حداکثر رنگهای اصلی تصویر در هنگام صرفه جویی کمک می کند.

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

برای درک بهتر فرایند تنظیم پس انداز GIF در فتوشاپ ، باید تمرین کنید.

تمرین کنید

هدف بهینه سازی تصاویر برای اینترنت ، به حداقل رساندن وزن فایل در عین حفظ کیفیت است.

  1. پس از پردازش تصویر ، به منو بروید پرونده - ذخیره برای وب.
  2. حالت نمایش را تنظیم می کنیم "4 گزینه".

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

    تنظیمات پارامتر به شرح زیر است:

    • طرح رنگ "انتخابی".
    • "رنگ" - 265.
    • از بین رفتن - "تصادفی", 100 %.
    • سحر را جلوی پارامتر خارج می کنیم درهم تنیده، از آنجا که حجم نهایی تصویر بسیار اندک خواهد بود.
    • رنگهای وب و "ضرر" - صفر

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

  4. برو به تصویر زیر فقط پیکربندی شده است. بیایید سعی کنیم آن را بهینه کنیم.
    • ما طرح را بدون تغییر می گذاریم.
    • تعداد رنگ ها به 128 کاهش می یابد.
    • ارزش از بین رفتن تا 90٪ کاهش یابد
    • رنگ وب ما لمس نمی کنیم ، زیرا در این صورت به ما در حفظ کیفیت کمک نمی کند.

    اندازه GIF از 36.59 KB به 26.85 KB کاهش یافته است.

  5. از آنجایی که این عکس از قبل دارای برخی از دانسیته ها و نقص های کوچک است ، ما سعی خواهیم کرد که افزایش دهیم "ضرر". این پارامتر میزان قابل قبول از بین رفتن داده ها را در هنگام فشرده سازی تعریف می کند. GIF. مقدار را به 8 تغییر دهید.

    ما در حالیکه کیفیت کمی از دست داده ایم ، توانستیم اندازه پرونده را بیشتر کاهش دهیم. GIF اکنون 25.9 کیلوبایت وزن دارند.

    در کل ، ما توانستیم حدود 10 کیلوبایت اندازه تصویر را کاهش دهیم ، که بیش از 30٪ است. نتیجه ای بسیار خوب.

  6. اقدامات بیشتر بسیار ساده است. روی دکمه کلیک کنید ذخیره کنید.

    مکانی را برای ذخیره انتخاب کنید ، نام gif را بدهید و دوباره روی "ذخیره کنید ".

    لطفا توجه داشته باشید که امکان وجود دارد با GIF ایجاد و HTML سندی که در آن تصویر ما تعبیه شده است. برای این کار بهتر است پوشه خالی را انتخاب کنید.

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

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

این درسی است برای ذخیره تصویر در قالب GIF کامل شد بر روی آن فهمیدیم که چگونه می توان پرونده ای را برای ارسال در اینترنت بهینه کرد.

Pin
Send
Share
Send