۸ روش برای بهینه سازی تصاویر سایت
ظاهر وبسایت شما و حسی که از آن به کاربر نهایی منتقل میشود، درست به اندازه سرعت بارگذاری، اهمیت دارد. باید ظاهر طراحی شما به اندازه نحوه عملکرد آن خوب باشد و به چشم بیاید و اصطلاحاً، مو لای درزش نرود. به همین خاطر است که بهینه سازی تصاویر سایت اهمیت پیدا میکند.
در این صفحه میخوانید:
روشهایی برای بهینه سازی تصاویر سایت
با توجه به نرم افزار Think With Google، وقتی زمان بارگذاری صفحه از ۱ ثانیه به ۳ ثانیه افزایش مییابد، میزان بازدیدکنندگان وب سایت شما میتواند ۳۲ درصد افزایش یابد. این امر خود نشاندهنده این است که تا چه میزان میتواند تعداد بازدیدکنندگان تضمینکننده موفقیت وب سایت شما باشد. بدون داشتن تصاویری با کیفیت و زمان بارگذاری سریع، بازدیدگنندگان برای بازدید از وب سایت شما وقت نمیگذارند چراکه زمان و حوصله برای جذب شدن به طراحی شما را ندارند.
همانطور که میدانید تصاویر وب سایت، مانند عکسهای محصولات، آثار هنری یا ویدیوهای مربوط به رویدادها، نقش بزرگی در داستانی که طراحی وب شما به بازدیدکنندگان منتقل میکند، ایفا میکنند. اما این را در نظر داشته باشید که اگر این عناصر بصری به درستی بهینه سازی نشده باشند، پتانسیل کاهش سرعت سایت شما را خواهند داشت. ما در این مقاله به ۸ روش برای بهینه سازی تصاویر سایت اشاره خواهیم کرد تا با بهره گیری از اطلاعات مربوطه بتوانید وب سایتی عالی داشته باشید و حتی بهتر از قبل عمل کنید.
تصویر را در اندازههای مناسب آپلود کنید.
این طبیعی است که همه دوست دارند بهترین کیفیت تصویر موجود را آپلود کنند. برای شروع باید به سراغ یافتن تصاویر و رسانههایی بروید که امکان این کار را به شما میدهند. تصاویری که هم کیفیت بسیار عالی دارند و هم میشود به سرعت آنها را آپلود کرد.
به طور کلی، برای اطمینان از بارگذاری کارآمد، فایل شما نباید بزرگتر از ۲۵ مگابایت یا ۱۵ مگابایت در مورد GIFها باشد. به علاوه، برای حفظ کیفیت بصری، شاید بخواهید با یک فایل فشرده یا RAW، کار را شروع کنید که شامل تمام دادههای اولیه تصویر میشود و اندازه بایت آن کاهش نیافته است.
در بیشتر موارد، JPG را به جای PNG انتخاب کنید.
رایج ترین فرمت تصاویر JPG معمولاً بسیار کوچکتر از تصاویر PNG در همان شکل هستند. گاهی اوقات میتوانند حتی تا ۱۰ برابر کوچکتر باشند. به همین دلیل شما را ترغیب میکنند که به دلیل سایز کوچکتر از JPG استفاده کنید.
هنگامی که در تصویرسازیهای سایت خود میخواهید بین انتخاب JPG یا PNG تصمیم بگیرید، به خاطر داشته باشید که اندازه این دو فرمت با روش مختلفی قابل تغییر هستند. JPG از الگوریتمهایی استفاده میکند تا تنها تقریبی از دادههای اصلی را در صورت تغییر اندازه و تحویل در وب، بازسازی کند. به این کار، فشردهسازی با اتلاف میگویند، بدان معنی که برخی از دادههای اصلی برای همیشه حذف میشوند یا از دست میروند. وقتی اندازه PNGها تغییر میکند، قالب از یک الگوریتم فشرده سازی استفاده مینماید که اجازه میدهد تا دادههای اصلی به طور کامل بازسازی شوند. به این کار فشرده سازی نیمه اتلافی میگویند، بدان معنا که دادههای اصلی کمتری از دست میروند.
در اصل زمانی که میخواهید کیفیت تصاویر خود را حفظ کنید، ممکن است PNG را انتخاب کنید. که درواقع به معنای کار با فایلهای بزرگتر است که به طور بالقوه میتواند به عملکرد سایت شما آسیب برساند.
یک توصیه حرفه ای برای بهینه سازی تصاویر سایت
با این حال، در موارد زیر، بهتر است شما PNG را به جای JPG انتخاب کنید:
- وقتی که شما نیاز به شفافیت در تصویر دارید. (مثلاً میخواهید این طور به نظر برسد که سوژه تصویر یا پیش زمینه گویی بریده شده است).
- وقتی شما به کیفیت و وضوح بسیار بالا نیاز دارید، مانند تصاویر با متن کوچک (مثلاً یک اسکرین شات) یا رنگهای خیلی غنی شده مربوط به نمایش شیبهای روی نقشهها.
فشرده سازی پیش فرض تصاویر خود را برای بهبود وضوح تنظیم کنید.
هنگامیکه تصاویر را به طراحی وب خود اضافه میکنید، احتمالاً متوجه خواهید شد که هر پلتفرمی که با آن کار میکنید، پیش فرض خود را در مورد فشرده سازی تصاویر دارد. برای مثال، پس از آپلود فایل JPEG یا PNG خود در ویرایشگر Wix، فشرده سازی آن را به کیفیت پیش فرض ۹۰ درصدی، کاهش میدهد. میتوانید این گزینه تنظیم پیش فرض را به دلخواه خود تغییر دهید و مجدد تنظیم کنید تا مطمئن شوید تصاویرتان واضح به نظر میرسند و سریع بارگذاری میشوند.
در مورد بارگذاری که سرعتش پائین است و کند عمل میکند، نگران نباشید چراکه اصلاً چیز بدی نیست.
همانطور که در سایت خود بالا و پایین میروید، ممکن است متوجه شوید که تصاویر قبل از بارگیری کامل به اندازه یک میکروثانیه، تار به نظر میرسند. نترسید، این پدیده به عنوان بارگذاری تنبل (کم سرعت) شناخته میشود و یک مکان مخصوص نگهداری برای تصویر واقعی یا همان بهینه شده به حساب میآید.
تصور کنید که شما میخواهید زمانی که بازدیدکنندگان به سایت شما وارد میشوند، بارگذاری سریعتر انجام شود. این ماجرا، این امکان را به شما میدهد که به محض ورود تصویری روی صفحه نمایش نشان داده شود. با استفاده از همین بارگذاری تنبل، مرورگر ابتدا یک نسخه کوچک و تار از تصویر را نمایش میدهد. به عبارت دیگر “تنبل” تصاویر را با بهترین کیفیت دانلود میکند تا آنها را برای ابعاد نمایشگر بهینه کند. هنگامیکه تصاویر در حال آماده شدن برای نمایش هستند، با وضوح بالا دانلود میشوند و جایگزین مکان یابی تصویر با کیفیت پایین میگردند. این تصاویر با کیفیت پایین یا همان LQIP، چیزی است که در حال حاضر نمایش داده میشود.
جدا از بهبود تجربه کاربر، LQIP به SEO وب سایت شما نیز کمک میکند، زیرا به جای نماد تصویر خالی یا شکسته، تصاویر نمایه شده را در اختیار موتورهای جستجو قرار میدهد.
بدانید چه زمانی از SVG به جای PNG استفاده کنید.
گرافیکهای برداری مقیاس پذیر، همچنین به عنوان SVG شناخته میشوند و در قالبی مبتنی بر XML ارائه میگردند. از فرمولهای ریاضی برای ساخت تصاویر با کیفیت بالا استفاده میشود.
یک SVG دارای محتویات بردار است که به مرورگر دستور میدهد که چه چیزی را از طریق شبکه پیچیده ای از خطوط، نقاط، اشکال و الگوریتمها نمایش دهد. این امر باعث میشود SVG انعطاف پذیر تر از PNG باشد و کارآیی بیشتری پیدا کند. چراکه اندازه آن به تعداد عناصر و “گرهها” موجود در آن بستگی دارد. PNGها، فرمتی مبتنی بر شطرنج دارند، درست برخلاف فرمت برداری SVG و از تعداد ثابتی شبکههای پیکسلی تشکیل شده اند که کیفیت بالایی داشته، اماتغییر اندازه آنها دشوار است.
SVGها در هر وضوح و اندازهای به همان شکلی که بزرگشان کردید واضح باقی میمانند، حتی اگر ابعاد ویوپورت تغییر کند. هنگام در نظر گرفتن بار عملکرد اندازه تصویر، به جای فرمتهای شطرنجی مانند PNG از SVG استفاده کنید، مگر اینکه SVG بسیار پیچیده باشد. به طور مثال وقتی یک SVG که خط ساحلی نروژ را نشان میدهد در تصویر شماست و ابعاد واقعی عنصر در مقایسه با تصویر کوچک است.
یک توصیه حرفه ای برای بهینه سازی تصاویر سایت
برای استفاده حداکثری از SVG در سایت خود، فایلهای SVG را با وزن حداکثر ۲۵۰ کیلو بایت آپلود کنید.
علاوه بر این، حتماً از محتوایی که ممکن است باعث مشکلات امنیتی یا خرابی مرورگر شود، اجتناب بورزید. به عنوان مثال، انیمیشنهای SLIM حاوی محتوای نا امن هستند و به عملکرد زمان اجرا آسیب میرسانند، بنابراین مرورگرهای مدرن از آنها پشتیبانی نمیکنند.
فرمتهای ویدئویی مناسب را انتخاب کنید.
با محدوده ای که زوایای وسیع تری دارد، پیامهای طولانیتر، انیمیشنهای سرگرم کننده و موارد دیگر، ویدیوها به بازدیدکنندگان وب سایت کمک میکنند تا بدون زحمت با محتوای بیشتری درگیر شوند. تصاویر سایتی که طراحی میکنید، چه تبلیغاتی باشد و چه صرفاً تزئینی، به این قوانین اساسی پایبند باشید. اگر چنین کنید مطمئن باشید که ویدیوهای شما با بالاترین کیفیت ظاهر میشوند، بدون اینکه بر سرعت بارگذاری صفحه تأثیر بگذارند.
به عنوان یک قاعده کلی، ویدیوهای آپلود شده در سایت شما باید حداکثر ۱ گیگابایت باشد. قبل از آپلود ویدیوی خود، بررسی کنید که کدام فرمتهای ویدیویی با پلتفرم وب سایت مورد استفاده شما سازگار است. برخی از محبوبترین فرمتها عبارتند از: MP4، MKV، WebM، MOV، OGV، VOB،
M4V، ۳GP، DivX، XVID، MXF، WMV، M1V، FLV و M2TS.
از پس زمینههای رنگی مناسب، برای کارتان استفاده کنید.
زمانی که یک ویدیو را به سایت خود اضافه میکنید، به یاد داشته باشید که بسته به دستگاه یا مرورگری که استفاده میکنند، ممکن است قسمتهایی از ویدیو برای برخی از بازدیدکنندگان پنهان شده یا به شکل بریده دیده شود. با این حال، به نظر میرسد که خود محتوای ویدیویی تمام ابعاد مؤلفه را پوشش میدهد.
اجزای ویدیو نه تنها بر اساس قسمتهای قابل مشاهده، بلکه بر پایه ابعاد کامل رسانه در حال آپلود محاسبه میشوند. در این رابطه، شاید بخواهید که به پس زمینه، یک فضای رنگی اضافه کنید تا به بازدیدکنندگان بهترین تجربه زیبایی شناختی را ارائه دهید.
مرورگرهای مختلف از فضاهای رنگی متفاوتی استفاده میکنند، بنابراین وقتی از یک رنگ به عنوان پس زمینه ویدیو استفاده میکنید و همان رنگ را به عنوان پس زمینه صفحه اصلی انتخاب مینمایید، این فضاهای رنگی ممکن است در مرورگرهای مختلف متفاوت به نظر برسند. یکی از راه حلهای ممکن برای غلبه بر تنوع رنگها، تعریف یک پس زمینه شفاف برای ویدیو است.
در شرایط زیر از GIFهای موجود استفاده کنید.
انیمیشن ساده یک GIF میتواند توجه بازدیدکنندگان را به خود جلب کند و طراحی وب شما را ارتقاء دهد. با این حال، GIFها دارای چند اشکال عمده هستند؛ شما نمیتوانید تعداد باز پخشهای آنها را در سایت خود کنترل کنید. این ایراد میتواند به عملکرد، دسترسی و تجربه کلی کاربر آسیب وارد کند. GIFها، تنها زمانی شروع به پخش شدن میکنند که همه فریمهای محتوا در دسترس باشند. از آنجایی که نمیتوانید GIFها را برای پخش وب بهینه سازی کنید، استفاده از آنها میتواند سرعت بارگذاری صفحه را به میزان قابل توجهی کاهش دهد.
اگر بین استفاده از یک GIF و یک ویدیو، دو به شک هستید، بهتر است تصمیم شما، انتخاب دومی باشد. حسن این کار در پشتیبانی نامحدود تعداد فراوان پالتهای رنگی میباشد، به علاوه میزان پخش آنها قابل کنترل است و در عین حال، میتوانند برای پخش وب، بهینه شوند. همچنین به محض این که اولین فریم در دسترس قرار میگیرد، شروع به پخش در وب میکند.
توصیه ما به شما این است که درون وب سایت خود، در موارد زیر حتماً از GIF استفاده کنید:
- اگر انیمیشن محتوای شما حاوی چند فریم و ابعاد کوچک است مثلاً ۱۰۰×۱۰۰، باید از GIF استفاده کنید.
- وقتی محتوای متنی در ویدیوی خود دارید و میخواهید خوانایی آن را حفظ کنید.
دیدگاهتان را بنویسید