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

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

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

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

نکات بهینه سازی تصویر های وب سایت

در این بخش 10 نکته مهم برای بهینه سازی تصویر های وب سایت را بررسی خواهیم کرد، که رعایت آن ها به شما کمک کند سئوی تصاویر وب سایت خود را بهبود بخشید. در ادامه موارد زیر را مورد بررسی قرار می دهیم:

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

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

شما می توانید از نام عمومی دوربین خود که به تصویر اختصاص داده شده استفاده کنید (به عنوان مثال DCMIMAGE10.jpg). با این حال نامگذاری فایل به صورت Ford-Mustang-LX-Red.jpg بسیار بهتر خواهد بود.

به چگونگی جستجوی مشتریان در وب سایت خود فکر کنید. هنگام جستجو از چه الگو های نامگذاری استفاده می کنند؟ در مثال بالا خریداران اتومبیل ممکن است عباراتی مانند موارد زیر را جست و جو کنند:

• فورد موستانگ LX قرمز 2012
• 2012 فورد موستانگ LX قرمز
• فورد موستانگ LX 2012 قرمز

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

2. ویژگی alt تصویر های وب سایت خود را با دقت بهینه کنید

هنگامی که مرورگر نمی تواند تصاویر را به درستی رندر کند، علت آن ویژگی های Alt یا همان متن جایگزین تصاویر هستند که یا خالی هستند یا به درستی نوشته نشده اند. آن ها همچنین برای دسترسی بهتر به وب سایت شما استفاده می شوند. حتی در صورت ارائه تصویر، اگر ماوس خود را بر روی آن حرکت دهید، متن ویژگی alt آن را خواهید دید (البته بستگی به تنظیمات مرورگرتان دارد).

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

<img src="2012-Ford-Mustang-LX-Red.jpg" alt="2012 Ford Mustang LX Red">

اولویت اول در نکات بهینه سازی تصویر، پر کردن هر مشخصه alt برای هر تصویر محصول در سایت شما است. در اینجا چند قانون ساده برای ویژگی های alt آورده شده است:

• تصاویر خود را دقیقاً مانند نام پرونده های تصویری خود به زبان ساده توصیف کنید.
• اگر محصولی را می فروشید که دارای شماره مدل یا شماره سریال است، از آن در مشخصات alt خود استفاده کنید.
• ویژگی alt را پر از کلمات کلیدی نکنید.
• از ویژگی های alt برای تصاویر تزئینی استفاده نکنید. موتور های جستجو ممکن است شما را به دلیل بهینه سازی بیش از حد مجازات کنند. (این نوعی سئوی کلاه سیاه محسوب می شود و حکم میانبر در سئو را دارد.)

3. ابعاد تصویر و زوایای محصول خود را هوشمندانه انتخاب کنید

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

• فضای داخلی
• قسمت عقب ماشین، به خصوص اگزوز ماشین
• رینگ ها
• موتور ماشین

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

احتیاط در ارائه تصاویر بزرگ تر

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

4. اندازه فایل تصاویر خود را کاهش دهید

این را در نظر بگیرید:

• تقریباً 50٪ از بازدید کنندگان حتی 3 ثانیه هم صبر نمی کنند تا یک سایت بارگیری شود.
• در سطح جهانی میانگین زمان بارگذاری صفحه در واقع در حال کاهش است.
• آمازون دریافت که اگر صفحات آن ها فقط یک ثانیه کند شود، 1.6 میلیارد دلار در سال ضرر می کنند.
• گوگل از زمان بارگذاری صفحه به عنوان عامل رتبه بندی در الگوریتم خود استفاده می کند.

بنابراین اگر تصویری دارید که صفحه را کند می کند و بارگیری آن بیش از 15 ثانیه طول می کشد؟ دیگر باید با مشتری های احتمالی که می توانستند از وب سایت شما خرید کنند، خداحافظی کنید زیرا کند بودن صفحه شما که از نکات مهم مربوط به تصویر سایت است که باید رعایت شود، به مشتری شما آسیب رسانده است.

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

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

