چند روش برای بهینه سازی تصاویر سایت

چند روش برای بهینه سازی تصاویر سایت

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

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

 

  • آیا باید در مقاله خود از تصاویر استفاده کنم؟
  • چرا هنگام جستجوی عکس در گوگل، محصولات وب‌سایت من نمایش داده نمی‌شود؟
  • آیا به تگ‌های جایگزین تصاویر (Alt Tags) برای تصاویر وب‌سایت خود نیاز دارم؟
  • چه تفاوتی میان فرمت‌های PNG، JPEG و GIF وجود دارد؟ از کدام یک برای بهینه سازی تصاویر سایت استفاده کنم؟

 

واضح است که تصاویر در جذاب کردن محتوای آنلاین نقش مؤثری دارند و همچنین، بر روی سئو و بهینه سازی سایت شما اثر مستقیم دارند. استفاده از تصاویر مرتبط در مطالب به فهم بهتر و راحت‌تر خواننده کمک می‌کند. به یاد داشته باشید که یک تصویر خوب بهتر از هزار کلمه است!

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

 

چرا باید تصاویر را بهینه کنیم؟

عدم بهینه سازی تصاویر ممکن است موجب بروز مشکلاتی چون افزایش زمان بارگذاری صفحات، استفاده بیش از حد از پهنای باند و… شود. تصاویر بهینه نشده پهنای قابل توجهی را مصرف می کنند که غیر ضروری است! دلالیل متعددی برای بهینه سایزی تصاویر سایت وجود دارد از جمله:

 

افزایش سرعت بارگذاری سایت

یک سایت ضعیف و کند تجربه کاربری منفی را برای بازدیدکنندگان ایجاد می کند. این تجربه منفی باعث می شود که نرخ بازدهی کاهش یابد و کاربر زمان کمتری در وب سایت شما سپری کند. نمی توان انتظار داشت که کاربران منتظر لود شدن تصاویر بمانند و ممکن است سایت را ترک کنند این باعث افزایش بانس ریت خواهد شد. همچین بعداز بهینه سازی، فضای کمتری اشغال خواهد شد.

 

توجه گوگل و سایر موتورهای جستجو به وب سایت های سریع

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

 

پیدا کردن یک تصویر مناسب

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

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

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

 

چگونه عکس مناسب پیدا کنیم؟

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

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

 

تصاویر را توصیفی و به زبان انگلیسی نام‌گذاری کنید

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

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

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

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

 

تگ‌ Alt تصاویر را هوشمندانه انتخاب کنید

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

همچنین، در بهینه سازی تصاویر سایت باید برای هر یک از تصاویر یک تگ Alt به صورت مجزا بنویسید. به خاطر داشته باشید که:

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

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

 

ابعاد تصویر و ویژگی‌های مختلف محصولات را در نظر بگیرید

یک شیوه‌ی رایج در بازاریابی که امروزه بسیار مورد استفاده قرار می‌گیرد به کارگیری تصاویر متعدد از زوایا و ویژگی‌های مختلف محصولات است.

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

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

همچنین کاهش ابعاد تصاویر اگر با کاهش حجم آنها همراه باشد، نقش مؤثری در بهبود زمان بارگذاری صفحات وب‌سایت دارد. در مقابل، استفاده از تصاویری با ابعاد کوچک یا ایجاد قابلیت نمایش بزرگ‌تر در پنجره POP-UP (یک صفحه جداگانه) موجب رضایت بیشتر کاربران خواهد شد.

به خاطر داشته باشید که تغییر مقیاس تصاویر تأثیری در حجم آنها ندارد! برای مثال هنگامی که یک تصویر 2500×1500 را در یک قاب 250×150 نشان می‌دهید سرعت بارگذاری وب‌سایت تغییری نمی‌کند. در وردپرس هنگام آپلود کردن تصاویر می‌توانید اندازه نمایش آن را در مقیاس‌های بزرگ، متوسط و بندانگشتی تغییر دهید، اما در واقع حجم تصاویر تغییری نخواهد کرد.

 

