بهینه سازی عکس ها برای استفاده در وب سایت 

اگر نگاهی ساده به سایت ها بیندازید به راحتی متوجه خواهید شد که حجم بالایی از محتوای سایت ها (در حدود 60%) از تصاویر تشکیل شده است. استفاده از تصاویر به سایت شما رنگ تازه ای میدهد و بدون تصویر سایت شما یک سایت خشک و بدون روح خواهد بود و این تصاویر هستند که محتوای دیداری برای خواننده را ایجاد می کنند و بسیاری از مفاهیم قابل ملموس تر می سازد. اگر شما یک فروشگاه اینترنتی داشته باشید این تصاویر هستند که نمایانگر محصولات شما می باشند. اما باید به این نکته توجه کرد که  استفاده از تصاویر نیز باید با رعایت اصولی باشد که اگر این اصول رعایت نگردد باعث افت کیفیت سایت و از دست دادن کاربران خود خواهید شد و در این موقع است که نه تنها تصاویر جذاب نمی شود بلکه دافع هم میشود. بنابراین اگر تصاویر حجم بالایی داشته باشند بر روی لود شدن سایت تاثیر گذار خواهد بود. بطوریکه طبق تحقیقاتی که صورت گرفته است در صورت دیر لود شدن سایت (بیشتر از 5 ثانیه) از هر 4 کاربر 1 کاربر را از دست خواهید داد. بنابراین سعی کنید که تصاویر باکیفیت اما با حجم کم در سایت خود قرار دهید.

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

1- استفاده از ویژگی title

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

2- استفاده از ویژگی alt

Altمخفف Alternative Text است و در واقع بیانگر این هستند که به خزنده ها کمک میکنند تا تصاویر را بفهمند. برای موتورهای جستجو تصاویر نامفهوم هستند. بنابراین باید این تصاویر را به آنها شناساند. با استفاده از ویژگی alt این امکان برای شما وجود دارد که آن تصویر را به روبات ها شناساند. در واقع کد alt یک راه عالی برای بهینه سازی موتورهای جستجو می باشد. مزیت دیگر ویژگی alt در مواقعی است که تصویر دیر لود می شود و با استفاده از کد بفهمید که آن تصویر چه چیزی بوده است.
< "img src=” image.jpg” alt=”image description” title=” image tooltipe”/>
کد استفاده از ویژگی های alt وtitle در بالا آورده شده است. تگ title در واقع همان tooltipe است که شما با نگه داشتن موس بر روی تصویر نشان داده می شود. پر نکردن Title مشکلی را ایجاد نخواهد کرد اما حتما تگ alt را پر کنید زیرا این تگ تصویر شما را به موتور جستجو معرفی میکند. و تا جایی که ممکن است برای این دو تگ کلمات تکراری به کار نبرید. اما به این موضوع توجه داشته باشید که یکسری از تصاویر مانند کلید خرابی مشکل نیازی ندارند که تگ alt و یا title داشته باشند.             

3- حجم تصاویر

یکی از بخش های مهم برای بهینه سازی تصاویر برای سئو حجم تصاویر است. استفاده از تصاویر سنگین باعث سنگین شدن سایت و دیر لود شدن آن می شود. که سرعت سایت یکی از فاکتورهای مهم رتبه بندی در الگوریتم اخیر پاندا می باشد. اگر در بخش مقالات خود میخواهید از تصویر استفاده کنید تصاویری با اندازه 400*600 مناسب می باشند.

4- تعیین اندازه ابعاد تصاویر

تنظیم ابعاد تصاویر دو مزیت عمده دارد اول اینکه برای سئوی سایت مناسب است و دوم اینکه باعث بالا رفتن سرعت سایت می شود و نیازی نیست که مرورگر ابعاد تصاویر را تنظیم کند.

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

یکی از راه های کاهش حجم تصویر فشرده سازی حجم آن است که تاثیر زیادی در بالا آمدن سایت شما دارد. شما این کار را می توانید با نرم افزارهای رایج نظیر فتوشاپ هم انجام دهید.

6- از فرمت های رایج استفاده نمایید

سعی کنید از فرمت های رایج تصاویر استفاده کنید چرا که بسیاری از مرورگرها فرمت های رایج را پشتیبانی میکنند اما تضمینی برای استفاده از فرمت های غیر رایج و نمایش در مرورگرها وجود ندارد. فرمت های رایج عبارتند از JPEGs, PNGs , GIFs اما فرمت های دیگری مانند TIFFs, RIFs, EXIFs, BMPs, WEBP نیز وجود دارد. اما در کنار رایج بودن فرمت باید به این نکته هم توجه کنید که فرمت مورد نظر از فشرده سازی مناسبی برخوردار باشد. تصاویری با فرمت jpg و png حجم کمی دارند. اگر هم از سیستم مدیریت محتوای وردپرس استفاده میکنید حتما از پلاگین smushit استفاده کنید که باعث می شود تصاویر آپلودی شما را کاهش حجم دهد. از دیگر عوامل در بالا آمدن سریع تصاویر استفاده از هاست با سرعت بالا می باشد اصولا هاست های ارزان قیمت سرعت پایینی دارند. شما همچنین می توانید برای بالارفتن سرعت سایت خود از سرویس cdn استفاده کنید.

معرفی کوتاه انواع فرمت ها