یکی از روش هایی که می توانید اندازه فایل تصویر را کاهش دهید، استفاده از دستور "Save for Web" در Adobe Photoshop است. هنگام استفاده از این دستور، در واقع تصویر را در کمترین اندازه فایل ممکن تنظیم می کنید. در ضمن مراقب کیفیت تصویر باشید.

نحوه بهینه سازی تصاویر بدون فتوشاپ

اگر Adobe Photoshop ندارید، چندین ابزار آنلاین وجود دارد که می توانید برای ویرایش تصویر از آن ها استفاده کنید. Adobe حتی یک برنامه ویرایش تصویر رایگان برای گوشی ها و تبلت ها به نام Photoshop Express دارد. این ابزار تمام قابلیت های نسخه دسکتاپ Adobe Photoshop را ندارد، اما تمام اصول ویرایش تصویر را پوشش می دهد و رایگان است.

سایر ابزار های جذاب ویرایش تصویر آنلاین:

• PicMonkey توسط متخصصان به عنوان یک ابزار ویرایش عکس به طرز حیرت انگیزی عالی توصیف شده است.
• PIXLR فوق العاده کاربر پسند است و با یک نسخه 100٪ رایگان برای گوشی به شما ارائه می شود، بنابراین می توانید در همه جا، تصاویر خود را ویرایش کنید.
• Canva یکی دیگر از ویرایشگر های تصویر آنلاین نسبتاً پیشرفته است.

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

5. نوع فایل مناسب را انتخاب کنید

سه نوع فایل متداول وجود دارد که برای ارسال تصاویر به وب استفاده می شود: JPEG ،GIF و PNG بیایید به این سه نوع و چگونگی تأثیر آن ها بر تصویر نگاهی بیندازیم:

• تصاویر JPEG (یا jpg.): تا حدودی یک نوع فایل قدیمی است. JPEG به صورت واقعی به تصویر استاندارد اینترنت تبدیل شده است. تصاویر JPEG می توانند به طور قابل توجهی فشرده شوند و منجر به ایجاد تصاویر با کیفیت با اندازه پرونده های کوچک می شود.
• تصاویر GIF (یا gif.): کیفیت پایین تری نسبت به تصاویر JPEG دارند و برای تصاویر ساده تر مانند آیکون ها و تصاویر تزئینی استفاده می شوند. همانطور که می دانیم GIF ها از انیمیشن پشتیبانی می کنند. در مورد نکات بهینه سازی تصویر، تصاویر GIF برای آن دسته از تصاویر ساده در صفحه وب (که فقط شامل چند رنگ هستند) بسیار مناسب هستند. اما برای تصاویر و عکس های پیچیده، تصاویر GIF همیشه به آن اندازه جذاب نیستند. این به ویژه برای تصاویر بزرگ صدق می کند.
• تصاویر PNG: به عنوان جایگزینی برای GIF، محبوبیت بیشتری دارند. PNG از رنگ های بیشتری نسبت به GIF پشتیبانی می کند و با ذخیره مجدد مانند JPEG با گذشت زمان بی کیفیت نمی شود. حتی اگر نوع فایل PNG بیشتر استفاده شود، اندازه فایل هنوز هم می تواند بسیار بزرگ تر از تصاویر JPEG باشد.

در اینجا یک مثال فوق العاده وجود دارد که اندازه پرونده تصویر برای هر سه نوع پرونده در 24 کیلوبایت ثابت نگه داشته شده است:

همانطور که مشاهده می کنید JPEG در اینجا بسیار بهتر از بقیه انواع است. برای اینکه در همان اندازه کم فایل باقی بمانند، GIF و PNG باید از نظر کیفیت کاهش یابند.

نکات انتخاب انواع فایل تصویر برای وب سایت

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

6. تصاویر کوچک خود را بهینه کنید

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

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

• اندازه فایل های کوچک را تا حد ممکن کم کنید. شاید در اینجا به شما اجازه داده شود که کیفیت را به خاطر اندازه فایل کمتر فدا کنید. به یاد داشته باشید تجمع عکس های کوچک شما تأثیر زیادی بر زمان بارگیری صفحه خواهد داشت.
• متن alt تصویر خود را متنوع کنید و متنی را که برای نسخه های بزرگ تر همان تصویر استفاده می کنید کپی نکنید. در حقیقت بهتر است متن alt را بسیار متفاوت انتخاب کنید. آخرین چیزی که باید بدانید این است که بهتر است تصویر کوچک به جای تصویر بزرگ تر ایندکس شود. می توان فایلی ایجاد کرد که متن alt را کاملاً کنار بگذارد.

