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

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

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

پادکست

۱. بهینه سازی توضیحات تصاویر سایت

سه روش اصلی واسه توضیح یه تصویر در کدهای HTML هست که امکان شناسایی و بهینه سازی تصاویر سایت رو واسه موتورهای جستجو جفت و جور میکنه، : نام فایل، تگ عنوان (Title tag) و متن جانشین (Alt tag).

۱- نام فایل تصاویر سایت

نام فایل تصاویر کمک زیادی به موتورهای جستجو در شناسایی و درک موضوع اونا میکنه. واسه بهینه سازی تصاویر بهتره که نام اونا رو متناسب با موضوع عکس انتخاب کرده و در نام گذاری از خط تیره ( – ) بجای خط زیر ( _ ) استفاده کنین.

۲- متن جانشین یا همون Alt tag تصاویر سایت

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

۳- تگ عنوان یا همون Title tag تصاویر سایت

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

۲. بهینه سازی تصاویر سایت با به کار گیری ابعاد مشخص

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

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

تعیین اندازه تصاویر در وردپرس

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

۳. بهینه سازی تصاویر سایت با انتخاب پسوند مناسب

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

۴. بهینه سازی تصاویر سایت با کم شدن حجم

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

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

تنضیمات عمومی ذخیره و بهینه سازی تصاویر در فتوشاپ

نرم افزار فتوشاپ گزینه ای با عنوان “Save for Web Devices” در نظر گرفته که به شما امکان کاهش حجم فایل و مقایسه همزمان کیفیت تصویر اولیه با نمونه بهینه سازی شده رو می ده. در صورت نبود دسترسی به اون می تونین واسه بهینه سازی تصاویر خود از نرم افزار RIOT که رایگان بوده و به همین منظور طراحی شده استفاده کنین. این نرم افزار تموم امکانات مربوط به بهینه سازی تصاویر رو در اختیار شما قرار می ده.

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

بهینه سازی تصاویر با به کار گیری نرم افزار RIOT

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