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

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

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

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

 image optimizing یا بهینه سازی تصاویر سایت چیست؟

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

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

قبل از هر چیز فقط قصد دارم سریع به جواب خود برسید  و بهینه سازی تصاویر سایت را یاد بگیرید. عکس بی ربط بالا را بنا به دلیلی برایتان قرار دادم. عکس بالا که در ابتدا دانلود کرده بودم حجمی در حدود 2 مگابایت و سایز 1200 * 750 داشت. اما عکس روبرو برای شما با 60 کیلوبایت و سایز 800 * 450 برای تان نمایش داده می شود. حال چه اتفاقاتی افتاده است؟ در ادامه مقاله به پاسخ تان در مورد بهینه سازی تصاویر سایت خواهید رسید.

مهم‌ ترین نقش بهینه سازی تصاویر سایت، تاثیر گذاری آن روی سرعت سایت است. شاید اگر این نکته را بدانید که سایت شما تنها 3 تا 5 ثانیه فرصت دارد تا لود شده و خودش را به کاربر نشان دهد، مشتاق شوید که هرچه سریع‌ تر ادامه‌ این مقاله را بخوانید تا ببینید چطور می‌ توانید آن‌ ها را بهینه کنید و سرعت سایتتان را افزایش دهید.

بیشتر در آغازینو بمانید: محتوای سئو شده چیست؟

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

توجه! موضوع مهمی در مورد بهینه سازی تصاویر سایت وجود دارد که کمتر به آن اشاره می شود، کیفیت هاست سایت شما است که رابطه مستقیمی با لود شدن عکس های شما و سرعت سایت دارد!

در ادامه به شما چند نکته‌ مهم را یادآوری می‌ کنیم تا به کمک سرعت سایت شما بیاییم.

پیدا کردن عکس مناسب برای سایت

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

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

اگر شما نمی‌ توانید عکس‌ های اختصاصی خودتان را تولید کنید، می‌ توانید از سایت‌ های جستجو عکس که در ادامه به شما معرفی می‌ کنیم، استفاده کنید تا تصاویری با کیفیت و جذاب دریافت کنید:

• Freepik: در این سایت می‌ توانید عکس‌ ها و تصاویر زیبایی پیدا کنید که تعدادی از آن‌ ها رایگان و تعداد دیگری پولی هستند. تقریبا از شیر مرغ تا جان آدمیزاد در سایت freepik پیدا می‌ شود.
• pexels: یکی از مطرح ترین سایت ها برای پیدا کردن عکس خوب برای سایت، سایت pexels می باشد. این سایت با ارائه تصاویر یونیک و منحصر به فرد می تواند باعث زیبایی سایت شما شود. بازدید این سایت بسیار بالا بوده و می توانید ویو هر عکس را در پایین تصویر مشاهده کنید.
• Unsplash: در این سایت هم می‌ توانید تصاویر زیادی را که اغلب توسط عکاسان ماهر دنیا گرفته شده را تهیه کرده و در سایت خود از آن‌ ها استفاده کنید. عکس‌ های این سایت گرافیکی نیستند و می‌ توانند گزینه‌ های مناسبی برای پیدا کردن عکس‌ های واقعی باشند.
• Flickr: از بزرگ‌ ترین منابع موجود برای پیدا کردن عکس و تصاویر در اینترنت، سایت flickr است. می‌ توانید با مراجعه به این سایت به دنیایی از عکس‌ ها و تصاویر دست پیدا کنید.

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

مهم‌ ترین نکات بهینه سازی تصاویر سایت

نام‌ گذاری هوشمندانه و توصیفی

قبل از اینکه عکسی را در سایت بارگذاری کنید، باید نام آن را با توجه به موضوع عکس تغییر دهید. قطعا استفاده از نام‌ های نامفهومی مثل abcD12.jpg، هیچ وقت مورد جستجوی کاربران قرار نمی‌ گیرد.

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

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

نوشتن متن جایگزین تصویر (alt tag)

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

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

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

بیشتر بدانید: سئو چیست؟

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

تصاویری که در سایت‌ بارگذاری می‌ شوند، معمولا در چها فرمت WEBP، JPEG، PNG و GIF قرار دارند. فرمت SVG هم وجود دارد که بیشتر برای آیکون‌ های سایت مورد استفاده قرار می‌ گیرد. هنگام ذخیره سازی تصاویر در نرم‌افزارهای ویرایش عکس، می‌ توانید پسوند مورد نظر را انتخاب کرده و تصویر را ذخیره کنید.