7. از تصاویر نقشه سایت استفاده کنید

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

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

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

8. مراقب تصاویر تزئینی باشید

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

در اینجا چند نکته برای کاهش اندازه فایل تصاویر تزئینی وجود دارد:

• برای تصاویری که حاشیه یا الگو های ساده سایت شما را می سازند، از PNG-8 یا GIF استفاده کنید. شما می توانید تصاویری با ظاهری زیبا ایجاد کنید که اندازه آن ها فقط چند صد بایت باشد.
• در صورت امکان به جای استفاده از تصاویر، از CSS برای ایجاد مناطق رنگی استفاده کنید. برای جایگزینی تصاویر تزئینی تا حد امکان از یک طراحی CSS استفاده کنید. (به جای تصویر از کد استفاده کنید و کد ها را بهینه کنید.)
• نگاهی دقیق به تصویر زمینه بزرگ به سبک کاغذ دیواری بیندازید. این ها می توانند فایل های عظیمی باشند. بدون افت کیفیت تصویر، آن ها را تا حد ممکن کوچک کنید.

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

9. هنگام استفاده از شبکه های تحویل محتوا (CDN) احتیاط کنید

شبکه های تحویل محتوا (CDN) محلی برای میزبانی تصاویر و سایر فایل های رسانه ای هستند. آن ها می توانند سرعت بارگذاری صفحه شما را افزایش دهند و به حل مشکلات پهنای باند کمک کنند. هرچند یک مشکل مهم در بک لینک وجود دارد. همانطور که می دانید بک لینک برای سئوی سایت بسیار مهم است و هرچه بک لینک های بیشتری داشته باشید، سایت شما در موتور های جستجو بهتر عمل می کنند.

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

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

10. تصاویر خود را آزمایش کنید

هدف اصلی بهینه سازی تصاویر کمک به افزایش عملکرد وب سایت شما است. ما در مورد کاهش اندازه پرونده ها و ایندکس کردن تصاویر شما توسط موتور های جستجو صحبت کردیم، اما در مورد آزمایش تصاویر برای سنجیدن اینکه چه چیزی به مشتری ارائه می دهید تا نرخ تبدیل شما افزایش پیدا کند، چه می کنید؟

• تعداد تصاویر محصول در هر صفحه را آزمایش کنید: از آنجا که زمان بارگیری برای برخی از سایت های تجارت الکترونیکی غیر میزبان، مسئله ساز است، ممکن است متوجه شوید که کاهش تعداد تصاویر در یک صفحه باعث افزایش نرخ کلیک و فروش می شود. همچنین این امکان وجود دارد که ارائه تصاویر زیاد در هر صفحه باعث بهبود تجربه کاربری شده و منجر به فروش بیشتر شود. تنها راه برای کشف این موضوع آزمایش آن است.
• تست کنید مشتری های شما چه زوایایی از محصول را ترجیح می دهند: این از نکات مهم مربوط به تصویر های سایت شماست. با ارائه دیدگاه هایی که مشتریان می خواهند ببینند، می توانید وفاداری مشتری را افزایش دهید. یک روش عالی برای فهمیدن این مسئله این است که از مشتریان خود در مورد آنچه که هنگام مشاهده عکس های محصول شما بیشتر دوست دارند، نظرسنجی کنید. به طور کلی نظرسنجی و صحبت با مشتریان خود عادت بزرگی برای ورود به آن است. هنوز هم با آزمایش تأیید کنید.
• چند لیست محصول را باید در صفحات دسته بندی آزمایش کنید: 10، 20، 100 محصول؟ تعداد محصولاتی را که در صفحات دسته بندی لیست می کنید آزمایش کنید تا ببینید چه چیزی برای مشتریان شما بهتر است.

منبع: shopify.com