۸ راه برای بهینه‌سازی رسانه‌های وب‌سایتتان به‌منظور بهبود عملکرد

ظاهر و حس وب‌سایت شما برای کاربر نهایی به همان اندازه سرعت بارگذاری آن اهمیت دارد. ترکیب طراحی وب عالی با عملکرد، تضمین می‌کند که هر وب‌سایتی که می‌سازید هم از نظر ظاهری فوق‌العاده و هم از نظر استفاده بی‌نقص باشد.

براساس فکر کنید با گوگل با افزایش زمان بارگذاری صفحه از یک ثانیه به سه ثانیه، نرخ ترک وبسایت شما می‌تواند تا ۳۲٪ افزایش یابد. این موضوع اهمیت کاربری آسان را در موفقیت وبسایت شما نشان می‌دهد: بدون تصاویر با کیفیت و زمان بارگذاری سریع، بازدیدکنندگان فرصت یا حوصله‌ی درگیر شدن با طراحی شما را نخواهند داشت.

تصاویر وبسایت، مانند عکس محصولات، آثار هنری یا فیلم‌های رویدادها، نقش مهمی در داستان طراحی وب شما برای بازدیدکنندگان دارند؛ اما اگر به درستی بهینه‌سازی نشوند، می‌توانند سرعت سایت شما را کاهش دهند. برای اطمینان از ظاهر و عملکرد عالی سایتتان، این روش‌های برتر بهینه‌سازی رسانه را دنبال کنید.

اندازه‌های تصویر مناسب را آپلود کنید.

همیشه سعی کنید بهترین کیفیت تصویر ممکن را آپلود کنید. برای شروع، این یعنی پیدا کردن تصاویری و رسانه‌هایی که هم ظاهر خوبی داشته باشند و هم سریع آپلود شوند.

به طور کلی، اندازه فایل شما نباید بیشتر از ۲۵ مگابایت (یا ۱۵ مگابایت برای GIF ها) باشد تا سرعت بارگذاری آن مناسب باشد. علاوه بر این، برای حفظ کیفیت تصویر، بهتر است از فایل فشرده نشده یا RAW استفاده کنید. این به فایلی گفته می‌شود که شامل تمام داده‌های اصلی تصویر است و حجم آن کاهش نیافته است.

در بیشتر موارد، از JPEG به جای PNG استفاده کنید.

تصاویر JPEG که رایج‌ترین فرمت هستند، معمولا بسیار کوچک‌تر از تصاویر PNG هم‌اندازه هستند؛ گاهی تا ده برابر کوچک‌تر. به دلیل حجم کمتر، معمولا JPEG را به PNG (گرافیک شبکه قابل حمل) ترجیح می‌دهید.

هنگام انتخاب بین JPG یا PNG برای سایت خود، به یاد داشته باشید که این دو فرمت به روش‌های متفاوتی تغییر اندازه می‌دهند. JPG هنگام تغییر اندازه و ارسال در وب، از الگوریتم‌هایی برای بازسازی تنها تقریب داده‌های اصلی استفاده می‌کند. این فرایند،فشرده سازی با اتلاف اطلاعاتیعنی بخشی از اطلاعات اصلی به طور دائم حذف یا «گم» می‌شود. هنگام تغییر اندازه تصاویر PNG، این فرمت از الگوریتمی استفاده می‌کند که امکان بازسازی کامل اطلاعات اصلی را فراهم می‌کند.فشرده‌سازی بدون اتلافلبخند

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

نکته حرفه‌ای:

با این حال، در موارد زیر، بهتر است PNG را به جای JPG انتخاب کنید.

• شما به شفافیت تصویر نیاز دارید.مثلاً می‌خواهید سوژه عکس یا پیش‌زمینه طوری به نظر برسد که انگار بریده شده است.
• به کیفیت و وضوح بسیار بالایی نیاز دارید.مانند تصاویری با متن‌های ریز (مثلاً یک عکس از صفحه نمایش) یا رنگ‌های غنی (مثلاً گرادینت‌ها).

وضوح تصاویر را با تنظیم میزان فشرده‌سازی پیش‌فرض آن‌ها بهبود ببخشید.

هنگام افزودن تصاویر به طراحی وب‌سایتتان، احتمالا متوجه می‌شوید که هر پلتفرمی که با آن کار می‌کنید، تنظیمات پیش‌فرض مخصوص به خود را برای فشرده‌سازی تصاویر دارد. بعد از آپلود فایل JPEG یا PNG خود به ویکس مثلاً در ویرایشگر، میزان فشرده‌سازی به صورت پیش‌فرض روی ۹۰٪ کیفیت تنظیم می‌شود. می‌توانید این تنظیم پیش‌فرض را تغییر دهید تا تصاویرتان واضح و با سرعت بالا بارگذاری شوند.

نگران بارگذاری تنبل نباشید، این موضوع خوبی است.

ممکن است هنگام پیمایش در سایت، متوجه شوید که تصاویر برای کسری از ثانیه قبل از بارگذاری کامل، تار هستند. نگران نباشید: این حالت «بارگذاری تنبل» نامیده می‌شود و جایگزینی برای تصویر اصلی (بهینه‌سازی شده) است.