حجم تصاویر را کاهش دهید!

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

  • اغلب کاربران اینترنتی حدود 3 تا 7 ثانیه برای بارگذاری یک صفحه اینترنتی بر روی لپ‌تاپ صبر می‌کنند. این عدد برای گوشی‌های هوشمند در حدود 5 تا 7 ثانیه است.
  • شایعه‌ای وجود دارد که می‌گوید طراحان وب‌سایت آمازون در یک تحلیل عجیب دریافتند که اگر صفحات این وب‌سایت تنها یک ثانیه دیرتر بارگذاری شود، سالانه 1.6 میلیارد دلار از دست می‌دهند.
  • گوگل زمان بارگذاری صفحات را به‌عنوان یکی از فاکتورهای مهم در رتبه‌بندی وب‌سایت‌ها در نظر می‌گیرد.

با این وصف اگر در وب‌سایت تجاری خود تصاویری دارید که مدت زمان بارگذاری آنها بیش از 15 ثانیه به طول می‌انجامد، بهتر است با مشتری‌های خود خداحافظی کنید! اما راهکار حل این مشکل چیست؟

سؤال خوبیست! اگر حجم عکس‌های صفحات را کاهش دهیم سرعت بارگذاری وب‌سایت افزایش می‌یابد و در نتیجه کاربران کمتری پس از کلیک بر روی لینک وب‌سایت شما پشیمان می‌شوند. یکی از راه‌های مناسب برای کاهش حجم تصاویر استفاده از قابلیت Save for Web در نرم‌افزار فتوشاپ است. این قابلیت به شما کمک می‌کند تا با کمترین افت کیفیت، حجم تصاویر سایت خود را کاهش دهید؛ اما اگر به فتوشاپ دسترسی نداشتیم چه کنیم؟

 

انواع دیگر نرم‌افزار برای ویرایش عکس

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

  • وب‌سایت PicMonkey که توسط کارشناسان به‌عنوان یک ابزار ویرایش عکس جالب‌توجه شناخته می‌شود.
  • وب‌سایت Pixlr که با سادگی بی‌نظیر به ابزاری کاربرپسند بدل شده و یک نسخه اندروید برای اجرا در گوشی‌های هوشمند را نیز ارائه می‌دهد.
  • وب‌سایت FotoFlexer دیگر ابزار ویرایش آنلاین تصاویر است که حتی امکان ویرایش به‌صورت چندلایه را نیز برای کاربران فراهم نموده است.

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

 

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

تصاویر در وب‌سایت‌های اینترنتی معمولاً با سه فرمت JPEG، PNG و GIF بارگذاری می‌شوند و هر یک از این فرمت‌ها تاثیر متفاوتی بر روی عکس‌ها می‌گذارند؛ البته فرمت دیگری به نام SVG نیز وجود دارد که بیشتر برای آیکون‌های سایت استفاده می‌شود.

JPEG (یا jpg) یک فرمت قدیمی برای تصاویر محسوب می‌شود، به طوری که در فضای اینترنت از این فرمت به عنوان یک استاندارد یاد می‌شود. تصاویر JPEG می‌توانند به میزان قابل‌توجهی فشرده شوند که نتیجه آن تصاویری باکیفیت بالا و حجم بسیار کم خواهد بود.

تصاویر GIF (یا gif) نسبت به JPEG از کیفیت پایین‌تری برخوردارند و اغلب برای تصاویر تزئینی (دکوراتیو) و آیکون‌های کوچک مورد استفاده قرار می‌گیرد. افزون بر این GIF از انیمیشن یا تصاویر متحرک نیز پشتیبانی می‌کند که به طور حتم با آنها در شبکه‌های اجتماعی و نرم‌افزارهای پیام‌رسان نظیر تلگرام آشنا شده‌اید. فرمت GIF با وجود کیفیت پایین به دلیل حجم مناسب از لحاظ بهینه سازی تصاویر سایت از اهمیت بالایی برخوردار است. با این وجود برای تصاویر پیچیده، این فرمت انتخاب مناسبی به نظر نمی‌رسد زیرا از طیف رنگی کمتری نسبت به سایر فرمت‌ها پشتیبانی می‌کند.

