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

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

 

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

 

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

 

 

نظرات و پیشنهادات خود را در قسمت دیدگاه ها با ما درمیان بگذارید..

3 پاسخ

دیدگاهتان را بنویسید