هشدار: ۱۴ نکته ساده که تصاویر وب‌سایت‌تان را بهینه می‌کند

تصاویر نقش بسیار مهمی در جذابیت و کارایی وب‌سایت شما ایفا می‌کنند. اما تصاویر بهینه نشده می‌توانند سرعت بارگذاری وب‌سایت را به شدت کاهش دهند و تجربه کاربری را تحت تاثیر قرار دهند. در این مقاله، 14 نکته کاربردی را برای بهینه سازی تصاویر وب‌سایت ارائه می‌دهیم:

با عمل کردن به این موارد، می‌توانید تصاویر با کیفیت بالا را بدون افت محسوس در سرعت بارگذاری وب‌سایت، ارائه دهید.

• ✅

  انتخاب فرمت مناسب:

  فرمت‌های JPEG برای عکس‌ها و PNG برای تصاویر گرافیکی با رنگ‌های محدود و پس‌زمینه شفاف مناسب‌تر هستند. فرمت WebP نیز یک گزینه مدرن و بهینه است که کیفیت بالایی با حجم کم ارائه می‌دهد.
• ✅

  فشرده سازی تصاویر:

  بهره‌گیری از ابزارهای فشرده سازی تصاویر (مانند TinyPNG یا ImageOptim) حجم فایل تصاویر را بدون افت کیفیت محسوس کاهش می‌دهد.
• ✅

  تغییر اندازه تصاویر:

  تصاویر را دقیقا به ابعادی که در وب‌سایت نمایش داده می‌شوند تغییر اندازه دهید. بهره‌گیری از تصاویر بزرگتر از حد نیاز، فقط حجم وب‌سایت را افزایش می‌دهد.
• ✅

  بهره‌گیری از Lazy Loading:

  بارگذاری تنبل تصاویر (Lazy Loading) به این معنی است که تصاویر تنها زمانی بارگذاری می‌شوند که در محدوده دید کاربر قرار بگیرند. این کار باعث افزایش سرعت بارگذاری اولیه صفحه می‌شود.
• ✅

  بهره‌گیری از CDN:

  بهره‌گیری از شبکه توزیع محتوا (CDN) باعث می‌شود تصاویر از سرورهای نزدیک‌تر به موقعیت جغرافیایی کاربر بارگذاری شوند و سرعت بارگذاری وب‌سایت افزایش یابد.
• ✅

  نامگذاری صحیح فایل‌ها:

  از نام‌های توصیفی و مرتبط با محتوای تصویر برای فایل‌ها استفاده کنید. این کار به سئو وب‌سایت شما کمک می‌کند.

• ✅

  اضافه کردن متن جایگزین (Alt Text):

  اضافه کردن متن جایگزین (Alt Text) برای تصاویر، علاوه بر کمک به کاربران با مشکلات بینایی، به موتورهای جستجو نیز کمک می‌کند تا محتوای تصویر را درک کنند.
• ✅

  بهره‌گیری از CSS Sprites:

  برای آیکون‌ها و تصاویر کوچک، از CSS Sprites استفاده کنید. این روش باعث کاهش تعداد درخواست‌ها به سرور می‌شود.
• ✅

  کاهش عمق رنگ:

  در صورت امکان، عمق رنگ تصاویر را کاهش دهید. مثلا اگر به 256 رنگ نیاز ندارید، می‌توانید از تعداد رنگ‌های کمتری استفاده کنید.
• ✅

  بهره‌گیری از Scalable Vector Graphics (SVG):

  برای لوگوها و آیکون‌ها، بهره‌گیری از SVG به جای تصاویر پیکسلی (JPEG یا PNG) توصیه می‌شود. SVG تصاویر برداری هستند و کیفیت خود را در ابعاد مختلف حفظ می‌کنند.
• ✅

  بررسی و بهینه سازی دوره ای:

  به طور منظم تصاویر وب‌سایت خود را بررسی و بهینه سازی کنید. با گذشت زمان، ممکن است تصاویر جدیدی به وب‌سایت اضافه شوند یا تصاویر قدیمی نیاز به بهینه سازی مجدد داشته باشند.
• ✅

  بهره‌گیری از WebP Express (برای وردپرس):

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

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

1. انتخاب فرمت مناسب تصویر

انتخاب فرمت مناسب تصویر، اولین قدم برای بهینه‌سازی آن است.فرمت‌های JPEG برای عکس‌ها، PNG برای تصاویر با جزئیات زیاد و شفافیت، و WebP برای ارائه کیفیت بالا با حجم کم، گزینه‌های اصلی هستند.برای عکس ها از JPEG و برای آیکون ها و لوگوهای ترنسپرنت از PNG استفاده کنید.WebP بهترین گزینه برای سایت های مدرن است اما از سازگاری آن با مرورگرهای قدیمی تر مطمئن شوید.فایل‌های SVG (Scalable Vector Graphics) نیز گزینه‌ی بسیار مناسبی برای لوگوها و آیکون‌ها هستند، زیرا حجم بسیار کمی دارند و بدون افت کیفیت، قابلیت بزرگنمایی دارند.

