گزینه سرعت سایت هم برای رتبه بندی سایت در گوگل و هم برای تجربه کاربر بسیار مهم است. بسیاری از کمپانی ها راه ساده و آسان برای بهبود در این موضوع یعنی بهینه سازی تصاویر را نادبده می گیرند!

در چند سال گذشته سرعت بارگذاری صفحه به دلیل ترافیک سایت و رتبه بندی بسیار مهم شده است. کاربران به سایت هایی علاقه دارند که سریع بارگذاری شوند و چون کاربران به سایت های سریع علاقه دارند، گوگل هم به دلیل علاقه کاربران سایت های سریع را می خواهد!
سایت هایی که سرعت بالایی دارند از نظر رتبه بندی در جایگاه های بالاتری قرار می گیرند. (البته استثنائاتی هم وجود داره!)

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

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

تصاویر و سرعت بارگذاری

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

اکنون در دوره ارتباطات سریع هستیم و صفحات کنترل خواهند شد. در دورانی هستیم که سایت ها می توانند تصاویری به بزرگی ۲۵MB را در هر صفحه بارگذاری کنند. این سرعت کم صفحات روی رتبه بندی های سایت ها در نتایج جستجو گوگل و سئو سایت اثرگذار خواهند بود.

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

اما چرا نمی توان بطور کامل روی CMS برای تغییر ابعاد و اندازه تصاویر حساب باز کرد؟

وقتی از سیستم مدیریت محتوا برای تغییر سایز و اندازه تصاویر استفاده می شود فقط ابعاد تصاویر را تغییر می دهد و به صورت پیش فرض تصاویر را فشرده سازی نخواهد کرد. اگر سیستم مدیریت محتوا وردپرس باشد، تصاویر شما بطور میانگین ۱۵ درصد تا ۳۰ درصد بزرگتر از آن خواهد بود که قبل از آپلود شدن فشرده سازی شده باشند.

(پاورقی: البته برای سیستم های مدیریت نظیر وردپرس افزونه هایی نیز جهت کم کردم حجم تصاویر وحود دارد)

اگر CMS تصاویر را به اصطلاح “on the fly” تغییر سایز دهد به این معنی خواهد بود که تصاویر همان طور که دریافت شده اند تغییر سایز داده اند پس تراکم سازی کمی انجام شده است.

این موضع در سایت هایی که تصاویر گوناگون در یک صفحه دارند مشکل ایجاد خواهد کرد. بطور میانگین تصاویر ۴۰ درصد تا ۶۰ درصد از حجم صفحه را شامل می شوند و این امکان وجود دارد که با بهینه سازی قبل از بارگذاری، ۳۰ % تا ۵۰ % از حجم تصاویر کاسته شود!

حالا شما به چه اقداماتی قبل از آپلود عکس در سایت نیاز دارید؟

آماده سازی تصاویر برای سایت

تغییر اندازه تصاویر :

تغییر سایز تصاویر بسیار مهم است. اگر یک تصویر ۲۴۰۰px وجود داشته باشد و چیزی که نیاز باشد یک تصویر ۵۰۰px باشد حتی تغییر ابعاد در سیستم مدیریت محتوا نیاز دارد که تمام داده ها را در تصویر ۲۴۰۰px فشرده سازی کند.

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

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

انواع فایل های تصویری :

ابتدا باید تصاویر را تغییر ابعاد داد، فشرده سازی کرد و پس از آن آپلود کرد. نه تنها تغییر ابعاد و فشرده سازی قبل از آپلود یک موضوع مهم خواهد بود بلکه انتخاب نوع فایل مورد نظر هم کاری مشکل و سخت خواهد بود.

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

انواع فایل های گوناگونی وجود دارد اما بیش ترین نوع فایل های مورد استفاده JPG و PNG است.

همه چیز در باره GIF و WebP

استفاده از فایل GIF تا زمانی که یک تصویر بصورت انیمیشنی نباشد مجاز نیست. فایل های WebP هم باعث از دست رفتن کیفیت می شوند و در بیشتر مرورگرها بجز اپرا و کروم هم پشتیبانی نیمشوند!

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

اگر میخواهید از فایل های WebP استفاده کنید، می توان از امکانات گوگل استفاده نمود.

استفاده از نوع فایل صحیح

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

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

JPG یا PNG؟ مسئله این است!

اختلاف این است: از دست دادن در مقابل از دست ندادن!

JPG :

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

برای اینکه مشکلی در تصاویر صفحات بوجود نیاید در هنگام ذخیره یک فایل هیچ گاه کمتر از نرخ ۵۰ % کیفیت را استفاده نکنید. با کارت های گرافیکی امروزی نرخ ۵۰ % را می توان کیفیت مناسبی دانست. در هنگام استفاده از این نوع فایل از تنظیمات پروگرسیو و یا تدریجی استفاده کنید چون در زمان بارگذاری امکان پرش صفحه وجود دارد.

PNG :

این نوع با نام تراکم سازی بدون از دست دادن شناخته می شود. در این حالت با ذخیره فایل اطلاعات و داده ها از بین نمی روند. دو دسته از این فایل ها وجود دارد یکی نسخه ۲۴بیتی و دیگری نسخه ۸بیتی. وقتی که سعی به کاهش سایز فایل دارید از نسخه و تنظیمات ۸ بیتی استفاده کنید. وقتی که یک فایل PNG در فتوشاپ ذخیره می شود از گزینه Export استفاده کنید. می توانید رنگ های کمتر و یا سیاه و سفید استفاده کنید که باعث می شود فایل کاهش حجم ۵۰ % تا ۹۰ % داشته باشد.
در تصاویر زیر تفاوت یک فایل لوگو را در حالات PNG نسخه ۸بیتی ، PNG نسخه ۸بیتی سیاه و سفید و PSD را مشاهد خواهید کرد.

فایل اصلی = ۱۱۰KB

Standard Photoshop Export – PNG 8 = 13.8 KB

Web Legacy Photoshop Export – PNG 8 = 4.56KB

Web Legacy Photoshop Export – PNG 8 (grayscale 4 colors) = 1.41KB

با استفاده از نسخه PNG-8 با کاهش رنگ، سایز و اندازه تصویر ۹۵ % کاهش پیدا خواهد کرد. یعنی فایل ۱۱۰KB به اندازه ۱٫۴۱KB خواهد رسید!

فایل های SVG

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

در این مورد مطمئن شوید که تصاویر SVG کم حجم تر از تصاویر ذخیره شما باشد. هم چنین از اجرای تگ ها و برچسب ها اطمینان حاصل کنید تا از منافع تگ های alt بهرمند شوید. یک ابزار مناسب برای ایجاد فایل ها و تصاویر SVG که می توان مورد استفاده قرار داد Inkscape است.

سرعت بارگذاری سایت

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

نتیجه گیری:

همانطور که بارها و بارها اعلام شده، سرعت بارگذاری سایت برای کاربران سایت بسیار مهم است و تاثیر مستقیم بر بانس ریت سایت شما خواهد گذاشت. البته همانطور که در مقاله هم گفته شده، این سرعت بارگذاری در نسخه موبایل بسیار مهمتر است، ولی شما می بایست سایت را در هر دو نسخه موبایل و دسکتاپ از نظر سرعت بارگذاری بهینه سازی نمایید.

منبع