چطور به بهترین شکل بهینه‌سازی تصاویر وب‌سایت را انجام دهیم؟

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

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

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

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

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

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

 

بیشتر بخوانید: چگونه سرعت لود شدن سایت را بالا ببریم؟

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

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

  • Freepik: در این سایت می‌توانید عکس‌ها و تصاویر زیبایی پیدا کنید که تعدادی از آن‌ها رایگان و تعداد دیگری پولی هستند. تقریبا از شیر مرغ تا جان آدمیزاد در سایت freepik پیدا می‌شود.

 

  • Unsplash: در این سایت هم می‌توانید تصاویر زیادی را که اغلب توسط عکاسان ماهر دنیا گرفته شده را تهیه کرده و در سایت خود از آن‌ها استفاده کنید. عکس‌های این سایت گرافیکی نیستند و می‌توانند گزینه‌های مناسبی برای پیدا کردن عکس‌های واقعی باشند.

 

  • Flickr: از بزرگ‌ترین منابع موجود برای پیدا کردن عکس و تصاویر در اینترنت، سایت flickr است. می‌توانید با مراجعه به این سایت به دنیایی از عکس‌ها و تصاویر دست پیدا کنید.

 

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

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

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

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

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

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

 

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

 

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

 

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

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

  • فرمت JPEG معمول‌ترین فرمت استفاده شده در تصاویر است که به صورت گسترده از آن استفاده می‌شود. این فرمت می‌تواند برای ذخیره‌ی عکس‌هایی با سایز بزرگ که در آن از رنگ‌های زیادی استفاده شده مناسب باشد.

 

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

 

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

 

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

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

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

 

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

 

سایت فشرده‌سازی عکس tinypng

 

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

 

سایت فشرده‌سازی عکس compressor.io

 

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

سایت فشرده‌سازی عکس karkenio برای بهینه‌سازی تصاویر سایت

 

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

 

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

 

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

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

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

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

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

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

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

 

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

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

 

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

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

  • EWWW Image Optimizer:این افزونه بیش از ۶۰۰۰۰۰ نصب فعال دارد و می‌تواند در بهینه سازی تصاویر به کمک شما بیاید. از آنجا که فشرده سازی و بهینه کردن عکس‌ها در سرورهای خود این افزونه صورت می‌گیرد، منابع هاست شما آزاد هستند و می‌توانید بدون نگرانی از آن استفاده کنید. تصاویر قبلی که بارگذاری کردید هم می‌توانند توسط این افزونه بهینه شوند.

 

  • Smush it: این افزوه با بیش از ۱ میلیون نصب فعال، از محبوب‌ترین افزونه‌های بهینه سازی تصاویر در وردپرس است. امکان بهینه سازی همزمان ۵۰ عکس در آن وجود دارد و می‌توانید حداکثر و حداقل سایز تصاویر و حداکثر اندازه‌ی زرولوشن را در آن مشخص کنید تا کار بهینه سازی خود را شروع کند.

 

  • ShortPixel Image Optimizer: این افزونه بیش از ۹۰۰۰۰ نصب فعال دارد و می‌توانید به صورت همزمان ۱۰۰ عکس را بهینه کنید. تصاویر بهینه شده و تصاویر اصلی در پوشه‌های مجزا نگهداری می‌شوند و می‌توانید به مقایسه‌ی تصاویر، قبل و بعد از بهینه سازی بپردازید تا میزان این کار را تعیین کنید. امکان بهینه کردن عکس‌های قدیمی سایت هم توسط این افزونه وجود دارد.

 

کلام پایانی

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

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

پیش به سوی یادگیری بیشتر

جولای 7, 2020

0 پاسخ به "چطور به بهترین شکل بهینه‌سازی تصاویر وب‌سایت را انجام دهیم؟"

    ارسال یک پیام

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    به شما وفا داریم ، طراحی شده با مقدار زیادی 💜 توسط آنلاینر.
    دوره دهم توراهه ، جا نمونی... 😉
    دریافت مشاوره رایگان و خرید دوره