فرمت AVIF فرمت جدیدتری است که نسبت به WebP فشرده سازی بهتری ارائه می‌دهد، اما هنوز به اندازه WebP فراگیر نشده است.

انتخاب فرمت نامناسب می‌تواند باعث افزایش حجم فایل و در نتیجه کاهش سرعت بارگذاری صفحه شود.پیشنهاد می شود از فرمت های WebP یا AVIF در صورت امکان استفاده کنید، چرا که حجم کمتری نسبت به JPEG و PNG دارند و سرعت بارگذاری وبسایت را افزایش می دهند.

2. فشرده سازی تصاویر

فشرده سازی تصاویر بدون افت کیفیت (Lossless) یا با افت کیفیت (Lossy) می‌تواند حجم فایل را به طور چشمگیری کاهش دهد.ابزارهای آنلاین و نرم‌افزارهای مختلفی برای این کار وجود دارند.فشرده‌سازی با افت کیفیت، جزئیات کمتری را حفظ می‌کند، اما حجم فایل را به طور قابل توجهی کاهش می‌دهد.فشرده‌سازی بدون افت کیفیت، کیفیت تصویر را حفظ می‌کند، اما کاهش حجم کمتری دارد.سرویس‌های آنلاین مانند TinyPNG و ImageOptim برای فشرده سازی تصاویر بسیار کارآمد هستند.برخی از نرم افزارهای ویرایش تصویر مانند فتوشاپ نیز امکان فشرده سازی تصاویر را فراهم می کنند.

بهترین رویکرد این است که ابتدا تصویر را فشرده کنید و سپس نتیجه را بررسی کنید تا مطمئن شوید کیفیت تصویر قابل قبول است.

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

3. تغییر اندازه تصاویر

تصاویر را دقیقا به اندازه مورد نیاز در وب‌سایت قرار دهید.بارگذاری تصاویر بزرگتر از ابعاد نمایش داده شده، باعث اتلاف پهنای باند و کاهش سرعت بارگذاری صفحه می‌شود.قبل از بارگذاری تصویر در وب‌سایت، آن را به اندازه مناسب تغییر دهید.اگر تصویر شما قرار است در اندازه 300×200 پیکسل نمایش داده شود، نیازی نیست که تصویری با ابعاد 1200×800 پیکسل بارگذاری کنید.از تگ با ویژگی width و height برای تعیین ابعاد تصویر استفاده کنید.این کار به مرورگر کمک می کند تا فضای لازم برای تصویر را قبل از بارگذاری آن رزرو کند و از تغییر چیدمان صفحه جلوگیری کند.

بهره‌گیری از تصاویر واکنشگرا (Responsive Images) با بهره‌گیری از تگ و ویژگی srcset می‌تواند به بهینه‌سازی تصاویر برای دستگاه‌های مختلف کمک کند.

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

4. بهره‌گیری از تصاویر ریسپانسیو (Responsive Images)

با بهره‌گیری از ویژگی srcset در تگ و تگ ، می‌توانید نسخه‌های مختلفی از یک تصویر را برای دستگاه‌های مختلف (موبایل، تبلت، دسکتاپ) ارائه دهید.این کار باعث می‌شود کاربران در هر دستگاهی، تصویری با اندازه مناسب و بهینه شده دریافت کنند. تگ به شما امکان می دهد فرمت های مختلف تصویر را برای مرورگرهای مختلف ارائه دهید.مثلا می‌توانید یک تصویر WebP و یک تصویر JPEG را ارائه دهید تا مرورگرهایی که از WebP پشتیبانی می کنند، تصویر WebP را دریافت کنند و مرورگرهای دیگر تصویر JPEG را دریافت کنند.

با بهره‌گیری از media queries در ویژگی media تگمی‌توانید تصاویر مختلف را بر اساس اندازه صفحه نمایش نمایش دهید.

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

5. بهره‌گیری از Lazy Loading

Lazy Loading تکنیکی است که به کمک آن تصاویر فقط زمانی بارگذاری می‌شوند که در محدوده دید کاربر قرار بگیرند. این کار باعث کاهش زمان بارگذاری اولیه صفحه و بهبود عملکرد کلی وب‌سایت می‌شود. می‌توانید از ویژگی loading=”lazy” در تگ برای فعال کردن Lazy Loading استفاده کنید. Lazy Loading مخصوصا برای صفحاتی که دارای تعداد زیادی تصویر هستند، بسیار مفید است. می‌توانید از کتابخانه های جاوا اسکریپت برای پیاده سازی Lazy Loading استفاده کنید. بهره‌گیری از Lazy Loading می‌تواند به طور قابل توجهی مصرف پهنای باند را کاهش دهد. برای اطمینان از عملکرد صحیح Lazy Loading، از تست آن در مرورگرهای مختلف استفاده کنید.

