سلام به همه همراهان گرامی و دوستان عزیز. این هفته هم مطابق برنامه هفتگیمون قراره درباره یکی دیگه از راهکارهای بهبود کارایی در فرانتاند صحبت کنیم. اگر تا الان این سری از پستها رو دنبال نکردین، پیشنهاد میکنم از پست اول این مبحث شروع کنین. اگر هم پست قبلی بهبود کارایی در فرانتاند رو از دست دادید میتونین از طریق پیوند زیر بهش دسترسی پیدا کنین:
تصاویر استفاده شده در رابط کاربری وبسایت، باید بدون تغییر محسوس در محتوا، معنی قابل ارائه به کاربر و کیفیت، بهینه سازی، فشرده و کم حجم شوند. طراح رابط کاربری در هنگام طراحی و توسعه دهنده فرانتاند در هنگام کد نویسی رابط کاربری باید به این نکته توجه داشته باشند که تصاویر مورد استفاده باید متناسب با موقعیت و نحوه نمایش بهینه سازی شوند.
تصاویری که بهینه سازی و فشرده شدهاند سریعتر دانلود شده و به دلیل اینکه حجم کمتری دارند، زمان کمتری را جهت پردازش پردازنده (برای نمایش به کاربر) نیاز دارند.
حتما تا به اینجا متوجه شدهاید که یکی از راههای افزایش سرعت در نمایش وبسایت، پایین آوردن حجم منابع مورد استفاده (فایلهای جاوا اسکریپت، سی اس اس، تصاویر و ...) میباشد. این امر از منطق به دور نیست چرا که هر چه حجم هر کدام از منابع کمتر باشد سریعتر دانلود میشود. وبسایتها مانند اپلیکیشنها نیستند تا کاربر در ابتدای امر منابع مورد استفاده در آنها را دانلود کرده و برای اجرای آن نیاز به اینترنت نداشته باشند. برعکس، وبسایتها بر روی بستر اینترنت قرار دارند و کاربران هم از طریق سیستم عاملهای مختلف (ویندوز، مک اواِس، لینوکس، اندروید و ...)، مرورگرهای مختلف (کروم، سافاری، فایرفاکس و ...)، دستگاههای مختلف (که از نظر مشخصات با هم بسیار تفاوت دارند و حتی معماری مشخصی برای پردازنده و ... ندارند) و از سرعتهایی پایین تا بالای اینترنت به این وبسایتها دسترسی دارند. به همین دلیل است که حجم فاکتور مهمی برای افزایش سرعت وبسایت است چرا که محتوا سریعتر دانلود شده و به در نهایت سریعتر به کاربر نمایش داده میشوند.
اما حجم کمتر همه چیز نیست. برخی کدهای جاوا اسکریپت خیلی کم حجم هستند اما بخاطر محتوایی که دارند ممکن است مدت زمان زیادی از رشته اصلی پردازنده شما اشغال کنند و عملا وبسایت شما را کند کنند. فرض کنید تصویری دارید که اندازه بسیار بالایی دارد (مثلا 8000 پیکسل در 8000 پیکسل) و به طبع آن حجم بالایی را نیز دارد. اما جدا از مبحث حجم، زمانی که این تصویر برای یک کاربر نهایی برروی وبسایتی به نمایش در بیاید، پردازنده و پردازنده گرافیکی برای رسم این تصویر توان بیشتری را مصرف میکنند. حال اگر بازدید کننده شما یک کاربر با یک گوشی میانرده اندرویدی باشد احتمالا در زمان نمایش این تصویر، برای لحضاتی با صفحه وبسایت فریز شده مواجه میشود که این مورد اصلاً و ابداً خوب نیست.
پس ما به دو دلیل به سراغ بهینهسازی و فشرده سازی تصاویر میرویم. حجم کمتر و پردازش راحتتر.
برخی از تصاویر قابل جایگزینی با یک نمونه بهتر هستند. به موارد زیر توجه کنید:
اما اگر هر کدام از کارهای بالا برای شما امکان پذیر نبود، دستور عمل زیر را برای بهینه سازی و فشردهسازی تصاویر استفاده کنید.
انتخاب مناسب نوع و فرمت تصویر
انواع فرمتهای متخلف برای تصویر وجود دارد. از فرمت PNG که یک فرمت بدون فشرده سازی است تا فرمتهای JPEG و GIF و WEPP. اینکه شما از کدام یک از فرمتها استفاده کنید کاملا وابسته به نوع و محتوای تصویر است. مثلا تصاویری که شفاف هستند و پس زمینه ندارند یا تصاویری که از رنگهای محدود در آن استفاده شده است از فرمت PNG استفاده میشود. در مقابل تصاویری که خروجی دوربین عکاسی هستند و رنگهای موجود در تصویر بسیار زیاد هستند از فرمت JPEG استفاده کنید. از GIF هم برای تصاویر متحرک استفاده میشود. فرمت WEPP نیز یک فرمت جدید است که هم به صورت فرمت فشردهساز و هم فرمت بدون فشردهسازی مورد استفاده قرار میگیرد.
استفاده نادرست از هر فرمت میتواند بی دلیل حجم تصویر را بالا ببرد. مسئله فقط فشرده سازی نیست. برخی مواقع خروجی PNG که یک فرمت بدون فشرده سازی است حجم کمتری نسبت به خروجی JPEG با فشرده سازی دارد، البته که در اکثر مواقع عکس این موضوع درست است اما در مجموع یک فرمول خاص و مشخصی ندارد بلکه کاملا وابسته به پارامترهای مختلف آن تصویر است. به عنوان نمونه در تصویر زیر مشاهده میکنید که خروجی JPEG یک تصویر حدود 80 درصد حجم کمتری نسبت به خروجی PNG همان تصویر دارد.
همانطور که مشاهده میکنید فرمت JPEG این تصویر بدون تغییر محسوس در کیفیت، 81 درصد حجم کمتری نسبت به نمونه PNG دارد.
حذف اطلاعات متای تصاویر
دادههای متا (meta data) در واقع دادههای مرتبط با تصویر هستند که در داخل تصویر ذخیره میشوند. برای مثال تصویری که شما با تلفن همراه خود میگیرید حاوی دادههایی مانند تاریخ و زمان ثبت تصویر، اطلاعات دوربین ثبت کننده تصویر و ... میباشد که وجود آنها برای نمایش تصویر در وبسایتها ضرورتی ندارد و فقط باعث بالاتر رفتن حجم این تصاویر میشود. این اطلاعات در حدی هستند که گاهی اوقات حجم آنها به 40 کیلوبایت نیز میرسد و شما با حذف این دادهها میتوانید حجم تصویر خود را 40 کیلوبایت کمتر کنید. شما میتوانید از ابزارهای آنلاین برای نمایش، ویرایش و حذف این دادهها استفاده کنید.
تغییر اندازه تصاویر
تغییر اندازه تصاویر یکی از موثرترین راهها برای کاهش حجم تصاویر است. تصور کنید شما یک تصویر به طول و عرض 2000 پیکسل برای نمایش در یک از قسمت از وبسایتتان دارید. این قسمت از وبسایت یک جعبه به طول 500 پیکسل (در بزرگترین حالت خود) میباشد. توجه کنید که هیچ نیازی نیست که تصویری به طول 2000 پیکسلی را در یک جعبه به طول 500 پیکسل به نمایش بگذارید. شما به راحتی میتوانید سایز این تصویر را مطابق اندازه جعبه خود تغییر دهید و در نهایت از حجم تصویر خود بکاهید. یادتان باشد هیچ نیازی به نمایش یک تصویر بزرگتر در یک جعبه کوچکتر وجود ندارد و شما باید مطابق با اندازه محل نمایش تصویر، اندازه تصویر خود را تنظیم کنید.
کاهش کیفیت تصویر
برخی از فرمتها مانند فرمت JPEG این قابلیت را به شما میدهند تا کیفیت تصویر خود را انتخاب کنید و مطابق این کیفیت یک خروجی از تصویر دریافت کنید. شما با استفاده از این خصوصیت به راحتی میتوانید حجم تصاویر خود را کاهش دهید. هیچ نیازی به خروجی با بالاترین کیفیت (100) نیست بلکه میتوان تصاویر را با کیفیت پایینتر (در محدوده 60 تا 80) نیز خروجی گرفت. البته باید توجه کنید که هر چه این رقم پایینتر باشد کیفیت تصویر شما نیز کمتر میشود اما شما میتوانید عددی را برای تصویر خود پیدا کنید که با این تغییر کیفیت به چشم کاربر نهایی محسوس نباشد. در تصاویر زیر 3 نمونه از خروجی با کیفیتهای مختلف برای شما نشان داده شده است.
همانطور که مشاهده میکنید، با کاهش 20 درصدی کیفیت بدون تغییر محسوس در کیفیت تصویر نمایش داده شده میتوان حجم تصویر را تا 74 درصد کاهش داد. تصویر با کیفیت 25% حتی حجم کمتری دارد اما در مقابل آن کیفیت پایین تصویر کاملا مشهود است در نتیجه به عنوان یک عکس مناسب برای نمایش کاربردی ندارد!
فشرده سازی تصاویر
فشرده سازی یکی دیگر از راههای کاهش حجم تصویر میباشد که معمولا با تغییر اندازه یا تغییر کیفیت تصویر به اشتباه گرفته میشود. فشرده سازی در واقع به معنی کاهش حجم تصویر بدون تغییر در اندازه و کیفیت تصویر است. برای مثال شما از طریق این وبسایت میتوانید حجم تصاویر PNG خود را تا 75 درصد کاهش دهید در صورتی که این فرمت یک فرمت بدون فشرده سازی است و این تغییر حجم هیچ تاثیری در کیفیت تصویر خروجی ندارد.
مطابق راهکارهایی که تا اینجا با آنها آشنا شدید، به راحتی میتوانید حجم تصاویر مورد استفاده در وبسایت مورد نظرتان را کاهش دهید و در نتیجه حس بهتری را در تجربه کاربری به کاربران خود منتقل کنید. یکی از بهترین ابزارهای آنلاین که برای فشرده سازی، بهینه سازی، تغییر در اندازه، کیفیت و فرمت تصاویر استفاده میشود squash است که توسط تیم گوگل پیاده سازی شده است. شما با استفاده از این ابزار میتوانید به راحتی و بین دو فرمت، دو نوع تنظیمات متخلف و یا تصویر اصلی و تصویر فشردهسازی شده خود مقایسه ظاهری انجام دهید تا بتوانید بهترین تنظیمات ممکن را از تصویر مورد نظر خود بگیرید. پیشنهاد میکنم حتما از این ابزار استفاده کنید.
در این پست تلاش کردیم تا شما را با راهکارهای مختلفی برای کاهش حجم تصاویر آشنا کنیم. محتواهای تصویری بین 60 تا 85 درصد از ترافیک اینترنت را تشکیل میدهد و حتما کاهش حجم آنها باعث افزایش سرعت وبسایتتان میشود.
در پست بعدی در مورد HTTP Caching صحبت خواهیم کرد. اگر علاقهمندید تا پست بعدی ما را بخوانید، از این لینک استفاده کنید.
اگر در مورد این مطلب سوال، نظر یا پیشنهادی دارید لطفا با ما به اشتراک بگذارید. همچنین منتظر پستهای آتی ما در زمینه بهبود کارایی در فرانتاند باشید.
