برگزیده های پرشین تولز

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

skaller

کاربر تازه وارد
تاریخ عضویت
12 جولای 2018
نوشته‌ها
8
لایک‌ها
1
سن
29
بی شک وارد سایت هایی شده اید که از تصاویر به بهترین نحو ممکن استفاده کرده اند و احساس خوب دریافت کرده اید حتی نمی خواهید از آن سایتها خارج شوید چون که از تصاویر بهینه شده و با کیفیت استفاده کرده اند. قطعا فروشگاه های اینترنتی باید از تصاویر جهت نمایش محصول خود استفاده کنند تصور کنید این تصاویر بهینه نشده باشند اتفاقی که می افتد یا سرعت بارگذاری سایت بالا می رود یا از عکس از کادر صفحه خارج می شود و تجربه کاربری بدی را به بازدید کننده انتقال می دهد. موضوع خیلی بدیهی است که تصاویر محتوا را جذاب و خوانایی مطلب را بیشتر می کند و باعث کاهش نرخ خروج از سایت می شود و به طور مستقیم روی سئو سایت شما تاثیر مستقیم می گذارد. پس تا این جای کار اهمیت و نقش اساسی تصاویر در محتوا و پیامی که به راحتی انتقال می دهند را درک کردیم. اما سوال مهمی که پیش می آید این است که تصاویر خود را چگونه پیدا کنیم؟



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



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



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



نام تصاویر را انگلیسی بنویسید
یکی از نکات بسیار مهم و بحث برانگیز در سئو تصاویر نام گذاری آن است عناوین و نکات زیر را در نام گذاری تصاویر سایت خود رعایت کنید تا بهترین نتیجه را بگیرید.

  • نام تصاویر را فارسی یا فینگیلیش قرار ندهید.
  • از – به جای فاصله در نام گذاری تصاویر استفاده کنید.
  • نام تصاویر شامل کلمات کلیدی باشد.


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

1- با استفاده از فتوشاپ
ابزار فتوشاپ قابلیتی تحت عنوان گزینه ی save for web دارد که در این تب می توانیم حجم تصویر را همراه با نمایش کاهش کیفیت تصویر مشاهده کنیم و وقتی به حالت مد نظر رسیدیم همان حالت را ذخیره می کنیم. برای رفتن به این گزینه ابتدا تصویر را در فتوشاپ باز می کنیم و از قسمت file به گزینه ی export و بعد زیر گزینه ی save for web legancy می رویم تا تب باز شود.

photoshop-save-for-web.png




بعد از این که تب باز شد در قسمت بالا سمت چپ عکس اصلی و زیر آن حجم تصویر نوشته شده است و در قست پایین سمت چپ نسخه ی خروجی و زیر آن حجم تصویر نوشته شده است شما می توانید با تغییر دادن زیرگزینه های preset کیفیت مدنظر خود را انتخاب کنید اما پیشنهاد استایل نت همان حالت پیش فرض یا همان PNG-24 که متداول ترین نوع کیفیت است.

photoshop-preset-type-image.png




در نهایت با ذخیره کردن کیفیت مورد نظر، تصویری با حجم کمتر خروجی می گیرید.

2- با استفاده از ابزار آنلاین
اگر به هر دلیلی از فتوشاپ جهت بهینه سازی تصاویر خود استفاده نکردید می توانید از سایت هایی که سرویس کاهش حجم تصویر را ارائه می دهند استفاده کنید. نحوه کار با این ابزارهای آنلاین بدین گونه است که عکس های خود را در یکی از این سایت ها آپلود می کنید و بدون افت کیفیت حجم عکس کاهش می یابد و در نهایت می توانید آن ها را دانلود کنید. چند نمونه از بهترین ابزار های آنلاین کاهش حجم به شرح زیر است:

compressjpeg.com

compressjpeg-reduce-image-size.png


tinypng.com

tinypng-reduce-image-size.png


compressor.io

compressio-reduce-image-size.png





فرمت مناسب را انتخاب کنید

images-type-for-web.png