برای سرعت بخشیدن به زمان بارگذاری و نمایش سریع محتوایی به بازدیدکنندگان، مرورگر ابتدا نسخه‌ی کوچک و تار شده‌ای از تصویر را نمایش می‌دهد. به عبارت دیگر، برای بهینه‌سازی تصاویر با ابعاد نمایشگر، تصاویر با کیفیت بالا را به صورت «تنبل» دانلود می‌کند. با پیمایش تصاویر در صفحه، تصاویر با وضوح بالا دانلود و جایگزین جایگزین تصویر با کیفیت پایین (LQIP) می‌شوند.

به جز بهبود تجربه کاربری، LQIP به سئو وب‌سایت شما نیز کمک می‌کند؛ زیرا به موتورهای جستجو تصاویر شاخص‌گذاری شده ارائه می‌دهد، نه تصویری خالی یا آیکون تصویر خراب.

چه زمانی از SVG و چه زمانی از PNG استفاده کنیم؟

گرافیک برداری مقیاس‌پذیر یا SVGها، با فرمت مبتنی بر XML ارائه می‌شوند و از فرمول‌های ریاضی برای ساخت تصاویری با کیفیت بالا استفاده می‌کنند.

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

تصویرهای SVG در هر رزولوشن و اندازه‌ای، حتی با تغییر ابعاد صفحه نمایش، واضح و شفاف باقی می‌مانند. در مقایسه‌ی بار پردازشی ناشی از اندازه‌ی تصویر، به‌جای فرمت‌های تصویری پیکسلی مانند PNG از SVG استفاده کنید، مگر اینکه SVGبسیارپیچیده (مثلاً یک تصویر SVG از خط ساحلی نروژ) و ابعاد واقعی عنصر در مقایسه با تصویر، کوچک است.

نکته حرفه‌ای

برای استفاده‌ی بهینه از تصاویر SVG در سایت خود، فایل‌های SVG با وزن حداکثر۲۵۰ کیلوبایت

همچنین، از محتوایی که ممکن است باعث ایجاد مشکلات امنیتی یا خرابی مرورگر شود خودداری کنید. به عنوان مثال، انیمیشن‌های SMIL حاوی برخی محتواهای ناامن هستند و عملکرد زمان اجرا را مختل می‌کنند؛ به همین دلیل مرورگرهای مدرن از آن‌ها پشتیبانی نمی‌کنند.

فرمت‌های ویدیویی مناسب را انتخاب کنید

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

به طور کلی، حجم ویدئوهای آپلود شده در سایت شما حداکثر باید 1 گیگابایت باشد. قبل از آپلود، فرمت‌های ویدئویی سازگار با پلتفرم وب‌سایت خود را بررسی کنید. برخی از رایج‌ترین فرمت‌ها شامل AVI، MPEG، MPG، MPE، MP4، MKV، WebM، MOV، OGV، VOB، M4V، 3GP، DivX، XVID، MXF، WMV، M1V، FLV و M2TS هستند.

رنگ مناسب پس‌زمینه ویدیو را انتخاب کنید

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

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

مرورگرهای مختلف از فضای رنگی متفاوتی استفاده می‌کنند؛ بنابراین، وقتی از یک رنگ به‌عنوان پس‌زمینه ویدئو و همان رنگ به‌عنوان پس‌زمینه صفحه استفاده می‌کنید، این رنگ‌ها در مرورگرهای مختلف ممکن است متفاوت به نظر برسند. یکی از راه‌حل‌های ممکن برای غلبه بر این اختلاف رنگ، تعریف پس‌زمینه شفاف برای ویدئو است.

بیشتر ویدیو را به جای گیف انتخاب کنید.

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

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

در وب‌سایت خود در این موارد از GIF استفاده کنید:

اگر انیمیشن شما چند فریم کوتاه و ابعاد کوچکی دارد (مثلاً ۱۰۰ در ۱۰۰ پیکسل)، از فرمت GIF استفاده کنید. همچنین اگر ویدئوی شما متن دارد و می‌خواهید خوانایی آن حفظ شود، از GIF استفاده کنید.

طراحی وب‌سایت‌هایی که هم ظاهر زیبایی داشته باشند و هم عملکرد فوق‌العاده‌ای از خود نشان دهند.

با تکیه بر ویکس یعنی پایه‌ها آماده است و عملکرد به قیمت از دست رفتن ظاهر و سبک سایت شما تمام نمی‌شود.

هر بار که تصویری به وب‌سایت خود اضافه می‌کنید، Wix به‌طور خودکار آن را بهینه‌سازی می‌کند تا کیفیت بالا و سرعت بارگذاری سریع را روی هر دستگاهی تضمین کند. نیازی به نگران بودن در مورد تغییر اندازه، فشرده‌سازی یا تبدیل تصاویرتان به فرمت‌های مدرن مانند WebP نیست—Wix همه چیز را برای شما انجام می‌دهد.

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

دربارهٔ ویكس ویکس، پلتفرم پیشرو در ساخت وب‌سایت است که مورد اعتماد بیش از ۲۳۰ میلیون کاربر در سراسر جهان قرار دارد. از سال ۲۰۰۶، ویکس به کسب‌وکارها، کارآفرینان، شرکت‌ها و خالقان محتوا توانایی ساخت، مدیریت و رشد حضور آنلاین خود را از یک نقطه می‌دهد