• فرمت JPEG معمول‌ ترین فرمت استفاده شده در تصاویر است که به صورت گسترده از آن استفاده می‌ شود. این فرمت می‌ تواند برای ذخیره‌ عکس‌ هایی با سایز بزرگ که در آن از رنگ‌ های زیادی استفاده شده مناسب باشد.
• فرمت PNG هم از محبوبیت بالایی برخودار است و با فشرده‌ سازی مناسب تصاویر، می‌ تواند در کاهش حجم آن‌ ها موثر باشد. البته به این نکته توجه داشته باشید که تصویری با پسوند png، در مقایسه با تصویری با پسوند jpg و در کیفیت یکسان، حجم بالاتری دارد. اگر بخواهید حجم این عکس‌ ها را کاهش دهید ممکن است جزئیات عکس و قسمتی از رنگ‌ های آن از بین برود، پس بهتر است برای تصویری که رنگ‌ های کمتری در آن‌ ها بکار رفته شده از این فرمت استفاده شود.
• تصاویری با فرمت GIF را به احتمال زیاد در شبکه‌ اجتماعی نظیر تلگرام دیده‌ اید. گیف‌ ها با توجه به پشتیبانی کمتر از رنگ‌ ها، ممکن است از کیفیت خیلی بالایی برخودار نباشند، اما به دلیل حجم مناسبی که دارند، از نظر بهینه سازی عکس‌ های سایت مورد توجه قرار می‌ گیرند و برای تصاویر کوچکی که رنگ‌ های محدودی در آن‌ ها استفاده شده مناسب هستند.
•  فرمت WEBP فرمت عجیبی است! عکس های WEBP از نظر کیفیت میزان بسیار قابل قبولی را دارا هستند و در کنار این کیفیت حجم های کمتری هم نسب به سایر فرمت ها دارند. بهترین حالت برای بهینه سازی تصاویر سایت مسلما webp است.

فشرده سازی و کاهش حجم تصاویر

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

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

عنوان مقاله بهینه سازی تصاویر سایت در 20 ثانیه است. به قسمت مربوطه و مهم کار رسیده اید! می توانید تصاویر خود را تنها در فتوشاپ قرار دهید و کیفیت آن را کم کنید به همین راحتی! در ادامه حتی روش های آسان تری هم به شما معرفی خواهد شد که اولین مورد بهینه سازی تصاویر سایت با نرم افزار فتوشاپ می باشد.

اولین کاری که شما باید انجام دهید، این است که موقع ذخیره سازی عکس در نرم‌ افزار فتوشاپ، در منو بالا سمت چپ روی گزینه file و سپس مطابق شکل بر روی گزینه Export و در نهایت گزینه‌ save for web را انتخاب کنید.

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

عکس نامرتبطی که در ابتدای مقاله دیدید با این روش برای شما بهینه سازی شده بود تا در کمترین زمان عکس را لود کنید!

همچنین در اینجا می‌ توانید از سایت‌ هایی که به شما معرفی می‌ کنیم کمک بگیرید تا بدون کاهش قابل توجه کیفیت عکس، حجم آن‌ را کاهش دهید:

• Tinypng.com: این ابزار محبوب و رایگان، می‌ تواند به راحتی حجم تصاویر شما را بدون تغییر محسوس در کیفیت آن کاهش دهد. امکان آپلود همزمان 20 تصویر برای شما وجود دارد و می‌ توانید پس از اندکی صبر، تصویر جدید با حجم کمتر را تحویل گرفته و دانلود کنید. تصاویری که در این سایت آپلود می‌ کنید باید با فرمت  jpg یا png باشند و حجم بالای 5 مگ هم نداشته باشند. استفاده از این ابزار بسیار راحت است و با کشیدن عکس و رها کردن آن در قسمت مشخص شده، عملیات کاهش حجم شروع می‌ شود. این روش هم شما می توانید بهینه سازی تصاویر سایت در 20 ثانیه را تجربه کنید.

• Compressor.io: این ابزار فوق‌ العاده، امکان آپلود عکس‌ هایی با فرمت‌ های jpg، png، gif و svg را به شما می‌ دهد و می‌ توانید به راحتی حجم تصاویرتان را تا 90% کاهش دهید، بدون آنکه تغییر کیفیتی در آن‌ها ببینید. استفاده از این ابزار هم بسیار آسان است و با یک کشیدن و رها کردن تصویر در جای مشخص شده، می‌ توانید عملیات کاهش حجم را شروع کنید و پس از لحظاتی تصویر کم حجم را تحویل بگیرید.

Kraken.io: این ابزار هم می‌ تواند یکی از بهترین گزینه‌ های انتخابی شما باشد. می‌ توانید عکس‌ ها را پس از فشرده سازی در قالب فایل زیپ یا به صورت جداگانه دریافت کنید. در این سایت علاوه بر فرمت jpg و png، می‌ توانید عکس‌ هایی با فرمت gif را هم فشرده کنید.

• Imageoptimizer.net: این سایت این امکان را در اختیار شما قرار می‌ دهد تا علاوه بر انتخاب میزان بهینه سازی تصاویر سایت که مدنظرتان است، سایز تصویر و فرمت ذخیره سازی آن را هم تغییر دهید.