یکی دیگر از اصولی که در سئو تصاویر تاثیر به سزایی دارد استفاده از فرمت مناسب برای تصاویر داخل وبسایت است که معمولا از 4 نوع فرمت PNG، JPEG، GIF، SVG استفاده می شود که به شرح هر کدام می پردازیم.

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

فرمت png :
این فرمت معمولا بعد از خروجی گرفتن از فتوشاپ بدست می آید و دارای دو نوع PNG-8 و PNG-24است که نوع فرمت PNG-8 فقط 256 رنگ و PNG-24 تعداد بیشماری را پشتیبانی می کند این نوع فرمت کیفیت و حجم بسیار بالایی دارد و همچنین از قابلیت شفافیت پشتیانی می کند و همین مورد دلیل خوبی برای استفاده از آن ها در لوگوها هستند.

فرمت gif :
این فرمت مانند فرمت PNG-8 فقط 256 رنگ را پشتیبانی می کند و همچنین کیفیت بسیار پایین تری نسبت به دو فرمت jpg و png دارد در نتیجه برای عکسهای مهم و با کیفیت از این نوع فرمت استفاده نکنید اما از قابلیت شفافیت و انیمیشن یا تصاویر متحرک پشتیبانی می کند.

فرمت svg :
SVG یا همان Scalable Vector Graphics فرمتی است که به راحتی می توان بدون افت کیفیت عکس، اندازه آن را تغییر داد در واقع این گونه عکس ها با برنامه نویسی بر پایه ی xml ایجاد می شوند و خوشبختانه حجم بسیار کمی هم نسبت به jpg و png دارند استفاده از این فرمت در ایجاد لوگو و آیکون ها این روزها خیلی متداول شده است. تا این جا با انواع فرمت عکس آشنا شدیم با این تفاسیر بهترین فرمت کدام است؟

  • برای عکس های داخل وبسایت می تواند jpeg باشد به این علت که کیفیتی مناسب و حجم کمی دارند.
  • برای لوگو می توان از فرمت png یا svg استفاده کرد به دلیل کیفیت بالایی که دارند.
  • برای انیمیشن ها و تصاویر متحرک باید از فرمت gif استفاده کرد.(استفاده از این فرمت به دلیل متحرک بودن عکس و جذابیتی که ایجاد می کنند بسیار گسترش پیدا کرده است.)


عکس ها را در مسیری مشخص آپلود کنید
سعی کنید همیشه عکس های وبسایت خود را درون مسیری معین و طبقه بندی شده با نام گذاری های مشخص قرار دهید به عنوان مثال دایرکتوری که به شکل زیر است Example.com/public/home/index/8/2018/aks.png را می توان به شکل example.com/public/images/seo/seo.png تغییر داد که هم مسیر مشخص است و هم از کلمات کلیدی در url عکس استفاده شده است چنانچه عکس های هر دسته متفاوت بود می توانید دایرکتوری جدیدی ایجاد کنید و عکس های خود را درون آن آپلود کنید. به عنوان مثال example.com/public/images/design/design.png



از تگ عنوان یا title درون تصاویر استفاده کنید
استفاده کردن از اتریبیوت title درون تگ img به معنای توضیحات اضافی برای عکس مورد نظر است دقت کنید این مورد با اتریبیوت alt اشتباه نشود در واقع اتریبیوت alt متن جایگزین برای عکس است و باید درون آن چیزی نوشته شود که گوگل و موتورهای جستجو را متوجه محتوای عکس کند ولی اتریبیوت title توضیحات اضافه برای عکس است.



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

file-info-image-with-photoshop.png




سپس تمام فیلدها را بر اساس اطلاعات مورد نیاز پر می کنید دقت کنید قسمت copyright status را روی حالت copyrighted قرار دهید.

fill-file-info-image-with-photoshop.png




دقت کنید زمانی که می خواهید عکس را از فتوشاپ خروجی بگیرید در قسمت save for web legacy عبارت metadata عکس را روی حالت copyright and contact info قرار دهید تا کپی رایت روی عکس اعمال شود.

copyright-and-contact-info-image-photoshop.png




نتیجه گیری

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