تصاویر PNG نسبت به تصاویر GIF از محبوبیت بیشتری برخوردارند و می‌توانند به‌عنوان جایگزینی به‌جای آنها مورد استفاده قرار گیرند. این تصاویر از رنگ‌های بی‌شماری پشتیبانی می‌کنند و همانند JPEG در اثر فشردگی کیفیت خود را از دست نمی‌دهند. فرمت PNG امروزه به شکل قابل توجهی در وب‌سایت‌ها استفاده می‌شود، اما باید توجه داشت که این تصاویر نسبت به نمونه‌های JPEG باکیفیت یکسان از حجم بسیار بالاتری برخوردارند و امکان کاهش حجم قابل‌توجه آنها به‌سختی امکان‌پذیر است و در صورت انجام، بسیاری از جزئیات عکس نظیر رنگ‌های اصلی از بین می‌روند. با این وجود ذکر این نکته خالی از لطف نیست که فرمت PNG-24 سه برابر نسبت به نوع PNG-8 حجیم‌تر است.

 

در مجموع هنگام انتخاب فرمت تصاویر به نکات زیر دقت کنید:

  • برای وب‌سایت‌های تجاری با تصاویر متعدد، فرمت JPEG بهترین انتخاب ممکن است. این گونه تصاویر از کیفیت مناسب و حجم پایینی برخوردارند.
  • از فرمت GIF برای تصاویر بزرگ محصولات استفاده نکنید. این تصاویر معمولاً بزرگ و با جزئیات بسیار زیاد نظیر شکل و رنگ هستند و استفاده از GIF با رنگ‌های قابل پشتیبانی محدود راه معقولی به نظر نمی‌رسد.
  • تصاویر PNG جایگزین مناسبی برای GIF و JPEG هستند؛ البته اگر از حجم مناسبی برخوردار باشند. در هر حال استفاده از PNG-8 بیش از PNG-24 توصیه می‌شود.

 

از تصاویر Thumbnails درست استفاده کنید

امروزه بسیاری از وب‌سایت‌های تجاری و فروشگاهی از تصاویر بندانگشتی یا اصطلاحاً Thumbnails استفاده می‌کنند. این تصاویر به‌خصوص در صفحات دسته‌بندی (Category) موجب افزایش سرعت مرور محصولات توسط کاربران می‌شود. با این وجود باید در استفاده از آنها محتاط بود. این گونه از تصاویر می‌توانند سرعت بارگذاری صفحات را کاهش دهند. کاهش سرعت یک وب‌سایت به خصوص در صفحات دسته‌بندی، موجب از دست دادن مشتریان می‌شود؛ بنابراین:

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

 

مراقب تصاویر تزئینی وب‌سایت باشید

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

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

  • برای تصاویری که حاشیه‌های صفحات را پر می‌کنند از فرمت PNG-8 یا GIF استفاده کنید زیرا در این بخش‌ها کیفیت از اهمیت کمتری برخوردار است. هرچند با استفاده از این فرمت‌ها می‌توانید تصاویری باکیفیت قابل‌قبول و حجمی کمتر از 100 بایت ایجاد کنید.
  • در صورت امکان به‌جای تصاویر تزئینی از کدهای CSS برای ساخت قسمت‌های رنگی استفاده کنید.
  • تصاویر پس‌زمینه معمولاً از کیفیت بالایی برخوردارند با این حال حجم آنها را تا حد ممکن کاهش دهید. استفاده از فرمت JPEG می‌تواند در این زمینه به شما کمک کند.

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

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