مقدمه
سرعت بارگزاری تصاویر و ویدیوها برای کاربر به اندازه ظاهر جذاب وب سایت اهمیت داره. فقط تصور کنید که یک تصویر با کیفیت بالا برای هدر سایت خود طراحی کرده اید اما کاربر باید 5 تا 6 ثانیه و حتی بیشتر برای بارگزاری آن منتظر بمونه. خیلی زود صبر کاربر لبریز میشه، از سایت شما خارج میشه و همه زحمات شما نقش بر آب میشه. بهینه‌سازی تصاویر در طراحی سایت مهمه تا بتونیم علاوه بر سرعت بارگزاری بالا از تصاویر زیبا و با کیفیت بالا استفاده کنیم.
چرا بهینه‌سازی تصاویر در طراحی سایت مهمه؟
بر اساس گفته Think With Google، با افزایش زمان بارگذاری یک صفحه از یک به سه ثانیه، Bounce rate یا نرخ پرش! (نرخ بازگشت) وب سایت شما می تواند 32 درصد افزایش یابد. بنابراین سرعت بارگزاری ( به عنوان یکی از مولفه‌های کاربرد پذیری) تاثیر زیادی در موفقیت طراحی یک صفحه وب سایت و طراحی تجربه کاربری، UX داره و نباید از آن غافل شد. از طرف دیگه نداشتن تصاویر با کیفیت و جذاب باعث حوصله سربر و بی روح شدن طراحی ظاهری یا طراحی UI سایت می شود.
تصاویر وب سایت جوهره و روح یک صفحه هستند یک فروشگاه آنلاین رو بدون تصویر محصولات تصور کنید یا یک صفحه فرود بدون تصویری که متن کناریش رو توصیف کنه. تصاویر و ویدیو ها در یک صفحه وب سایت نقش بسیارمهمی در انتقال احساس و بازگو کردن داستانی که قرار است برای مخاطب تعریف کنید، ایفا می کنند.
برای کاربرانی که حوصله خواندن چند خط متن را ندارند تصویر و یا یک ویدیو بسیار کمک کننده است. اما اگر این تصاویر و ویدیو ها به درستی بهینه نشده باشند باعث می شود سرعت بارگزاری کم شده و کاربر زمان زیادی را در انتظار بارگزرای کامل صفحه بماند در این حالت تصاویر نه تنها کمک کننده نیستند که باعث ایجاد تجربه بد و در نهایت شکست طراحی شما می شود. این موارد اهمیت بهینه‌سازی تصاویر در طراحی سایت را نشان می دهد.
در این مقاله 5 راهکار در مورد بهینه‌سازی تصاویر در طراحی سایت را بررسی میکنیم تا بتونید در پروژه های بعدیمون از اونها استفاده کنیم.
1- برای بهینه‌سازی تصاویر در طراحی سایت از تصاویر با ابعاد مناسب استفاده کنید:
حقیقت اینه که به طور میانگین 50% از محتوای هر صفحه را تصاویر به خود اختصاص میدن که علاوه بر کمک به زیباتر شدن صفحه طراحی شده به شکلی سریعتر و قابل فهم تری محتوای موجود را به مخاطب ارایه میکنند. اینجاست که طراحان اغلب وسوسه میشن تصاویر رو با کیفیت اصلی آپلود و استفاده کنند.
وقتی از سیستمهای مدیریت محتوا مانند وردپرس، جوملا و غیره استفاده میکنیم جای نگرانی نیست چرا که این سامانه ها معمولا از تصویر آپلود شده چندین نمونه با ابعاد مختلف تهیه میکنند و در هر جا بسته به ابعاد، نسخه مناسب را بارگزار و در معرض دید مخاطب قرا میدن. اما وقتی یک صفحه وب طراحی میکنیم باید به این نکته توجه داشته باشیم که اگر قرا است تصویر ما به صورت بند انگشتی نمایش داده شود (مانند تصویر آواتار یک کاربر) اشتباه است که یک تصویر با ابعاد بزرگ (مثلا 1000 در 1000 پیکسل)استفاده کنیم.
از طرفی باید توجه داشته باشیم که اندازه تصاویر در سئوی صفحه تاثیر گذره و ربات های گوگل ابعاد تصوایر به کار رفته در متن محتوا را بررسی میکنند. طبق گفته گوگل بهتره تصاویر استفاده شده در محتوا حداقل دارای عرض 800 پیکشل (800px) داشته باشند. اشتباه دیگری که برخی از طراحان مرتکب میشن استفاده از تصاویر با رزولوشن بالاتر از حد است. رزولوشن تصاویر برای چاپ 300dpI است اما برای تصاویری که در اسکرین های دیجیتالی نمایش داده میشن 72dpI کاملا مناسب است.
با راست کلیک کردن روی تصویر، رفتن به منوی PROPERTIES و سربرگ DETAILS از قسمت مشخص شده در تصویر زیر میتوندی رزولوشن تصویر را مشاهده کنید. پیشنهاد میکنم برای آگاهی بیشتر مقاله راهنمای ابعاد تصاویر در طراحی سایت رو حتما مطالعه کنید.
2- فرمت درست استفاده کنید:
یکی دیگر از کارهایی که می توانید برای بهینه سازی تصاویر در طراحی سایت انجام بدید، استفاده از فرمت مناسب حتی بیشتر از ابعاد تصویر میتونه در کیفیت و حجم تصویر تاثیر گذار باشه. سه فرمت رایجی که اکثر طراحان سایت اونها رو میشناسن و از اونها استفاده میکنند عبارتند از gif ، .png. و .jpg که از فرمت gif. اغلب برای تصاویر متحرک و از فرمت png. برای تصاویر بدون پس زمینه استفاده میشود.
شاید بعدها در مورد انتخاب فرمت مناسب یک مقاله راهنما بنویسم. اما تا اون موقع از نکات زیر به عنوان یک راهنمای سریع استفاده کنید.
- به طور کلی فرمت gif. (گیف) رو بیخیال بشید. حتی اگر نیاز به تصاویر متحرک دارید استفاده از ویدیو های کوتاه با فرمت مناسب بهتر است. مگر اینکه بخواهید یک بنر تبلیغاتی کوچک طراحی کنید.
- از بین فرمت های ، png. و .jpg در شرایط یکسان فرمت .jpg کم حجم تر بوده پس تصاویرتون رو با فرمت jpg. آپلود کنید مگر اینکه 1- نیاز به یک تصویر با پس زمینه شفاف داشته باشید ( مثلا نشانگر موس سفارشی) یا 2- تصاویری با وضوح بالا نیاز داشته باشد مانند تصویری که دارای متن ریز است یا تصویری که دارای تدارج رنگ (gradient) باشد که بهتر است از فرمت png. استفاده کنید.
- در مقابل فرمتهای قدیمی png. و jpg. فرمت های جدیدتری هستند که علاوه بر حفظ کیفیت با تکنیکهای جدید فشرده سازی نسبت به فرمت .jpg حجم کمتری اشغال میکنند. با توجه به تصویر زیر فرمت .WEBP 30 درصد حجم کمتری نسبت به فرمت jpg. اشغال میکند و تقریبا توسط همه مرورگرها پشتیبانی می شود. فرمت AVIF. نسبت به دیگر فرمت ها جدید تر بوده و همانطور که در تصویر می بینید 50درصد کمتر از فرمت jpg. فضا اشغال میکند اما کیفیت تصویر تغییری نمیکند. اما مشکل این فرمت اینه که هنوز مرورگرها از اون پشتیبانی نمیکنند.
3- تصاویرتان را به صورت بهینه شده استفاده کنید:
روش های زیادی برای بهینه سازی تصاویر در طراحی سایت وجود داره. قبلا گفتی که اگر از نرم افزارهای مدیریت محتوا استفاده میکنید زیاد لازم نیست دغدغه این موضوع رو داشته باشد. هرچند که اگر در اون موارد هم تصاویرتون رو بهینه کنید بهتر خواهد بود. برای مثال میتونید با استفاده از ابزارهای آنلاین تصاویر خودتون رو بهینه کنید. این مقاله از سایت دمیزله ( https://themeisle.com/blog/best-online-image-optimizer-tools) چندتا از این ابزارهای آنلاین رو معرفی و اونها رو با هم مقایسه کرده .خوندنش خالی از لطف نیست.
اگر هم مثل من از فتوشاپ برای ویرایش عکستون استفاده میکنید کافیه وقتی کارتون تموم شد به جای Ctrl+s از Alt+ Shift+ Ctrl +s یا از منوی فایل زیر منوی Export گزینه save for web (legacy) استفاده کنید تا تصاویر به صورت بهینه شده ذخیره شود.
4- با Lazy loading دوست بشید، بچه خوبیه!!
حتما شما هم زمانهای نه چندان دور رو یادتون هست که وقتی صفحه یک پست رو باز می کردید همینطور که در حال خوندن مطلب بودید یکی از تصاویر تازه بارگزاری میشد و باعث پرش ناگهانی محتوای زیرش می شد. این پرش ها واقعا برای یک صفحه سایت فاجعه است. تا جایی که گوگل هم رسما اعلام کرد میزان پرش محتوا به هر دلیلی، تاثیر منفی بر روی سئوی اون صفحه داره. اینجا بود که Lazy load (بارگزاری تنبل؟!! آخه اینم شد ترجمه؟) پا به عرصه وجود گذاشت.
امروزه اگر یک صفحه وب سایت با طراحی خوب رو باز کنید متوجه می شوید که تصاویر به صورت مات بارگزاری شده و به تدریج واضح می‌شوند. این روش بارگزاری تصاویر همان Lazy loading یا بارگزاری تدریجی است. بارگزاری تدریجی دو مزیت داره؛ اول به عنوان فضا نگه دار عمل میکنه و وقتی تصویر کاملا بارگزاری شد محتوای زیر آن پرش نمیکنه. دومین مزیت اینه که کاربر متوجه می شود اینجا تصویری قرار داره که به مرور بارگزاری می شود. (این مزیتها در نهایت بر روی سئوی صفحه شما نیز تاثیر مثبت می گزارد). پس داستانها و افسانه های واهی که این عمل (یعنی Lazy loading) رو بد میدونن و عنوان میکنند تاثیر منفی روی سئو و تجربه کاربر داره رو فراموش کنید و نگرانش نباشید.
5- با قدرت SVG آشنایی دارید؟
اگر هنوز با تصاویر برداری مقیاس پذیر!! (Scalable Vector Graphics) یا SVG بی اطلاع هستید پیشنهاد میکنم مقاله روش های استفاده از تصاویر SVG رو حتما مطالعه کنید. تصاویر SVG معمولا از یک سری تگ نشانه گذاری شده مانند XML و فرومل ها ریاضی برای تصاویر استفاده میکنند. بنابراین حجم بسیار کم و سرعت لود بالایی دارند.علاوه بر اون قابلیتهایی مانند عدم افت کیفیت در هر اندازه، تعامل پذیر بودن و غیره … ابرازی مناسب برای استفاده در طراحی سایت است.
هیچ یک از فرمتهای تصویری دیگر (لااقل اونهایی که من میشناسم) این قابلیت ها رو ندارند. پس برای بهینه سازی تصاویر در طراحی سایت بهتره جاهایی که نیاز به تصاویر طراحی شده و غیر واقعی دارید از فرمت SVG آن استفاده کنید. برای تهیه تصاویراین نوع تصاویر میتونید از سایتهایی مانند فری پیک، Pixabay ، Vectzeey، Free vector و غیره به صورت رایگان استفاده کنید. البته که سایتهای دیگه هم هستند که هم به صورت رایگان و هم پرمیوم تصاویر وکتور در اختیار شما میگذارند فقط کافیه از گوگل عزیز بخواهید بهتون معرفی کنه
