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

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

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

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

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

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

2- متن جایگزین یا تگ Alt تصاویر وب سایت

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

3- تگ عنوان یا تگ عنوان تصاویر سایت

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

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

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

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

3. تصاویر وب سایت را با انتخاب پسوند مناسب بهینه کنید

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

4. بهینه سازی تصاویر سایت با کاهش سایز

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

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

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