ظاهر وب سایت شما به اندازه سرعت بارگذاری آن برای کاربر مهم است. هماهنگی طراحی وب عالی با عملکرد مناسب تضمین می کند که هر سایتی که می سازید برای هر شخصی تجربه خوبی را به همراه داشته باشد. مطابق با نظر گوگل، با افزایش زمان بارگذاری صفحه از یک به سه ثانیه، نرخ پرش وب سایت شما می تواند 32 درصد افزایش یابد. این امر بر اهمیت حیاتی قابلیت استفاده برای موفقیت وب سایت شما تأکید می کند. و این می تواند با بهینه سازی تصاویر سایت صورت بگیرد.
بدون تصاویری با کیفیت و زمان بارگذاری سریع، بازدیدکنندگان به سادگی فرصت یا حوصله ای برای درگیر شدن با طراحی شما نخواهند داشت. در حالی که تصاویر وب سایت – مانند عکس های محصول، آثار هنری یا ویدیوهای رویداد – نقش بزرگی در داستانی که طراحی وب شما به بازدیدکنندگان منتقل می کند بازی می کند، این عناصر بصری اگر به درستی بهینه نشده باشند، پتانسیل کاهش سرعت سایت شما را دارند. در این مقاله بهترین شیوه ها را برای بهینه سازی تصاویر سایت دنبال می شود تا مطمئن شوید که سایت شما عالی به نظر می رسد و حتی بهتر عمل می کند.
راه های بهینه سازی تصاویر سایت
1. اندازه های مناسب تصویر را آپلود کنید
شما همیشه دوست دارید تصویر با بهترین کیفیت موجود را آپلود کنید. برای شروع، این به معنای یافتن تصاویر و رسانه هایی است که هم عالی به نظر می رسند و هم به سرعت آپلود می شوند.
به طور کلی، برای اطمینان از بارگذاری کارآمد، فایل شما نباید بزرگتر از 500 کیلوبایت (یا حداکثر 1 مگابایت در مورد GIFS) باشد. علاوه بر این، برای حفظ کیفیت بصری خود، باید با یک فایل فشرده یا RAW عکس خود را بهینه کنید. این به فایلی اشاره دارد که شامل تمام داده های اصلی تصویر است و اندازه بایت آن کاهش نیافته است.
2. در بیشتر موارد، JPG را به PNG انتخاب کنید
تصاویر JPG – رایج ترین فرمت هستند و معمولاً بسیار کوچکتر از تصاویر PNG معادل هستند. گاهی اوقات تا 10 برابر کوچکتر. به دلیل اندازه کوچکتر، معمولاً JPG را به جای PNG (گرافیک شبکه قابل حمل) انتخاب کنید. و این دومین راه حل بهینه سازی تصاویر سایت است.
هنگام تصمیم گیری بین JPG یا PNG در سایت خود، به خاطر داشته باشید که اندازه این دو فرمت به روش های مختلفی تغییر می کند. JPG از الگوریتم‌هایی استفاده می‌کند تا تنها تقریبی از داده‌های اصلی را در صورت تغییر اندازه و تحویل در وب بازسازی کند. به این می گویند فشرده سازی با اتلاف، که به این معنی است که برخی از داده های اصلی برای همیشه حذف شده یا “از بین رفته اند.” هنگامی که اندازه PNG ها تغییر می کنند، قالب از یک الگوریتم فشرده سازی استفاده می کند که به داده های اصلی اجازه می دهد تا کاملاً بازسازی شوند (معروف به فشرده سازی بدون تلفات).
در اصل، زمانی که می خواهید کیفیت تصاویر خود را حفظ کنید، ممکن است PNG را انتخاب کنید. مبادله در اینجا به معنای کار با فایل های بزرگتر است که به طور بالقوه می تواند به عملکرد سایت شما آسیب برساند.
📌 نکته حرفه ای:
با این حال، در موارد زیر، شما می می توانید یک PNG را به جای JPG انتخاب کنید.
- شما نیاز به شفافیت در تصویر دارید (مثلاً می‌خواهید سوژه تصویر یا پیش‌زمینه، طوری به نظر برسد که گویی بریده شده است).
- شما به کیفیت و وضوح بسیار بالا نیاز دارید مانند تصاویر با متن کوچک (مثلاً یک اسکرین شات) یا رنگ‌های غنی (مثلاً شیب).
3. فشرده سازی پیش فرض تصاویر خود را برای بهبود وضوح تنظیم کنید
هنگامی که تصاویر را به طراحی وب خود اضافه می کنید، احتمالاً متوجه خواهید شد که هر پلتفرمی که با آن کار می کنید پیش فرض خود را در مورد فشرده سازی تصاویر دارد. پس از آپلود فایل JPEG یا PNG خود در Wix به عنوان مثال، ویرایشگر، فشرده سازی خود را به کیفیت پیش فرض 90٪ کاهش می دهد. می‌توانید این تنظیم پیش‌فرض را تنظیم کنید تا مطمئن شوید تصاویرتان واضح به نظر می‌رسند و سریع بارگذاری می‌شوند و در بهینه سازی تصاویر سایت موثر واقع است.
4. در مورد بارگذاری تنبل استرس نداشته باشید
همانطور که در سایت خود پیمایش می کنید، ممکن است متوجه شوید که تصاویر قبل از بارگیری کامل برای یک میکروثانیه تار به نظر می رسند. هیچ ترسی نداشته باشید: این به عنوان بارگذاری تنبل شناخته می شود و یک مکان نگهدار برای تصویر واقعی (بهینه شده) است.
به منظور سرعت بخشیدن به زمان بارگذاری و نشان دادن چیزی به بازدیدکنندگان به محض ورود به سایت شما، مرورگر ابتدا یک نسخه کوچک و تار از تصویر را نمایش می دهد. به عبارت دیگر، “تنبل” تصاویر را با بهترین کیفیت دانلود می کند تا آنها را برای ابعاد نمایشگر بهینه کند. هنگامی که تصاویر به سمت نمایش حرکت می کنند، تصاویر با وضوح بالا دانلود می شوند و جایگزین مکان یابی تصویر با کیفیت پایین (LQIP) می شوند که در حال حاضر نمایش داده می شود.
جدا از بهبود تجربه کاربر، LQIP به سئوی وب سایت شما نیز کمک می کند، زیرا به جای نماد تصویر خالی یا شکسته، تصاویر نمایه شده را در اختیار موتورهای جستجو قرار می دهد.
5. بدانید چه زمانی از SVG در مقابل PNG استفاده کنید
گرافیک های برداری مقیاس پذیر، همچنین به عنوان SVG شناخته می شوند، در قالبی مبتنی بر XML ارائه می شوند. از فرمول های ریاضی برای ساخت تصاویر با کیفیت بالا استفاده می شود. این راه حل بسیار بر بهینه سازی تصاویر سایت موثر است.
یک SVG دارای محتویات بردار است که به مرورگر دستور می دهد که چه چیزی را از طریق شبکه پیچیده ای از خطوط، نقاط، اشکال و الگوریتم ها نمایش دهد. این باعث می شود SVG انعطاف پذیرتر از PNG باشد، زیرا اندازه آن به تعداد عناصر و “گره ها” موجود در آن بستگی دارد. PNG ها فرمت های مبتنی بر شطرنجی هستند (برخلاف فرمت برداری SVG) و از تعداد ثابتی از شبکه های پیکسلی تشکیل شده اند که کیفیت بالایی دارند، اما تغییر اندازه آنها دشوار است.
SVGها در هر وضوح و اندازه ای واضح باقی می مانند، حتی اگر ابعاد ویوپورت تغییر کند. هنگام در نظر گرفتن بار عملکرد اندازه تصویر، به جای فرمت های شطرنجی مانند PNG از SVG استفاده کنید، مگر اینکه SVG باشد. بسیار پیچیده (به عنوان مثال یک SVG که خط ساحلی نروژ را نشان می دهد) و ابعاد واقعی عنصر در مقایسه با تصویر کوچک است.
📌 نکته حرفه ای:
برای استفاده حداکثری از SVG در سایت خود، فایل های SVG را با وزن حداکثر250 کیلوبایت آپلود کنید.
علاوه بر این، حتما از محتوایی که ممکن است باعث مشکلات امنیتی یا خرابی مرورگر شود، اجتناب کنید. به عنوان مثال، انیمیشن های SMIL حاوی محتوای ناامن هستند و به عملکرد زمان اجرا آسیب می رسانند، بنابراین مرورگرهای مدرن از آنها پشتیبانی نمی کنند.
6. فرمت های ویدئویی مناسب را انتخاب کنید
با محدوده زاویه وسیع‌تر، پیام‌های طولانی‌تر، انیمیشن‌های سرگرم‌کننده و موارد دیگر، ویدیوها به بازدیدکنندگان وب‌سایت کمک می‌کنند تا بدون زحمت با محتوای بیشتری درگیر شوند. چه تبلیغاتی باشد و چه صرفاً تزئینی، به این قوانین اساسی پایبند باشید تا مطمئن شوید که ویدیوهای شما با بالاترین کیفیت ظاهر می شوند، بدون اینکه بر سرعت بارگذاری صفحه تأثیر بگذارند.
به عنوان یک قاعده کلی، ویدیوهای آپلود شده در سایت شما باید حداکثر 300 مگابایت باشد. قبل از آپلود ویدیوی خود، بررسی کنید که کدام فرمت های ویدیویی با پلتفرم وب سایت مورد استفاده شما سازگار است. برخی از محبوب ترین فرمت ها عبارتند از AVI، MPEG، MPG، MPE، MP4، MKV، WebM، MOV، OGV، VOB، M4V، 3GP، DivX، XVID، MXF، WMV، M1V، FLV و M2TS. البته سعی کنید که فیلم خود را در یک سرویس ارائه دهنده نمایش ویدئو قرار دهید. مانند آپارات و تماشا و بعد کد نمایش آن را در سایت خود قرار دهید.
7. پس زمینه رنگی مناسب را انتخاب کنید
هنگام افزودن یک ویدیو به سایت خود، به خاطر داشته باشید که ممکن است قسمت هایی از ویدیو برای برخی از بازدیدکنندگان بسته به دستگاه یا مرورگری که استفاده می کنند، بریده یا پنهان شود. با این حال، به نظر می رسد که خود محتوای ویدیویی تمام ابعاد مؤلفه را پوشش می دهد.
اجزای ویدیو بر اساس ابعاد کامل رسانه در حال آپلود و نه تنها قسمت های قابل مشاهده محاسبه می شوند. در این مورد، ممکن است بخواهید یک فضای رنگی اضافه کنید تا بقیه پس زمینه را جبران کنید و بهترین تجربه زیبایی شناختی را به بازدیدکنندگان ارائه دهید.
مرورگرهای مختلف از فضاهای رنگی متفاوتی استفاده می کنند، بنابراین وقتی از رنگی به عنوان پس زمینه ویدیو استفاده می کنید و همان رنگ را به عنوان پس زمینه صفحه انتخاب می کنید، این فضاهای رنگی ممکن است در مرورگرهای مختلف متفاوت به نظر برسند. یکی از راه حل های ممکن برای غلبه بر تنوع رنگ، تعریف یک پس زمینه شفاف برای ویدیو و بهینه سازی تصاویر سایت است.
8. انتخاب ویدیو از GIF (بیشتر)
انیمیشن ساده یک GIF می تواند توجه بازدیدکنندگان را جلب کند و طراحی وب شما را ارتقا دهد. با این حال، GIF ها دارای چند اشکال هستند: شما نمی توانید بازپخش در سایت خود را کنترل کنید، که می تواند به عملکرد، دسترسی و تجربه کلی کاربر آسیب برساند. گیف‌ها نیز تنها زمانی شروع به پخش می‌کنند که همه فریم‌های محتوا در دسترس باشند. از آنجایی که نمی‌توانید گیف‌ها را برای پخش وب بهینه کنید، استفاده از آنها می‌تواند سرعت بارگذاری صفحه را به میزان قابل توجهی کاهش دهد.
اگر بین یک GIF و یک ویدیو تصمیم می گیرید از کدام بهره ببرید، از دومی استفاده کنید. ویدیوها از پالت‌های رنگی تقریباً نامحدود پشتیبانی می‌کنند، با پخش کنترل‌شده همراه هستند و می‌توانند برای پخش وب بهینه شوند. آنها همچنین به محض در دسترس قرار گرفتن اولین فریم، شروع به پخش در وب می کنند.
از GIF در این موارد در وب سایت خود استفاده کنید:
اگر انیمیشن محتوای شما حاوی چند فریم و ابعاد کوچک (مثلا 100X100) است، باید از GIF استفاده کنید. وقتی محتوای متنی در ویدیوی خود دارید و می خواهید خوانایی را حفظ کنید.
