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

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

 

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

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

 

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

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

 

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

 

 

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

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

 

 

۴- کاهش حجم تصاویر

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

 

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

 

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

• آخرین بروزرسانی مطلب : ۱۹ مرداد ۱۳۹۸
• منبع مطلب : فری اسکریپت