- JPG: یکی از پراستفاده ترین فرمت ها می باشد. از ویژگی مهم این فرمت این است که بدون کاهش کیفیت محسوس می تواند تا حد قابل توجهی فایل را فشرده کنید.
- JIF: این فرمت که هم به صورت تصویر ثابت و هم به صورت انیمیشن دیده میشود. این فرمت دارای 256 رنگ می باشد. از این فرمت بیشتر برای تصاویر تبلیغاتی مثل بنرها و لوگوها و تصاویری که تنوع رنگ کمی دارند استفاده میشود.
- PNG: این فرمت در دو نوع PNG-8و PNG-24وجود دارد PNG-8 که شبیه JIF بدون قابلیت انیمیشنی است و PNG-24 که در این حالت پیکسل ها می تواند به سه صورت شفاف، نیمه شفاف و یا مات باشند.
- BPM: این نوع فرمت فقط در اینترنت اکسپلورر و سیستم عامل پشتیبانی می شود و توصیه ما این است که از این نوع فرمت استفاده نکنید بنابراین از توضیح بیشتر آن اجتناب میکنیم.

7- هیچگاه تصویر را از سایت دیگر کپی نکنید

 این کار نه تنها از نظر اخلاقی درست نمی باشد بلکه از نظر فنی نیز دارای اشکالاتی می باشد. زیرا ممکن است سایت آدرس خود را تغییر داده و یا غیر فعال شود دیگر عکس شما نمایش داده نخواهد شد. و یا اینکه اگر مدیر سایت از hotlink protection استفاده کرده باشد آن تصویر فقط در سایت اصلی نمایش داده خواهد شد.

8- نامگذاری تصاویر

سعی کنید برای تصاویر خود نام هایی مناسب انتخاب کنید. نامی انتخاب کنید که متناسب با تصویر شما باشد نام پیش فرض تصاویر خود را تغییر داده و نام جدیدی برای آن بنویسید. به طور مثال برای تصویر گل رز قرمز از 123.png برای تصویر خود استفاده نکنید و نام red roze_fllower.png مناسب تر می باشد. در واقع این اصل به عنوان یکی از قوانین سئو شناخته  شده است و رعایت آن بر رتبه سایت شما نیز تأثیر دارد. در واقع این کار به مثابه انتخاب کلمات کلیدی برای سایت است. اگر قصد این را دارید تا از چند نام برای تصویر خود انتخاب کنید آنها را با خط فاصله از هم جدا کنید.

9- لینک گذاری بر روی تصاویر

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

  • عدم استفاده از نام های عمومی و معمولی
  • عدم استفاده از نام های بلند
  • عدم استفاده از تصاویر به عنوان لینک دسترسی مهم

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

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

در ادامه چند نکته در نرم افزار فتوشاپ را مدنظر باید داشته باشید:

در اصل بهینه سازی و ذخیره سازی عکس ها با Save کردن آنها شروع نمیشود و قبل از رفتن به سراغ کلید Save کارهایی است که شما باید انجام دهید. ذکر این نکته نیز ضروری است که در این خودآموز اساس کار ما نرم افزار فتوشاپ و گزینه “Save for a Web/Device” میباشد. اولین نکته ای که شما باید آنرا رعایت نماید نکته ای ساده و بدیهی است و شما باید مطمئن شوید که عکس شما در فرمت  RGB قرار دارد و نه CMYK چرا فرمت CMYK بیشتر جهت صنعت چاپ کاربرد دارد و تا هنگامی که شما قصد نمایش عکسها را نمایشگر دارید باید از فرمت RGB استفاده نمایید.چرا فرق بسیاری در نمایش رنگها توسط نور یا کریسیتال و جوهر وجود دارد.

ضمنا این نکته را در نظر داشته باشید که خیلی بهتر است که شما از ابتدا فایل جدید را در مود RGB کار نمایید تا اینکه در مود CMYK کار کنید و بعدا آنرا تبدیل نمایید.شما مود یک عکس را از مسیر Image > Mode میتوانید چک/تعویض نمایید.

دومین نکته این است که اگر عکس شما در ابعاد بسیار بزرگ باشد و شما بخواهید آنرا توسط گزینه Save for a Web/Device ذخیره نمایید اخطاری مبنی بر اینکه اندازه عکس شما بسیار بزرگتر از موارد نیاز جهت ذخیره سازی جهت وب می باشد و فتوشاپ نمیتواند آنرا به بهترین نحو انجام دهد. پس به اندازه و حجم عکس اصلی توجه داشته باشید و انتظار نداشته باشید عکس با حج ۵۰ مگا بایت و ابعاد بسیار بالا را بتوانید بع عکس ۱۰۰ کیلو بایتی با همان ابعاد تبدیل نمایید. پس ابعاد عکس را به ابعاد مورد نظر و کاربردی تبدیل نمایید و حجم بسیار زیادی از عکسهای خود از طریق این کار کسر نمایید.

بعد از اعمال تمامی تغییرات لازمه در عکس (و بعد از اینکه ۲ نکته بالا را نیز انجام دادید) نوبت آن است که وارد محیط Save for a Web/Device بشویم. این منو را از طریق مسیر File>Save for a Web/Device و یا کلید میانبر Alt+CTRl+Shift+S میتوانید بیابید.

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

در صورتی که تعداد رنگ های تصویر شما کم است و در حدود ۵۰ تا ۲۵۵ رنگ است بهتر است که با فرمت gif  یا png-8 ذخیره کنید.

و در صورتی که پراکندگی رنگ کم است اما بیش از ۲۵۵ رنگ است با فرمت png-24 ذخیره کنید.