بهینهسازی تصاویر در طراحی سایت
بهینهسازی تصاویر در طراحی سایت
اگر سایت شما دیر باز میشود، مقصر اصلی احتمالاً تصاویر شما هستند. تصاویر سنگین بزرگترین قاتل سرعت در طراحی سایت هستند. در این مقاله از تیم آی وب، قدمبهقدم یاد میگیرید چطور تصاویر را برای سرعت و سئو بهینه کنید. این نکات را میتوانید بدون دانش فنی عمیق هم اجرا کنید.
چرا بهینهسازی تصاویر در طراحی سایت ضروری است؟
سه دلیل اصلی وجود دارد. اول، گوگل سایتهای کند را تنبیه میکند. اگر سایت شما بیشتر از ۳ ثانیه بارگذاری شود، رتبه شما در نتایج جستجو پایین میآید. دوم، کاربران بیصبر شدهاند. طبق آمار، ۵۳ درصد کاربران اگر سایتی بیشتر از ۳ ثانیه باز شود، آن را ترک میکنند. سوم، تصاویر بهینهنشده پهنای باند هاست شما را هدر میدهند و هزینه ماهیانه شما را افزایش میدهند. بنابراین بهینهسازی تصاویر در طراحی سایت یک نیاز فوری است، نه یک گزینه لوکس.
قدم اول: انتخاب فرمت درست
هرگز از PNG برای عکسهای بزرگ استفاده نکنید. فرمت PNG برای تصاویری با پسزمینه شفاف مثل لوگو مناسب است، نه برای عکس محصول یا بنر. بهترین فرمت برای عکسهای معمولی JPEG است. اما فرمت مدرن WebP حتی بهتر عمل میکند. WebP تا ۳۰ درصد حجم کمتری نسبت به JPEG دارد، بدون اینکه کیفیت قابل مشاهدهای از دست برود. در تیم آی وب، تمام تصاویر پروژههای طراحی سایت خود را به WebP تبدیل میکنیم. خیالتان راحت، مرورگرهای جدید مثل کروم، فایرفاکس و اج به خوبی از این فرمت پشتیبانی میکنند.
قدم دوم: فشردهسازی هوشمند بدون افت کیفیت
فشردهسازی یعنی کم کردن حجم فایل بدون تغییر ابعاد آن. ابزارهای آنلاین رایگانی وجود دارند که این کار را در چند ثانیه انجام میدهند. بهترین ابزارها عبارتند از TinyPNG، Squoosh (ساخته شده توسط گوگل) و Compressor.io. فقط کافی است عکس خود را آپلود کنید و نسخه بهینهشده را دانلود کنید. معمولاً حجم فایل بین ۴۰ تا ۷۰ درصد کاهش پیدا میکند، در حالی که شما هیچ تفاوت ظاهری حس نمیکنید. این کار ساده، بزرگترین تأثیر را روی سرعت سایت شما میگذارد.
قدم سوم: تعیین ابعاد متناسب با صفحه
خیلی از افراد عکسی با عرض ۴۰۰۰ پیکسل را در سایت خود آپلود میکنند، در حالی که سایت آنها حداکثر ۱۲۰۰ پیکسل عرض دارد. این کار یعنی ۳
برابر حجم اضافی بدون هیچ دلیلی. قبل از آپلود، عرض تصویر را با نرمافزارهای ساده مثل Paint یا Preview به حداکثر عرض کانتینر سایت خود برسانید. برای اکثر سایتها، عرض ۱۹۲۰ پیکسل برای تصاویر اصلی و ۱۲۰۰ پیکسل برای تصاویر داخل متن کافی است.
قدم چهارم: فعال کردن lazy loading
Lazy loading یعنی تصاویری که در پایین صفحه قرار دارند، فقط زمانی بارگذاری شوند که کاربر به آنها برسد. این کار باعث میشود صفحه اول سایت خیلی سریعتر نمایش داده شود. اجرای آن فوقالعاده ساده است. فقط کافی است به تگ img خود این صفت را اضافه کنید: loading=”lazy”. نیازی به کدنویسی پیچیده یا پلاگین اضافی نیست. این روش در همه سایتهای مدرن و حتی وردپرسی قابل اجرا است.
قدم پنجم: نوشتن متن جایگزین (alt) حرفهای
متن alt دو فایده بزرگ دارد. فایده اول، دسترسیپذیری است. افراد نابینا که از صفحهخوان استفاده میکنند، متوجه میشوند که تصویر چه محتوایی دارد. فایده دوم، سئوی تصاویر است. گوگل از طریق متن alt متوجه میشود تصویر درباره چیست. حتماً از کلمه کلیدی اصلی مقاله در alt استفاده کنید، اما طبیعی و واقعی. مثلاً برای این مقاله: «بهینهسازی تصاویر در طراحی سایت با تیم آی وب»
اشتباهات رایج که باید همین امروز اصلاح کنید
استفاده از PNG برای عکسهای محصول یا بنر. آپلود عکس با نامهای پیشفرض مثل IMG_۱۲۳۴.jpg به جای نامهای معنیدار مثل «بهینهسازی-تصاویر-سایت.jpg». فراموش کردن تنظیم کش مرورگر برای تصاویر تکراری. نداشتن نسخه رتینا برای نمایشگرهای ۴K. و بزرگترین اشتباه، آپلود تصاویر بدون هیچ فشردهسازی.
ابزارهای حرفهای پیشنهادی تیم آی وب
ما در تیم آی وب برای پروژههای طراحی سایت خود از این ابزارها استفاده میکنیم. برای وردپرس، افزونه ShortPixel کار فشردهسازی خودکار را انجام میدهد. برای کاربران مک، نرمافزار دسکتاپ ImageOptim عالی است. برای کاربران عادی و آنلاین، ابزار Squoosh گوگل بهترین گزینه است. همه این ابزارها رایگان یا با تعرفه بسیار مناسب هستند.
تأثیر مستقیم بهینهسازی تصاویر بر سئو و فروش
گوگل رسماً اعلام کرده که سرعت سایت یک فاکتور اصلی رتبهبندی است. با اجرای همین چند قدم ساده، نمره سرعت سایت شما در ابزار PageSpeed Insights حداقل ۲۰ امتیاز بالا میرود. نتیجه این افزایش سرعت، کاهش نرخ پرش، افزایش زمان ماندگاری کاربر، بهبود نرخ تبدیل و در نهایت فروش بیشتر است. سایتهای سریع، اعتماد بیشتری را منتقل میکنند.
جمعبندی نهایی
بهینهسازی تصاویر در طراحی سایت یکی از کمهزینهترین و پربازدهترین کارهایی است که میتوانید برای سئو و تجربه کاربری انجام دهید. از امروز فرمت WebP، فشردهسازی با ابزارهای معرفی شده، lazy loading و ابعاد متناسب را جدی بگیرید. تیم آی وب در تمام پروژههای خود این اصول را رعایت میکند تا سایتی سریع، حرفهای و گوگلپسند تحویل شما دهد. اگر سؤالی دارید یا نیاز به مشاوره دارید، با ما در تماس باشید.