6. بهینه سازی نام فایل تصاویر

نام فایل تصاویر را بهینه کنید. از کلمات کلیدی مرتبط با محتوای تصویر استفاده کنید و از بهره‌گیری از کاراکترهای غیر مجاز و فضاهای خالی خودداری کنید. بهره‌گیری از خط تیره (-) به جای فضای خالی توصیه می شود. مثلا به جای نامی مانند IMG_1234.jpg از نامی مانند کوه-های-آلپ-سوئیس.jpg استفاده کنید. نام فایل تصاویر می‌تواند به موتورهای جستجو کمک کند تا محتوای تصویر را بهتر درک کنند. از نام فایل های کوتاه و توصیفی استفاده کنید. به زبان انگلیسی از حروف کوچک برای نام فایل ها استفاده کنید. ثبات در نام گذاری فایل ها، مدیریت آنها را آسان تر می کند.

7. بهره‌گیری از متن جایگزین (Alt Text)

برای هر تصویر، یک متن جایگزین (Alt Text) مناسب و توصیفی ارائه دهید. متن جایگزین در صورتی که تصویر بارگذاری نشود، نمایش داده می‌شود و همچنین به موتورهای جستجو کمک می‌کند تا محتوای تصویر را درک کنند. متن جایگزین همچنین برای کاربران با اختلالات بینایی قابل دسترسی است. متن جایگزین باید مختصر و دقیق باشد و محتوای تصویر را به طور کامل توصیف کند. از بهره‌گیری از کلمات کلیدی غیر مرتبط در متن جایگزین خودداری کنید. متن جایگزین نقش مهمی در سئو (سئو) وب سایت دارد. برای تصاویر تزئینی، می‌توانید از متن جایگزین خالی (alt=””) استفاده کنید.

8. بهره‌گیری از CDN (Content Delivery Network)

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

9. Cache کردن تصاویر

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

10. بهره‌گیری از Sprite تصاویر

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

11. بهینه سازی تگ های Title و Caption تصاویر

علاوه بر متن جایگزین (Alt Text)، تگ های Title و Caption نیز می‌توانند به بهینه سازی تصاویر کمک کنند. تگ Title، متنی است که هنگام قرار گرفتن ماوس بر روی تصویر نمایش داده می‌شود. Caption، متنی است که در زیر تصویر نمایش داده می‌شود و توضیحی در مورد تصویر ارائه می‌دهد. از کلمات کلیدی مرتبط در این تگ ها استفاده کنید. تگ Title بیشتر برای ارائه اطلاعات اضافی در مورد تصویر استفاده می شود. Caption برای ارائه زمینه و توضیح بیشتر در مورد تصویر استفاده می شود. تگ های Title و Caption میتوانند به بهبود سئو وب سایت کمک کنند. بهره‌گیری از تگ های Title و Caption اختیاری است.

12. بررسی و اصلاح خطاهای تصاویر

به طور منظم وب سایت خود را بررسی کنید و خطاهای مربوط به تصاویر (مانند تصاویر شکسته یا لینک‌های اشتباه) را اصلاح کنید. ابزارهای آنلاین و نرم‌افزارهای مختلفی برای بررسی لینک‌های شکسته در وب‌سایت وجود دارند. تصاویر شکسته میتوانند تاثیر منفی بر تجربه کاربری و سئو وب سایت داشته باشند. می‌توانید از گوگل Search Console برای شناسایی خطاهای مربوط به تصاویر استفاده کنید. بهترین راه برای جلوگیری از خطاهای مربوط به تصاویر، مدیریت صحیح فایل ها و لینک ها است. بررسی منظم وبسایت برای یافتن و رفع مشکلات احتمالی یک اصل مهم در نگهداری وبسایت است.

13. بهره‌گیری از WebP Express برای وردپرس

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

14. کنترل و نظارت بر عملکرد و تست عملکرد تصاویر

به طور منظم عملکرد تصاویر وب‌سایت خود را مانیتور کنید و از ابزارهای مختلف برای تست سرعت بارگذاری تصاویر و تاثیر آنها بر عملکرد کلی وب‌سایت استفاده کنید. ابزارهایی مانند گوگل PageSpeed Insights و GTmetrix می‌توانند اطلاعات ارزشمندی در مورد عملکرد تصاویر و پیشنهاداتی برای بهبود آنها ارائه دهند. با بهره‌گیری از اطلاعات به دست آمده، می‌توانید استراتژی بهینه سازی تصاویر خود را بهبود بخشید. عملکرد تصاویر را در دستگاه های مختلف (موبایل، تبلت، دسکتاپ) تست کنید.