تبدیل فرمت عکس ها به WEBP

با توجه به بیان اینکه فرمت WEBP فرمت بهتری نسبت به سایر فرمت ها می باشد، تبدیل فرمت های عکس به WEBP می تواند امری مهم و ضروری باشد. (نرم افزار فتوشاپ قادر تبدیل عکس به WEBP نیست). حال دو سایت WEBP Converter و Online-Convert برای سایت های مناسبی هستند که می توانید تصاویر خود را به webp تبدیل کنید.

ابعاد مناسب عکس برای سایت

اینکه سایت شما به گونه‌ ای طراحی شده باشد که تمام عکس‌ ها را در ابعاد 500 در 500 نشان دهد، اما شما تصاویرتان را در ابعاد 1000 در 1000 ذخیره کرده باشید، تنها به افزایش حجم تصاویر و سقوط وب‌ سایتتان کمک کرده‌ اید و این مهم ترین نکته در بهینه سازی تصاویر سایت شما می باشد. در کدهای HTML سایت، دو ویژگی طول و عرض برای تصاویر مشخص شده و می‌ توانید از طریق آن‌ ها، سایز عکس را تغییر دهید.

همچنین در وردپرس به راحتی می‌ توانید در بخش تنظیمات و انتخاب گزینه‌ رسانه، تنظیمات مربوط به سایز عکس‌ ها را انجام دهید، اما این روش خیلی منطقی نیست و بهتر است تصاویر را قبل از بارگذاری در سایز مدنظرتان ذخیره کنید. با استفاده از ابزارهای مختلف مثل فتوشاپ می‌ توانید این کار را به راحتی انجام دهید. در صورتی که به فتوشاپ دسترسی ندارید، می‌ توانید از سایت‌ های مطرحی مثل  PicMonkey ،Pixlr و FotoFlexer هم استفاده کنید.

حواستان به شبکه‌ های تحویل محتوا (CDN) باشد

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

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

اثر لنگر  چیست؟

پیاده‌ سازی CDN در سایت‌ های وردپرسی کار راحتی‌ است و با تهیه‌ اشتراک از CDN و استفاده از افزونه‌ هایی مثل  Litespeed cache یا WP Rocket اقدام به پیکربندی آن کنید. اما این فرشته‌ های نجات یک مشکل برای سئو سایت شما ایجاد می‌ کنند. اگر وب‌ سایت دیگری به تصاویر سایت شما لینک بدهد، در واقع به CDN شما لینک داده و این بک لینک ایجاد شده تاثیری بر بهبود سئوی سایت شما ندارد.

در واقع ارزش این بک لینک‌ ها که یک مولفه‌ مهم در سئو وب‌ سایت هست را از دست می‌ دهید.

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

موبایل فرندلی بودن سایت

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

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

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

• EWWW Image Optimizer: این افزونه بیش از 600000 نصب فعال دارد و می‌ تواند در بهینه سازی تصاویر به کمک شما بیاید. از آنجا که فشرده سازی و بهینه کردن عکس‌ ها در سرورهای خود این افزونه صورت می‌ گیرد، منابع هاست شما آزاد هستند و می‌ توانید بدون نگرانی از آن استفاده کنید. تصاویر قبلی که بارگذاری کردید هم می‌ توانند توسط این افزونه بهینه شوند.
• Smush it: این افزوه با بیش از 1 میلیون نصب فعال، از محبوب‌ ترین افزونه‌ های بهینه سازی تصاویر در وردپرس است. امکان بهینه سازی همزمان 50 عکس در آن وجود دارد و می‌ توانید حداکثر و حداقل سایز تصاویر و حداکثر اندازه‌ زرولوشن را در آن مشخص کنید تا کار بهینه سازی خود را شروع کند.
• ShortPixel Image Optimizer: این افزونه بیش از 90000 نصب فعال دارد و می‌ توانید به صورت همزمان 100 عکس را بهینه کنید. تصاویر بهینه شده و تصاویر اصلی در پوشه‌ های مجزا نگهداری می‌ شوند و می‌ توانید به مقایسه‌ تصاویر، قبل و بعد از بهینه سازی بپردازید تا میزان این کار را تعیین کنید. امکان بهینه کردن عکس‌ های قدیمی سایت هم توسط این افزونه وجود دارد.

پرفورمنس مارکتینگ ، بازاریابی ای عجیب غریب!

کلام پایانی

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

سوالات متداول

موبایل فرندلی بودن چیست؟

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

فرمت WEBP چیست؟

فرمت عجیبی است! عکس های WEBP از نظر کیفیت میزان بسیار قابل قبولی را دارا هستند و در کنار این کیفیت حجم های کمتری هم نسب به سایر فرمت ها دارند. برای کسب اطلاعات بیشتر وارد مقاله شوید.