تغییر اندازه و بهینه‌سازی تصاویر برای وب و موبایل در سال ۲۰۱۹ با استفاده از Assetizer

ترجمه و تالیف : عرفان کاکایی
تاریخ انتشار : 13 خرداد 98
خواندن در 3 دقیقه
دسته بندی ها : طراحی وب

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

تغییر اندازه و بهینه‌سازی تصاویر برای وب و موبایل در سال ۲۰۱۹ با استفاده از Assetizer

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

من که وبسایت‌ها و برنامه‌های بی‌شماری را ساخته‌ام، همیشه با یک مشکل رو به رو بوده‌ام. چگونه باید رسانه‌های خود (در اصل تصاویر) را در اندازه مناسب قرار دهید؟ وقتی که تصویری را از وبسایتی مانند Unsplash دانلود می‌کنید، یک فایل عظیم که اندازه‌ای بین ۱ تا ۱۰ مگابایت دارد را به دست می‌آورید. فقط قرار دادن همین تصویر بر روی یک وبسایت یا برنامه، زمان بارگذاری صفحه را به شدت افزایش خواهد داد و شاید حتی کارایی آن را کاهش دهد. مطمئن باشید که شما این را نمی‌خواهید؛ زیرا گوگل بسیار از آن آگاه است. پس شما باید تصاویر (یا هر رسانه‌ای) را قبل از قرار دادن آن بر روی اینترنت، بهینه‌سازی کنید.

نتیجه مطلوب چیست؟

۱. باید تصاویری داشته باشید که واضح هستند و به نظر نمی‌رسد که پیکسلی باشند.

۲. اندازه دارایی‌های شما باید در کوچک‌ترین حالت ممکن باشد تا زمان بارگذاری صفحه را کاهش دهد.

پس چگونه به این هدف برسیم؟

۱. برای یک ابزار تغییر اندازه / بهینه‌سازی تصویر بر روی وب جستجو کنید تا و به استفاده از یک ابزار مسدود کننده تبلیغات وب ادامه دهید.

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

۳. اگر یک پروژه بزرگ‌تر دارید، می‌توانید یک جریان کاری فشرده‌سازی تصویر را با استفاده از Webpack در آن پیاده‌سازی کنید.

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

یک ابزار برای حکمرانی همه

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

  • JPG
  • PNG
  • SVG
  • GIF (حتی پویانمایی شده)
  • WEBP
  • BMP
  • TIFF

تغییر اندازه و بهینه‌سازی تصاویر برای وب و موبایل در سال ۲۰۱۹ با استفاده از Assetizer

Assetizer شما را قادر می‌سازد تا بدون تلاش، نام فایل‌ها را تغییر دهید و چندین فایل مختلف را در یک زمان مدیریت کنید. فایل خروجی همچنان در کیفیت اصلی می‌باشد (به استثنای رزولوشن آن)، اما ۹۰ درصد حجم کمتری نسبت به نسخه اصلی آن دارد که به طور میانگین ۵۰۰ میلی ثانیه زمان می‌برد تا بارگذاری شود. به طور خلاصه، دیگر نیازی نیست که خیلی نگران دارایی‌های خود باشید، فقط آن‌ها را از Assetizer رد کنید و این دارایی‌ها آماده به کار خواهند بود. و البته، هر چیزی در Assetizer قابل سفارشی‌سازی است. شما می‌توانید قالب‌های خروجی مختلفی را انتخاب کنید و نام‌ها یا سایز خروجی پیشفرض را تغییر دهید.

چیزی که در ادامه راه است

ایده‌های زیادی برای بهبود Assetizer وجود دارند که می‌توانیم آن‌ها را پیاده‌سازی کنیم. مانند:

  • پشتیبانی ویدیو (همچین ویدیو به گیف)
  • تنظیمات پیشین برای شبکه اجتماعی و تبلیغات
  • برش تصویر
  • قالب‌های تصویر بیشتر
  • یک API برای تغییر شکل و بهینه‌سازی دارایی‌ها

منبع

دیدگاه‌ها و پرسش‌ها

برای ارسال نظر لازم است ابتدا وارد سایت شوید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید