کم کردن حجم عکس و تاثیر آن بر سئو

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

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

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

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

اگر زمان کافی برای مطالعه مقاله را ندارید پیشنهاد می‌کنیم با مشاهده ویدئو زیر در 12 دقیقه (58 مگابایت) با روش‌های کاهش حجم عکس به صورت آنلاین و نرم افزاری آشنا شوید.

 

کم کردن حجم عکس چه تاثیری بر سئو سایت دارد؟

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

1- جلوگیری از خروج سریع کاربران

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

کم کردن حجم عکس بر کاهش Bounce rate تاثیرگذار است

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

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

2- صرفه جویی در فضای هاست و پهنای باند

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

صرفه جویی در فضای هاست و پهنای باند با کم کردن حجم عکس

تصویر بالا صفحه اصلی یک سایت اینترنتی را نشان می‌دهد که حجم آن 4.3 مگابایت است! تصور کنید که در روز 1000 نفر از این صفحه بازدید کنند، در نتیجه برای میزبانی همین صفحه از سایت به 120 گیگابایت پهنای باند ماهانه نیاز خواهیم داشت. جالب است که فقط تصویر موتور سیکلت نزدیک به 3 مگابایت است و با بهینه‌سازی (بدون کاهش کیفیت) به 150 کیلوبایت کاهش می‌یابد.

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

3- همراهی با الگوریتم جدید گوگل و مفهوم Core Web Vitals

گوگل به طور رسمی اعلام کرده است که از سال 2021، فاکتورهای مرتبط با تجربه کاربری را در الگوریتم‌های رتبه‌بندی نتایج جستجو وارد خواهد کرد. این فاکتورها که بخش مهمی از آن را مفاهیم Core Web Vitals تشکیل می‌دهد، نه تنها بر سرعت بارگذاری صفحه که بر موضوعات عمیق‌تری شامل زمان نمایش بزرگترین المان صفحه (Largest Contentful Paint) تمرکز دارند.

- همراهی با الگوریتم جدید گوگل و مفهوم Core Web Vitals

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

چگونه حجم عکس را کم کنیم؟ بدون افت کیفیت!

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

فتوشاپ؛ بهترین نرم افزار کاهش حجم عکس

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

1- ذخیر تصویر برای نمایش در وب (Save for web)

فتوشاپ نرم افزار محبوب و قدرتمند برای طراحان گرافیک است، توامندنی‌های این نرم افزار بسیار گسترده است. با توجه به اینکه فتوشاپ برای بیشتر مدیران سایت‌ها شناخته شده و در دسترس است، یکی از محبوب‌ترین روش‌های کاهش حجم عکس بدون افت کیفیت، استفاده از قابلیت Save For Web است. تصویر مورد نظر را در این نرم افزار باز کرده و پس از انجام تغییرات و اصلاحات به مسیر File > Export > Save for Web بروید. همچنین می‌توانید از کلید کنترلی ctrl+shift+Alt+S استفاده کنید.

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

کم کردن حجم عکس با استفاده از فتوشاپ و ابزار Save for web

2- انتخاب فرمت مناسب

نوع فرمت انتخابی برای تصویر، بر حجم آن تأثیرگذار خواهد بود. با توجه به نوع تصویر و محل مورداستفاده آن باید متناسب‌ترین فرمت را انتخاب کنید. برای تصاویری که طبیعی و واقعی هستند (مثلا یک منظره، خودرو، انسان و …) و تنوع رنگ در آنها زیاد است، بهترین انتخاب فرمت JPG با کیفیت 55 تا 65 است. اگر عکس مورد نظر شما با نرم افزارهای گرافیکی طراحی شده و تعداد و تنوع رنگ‌ها در آن کم است پیشنهاد می‌کنیم از گزینه PNG-8 استفاده کنید.

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

انتخاب فرمت مناسب برای کاهش حجم تصاویر در سایت

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

3- انتخاب سایز استاندارد برای تصاویر

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

تصویر زیر نحوه نمایش تصاویر در سایت آکادمی وبسیما است. بزرگترین فضای موجود برای نمایش تصاویر عرض 820 پیکسل است. هرچقدر هم که تصویر ما بزرگتر از آن باشد برای کاربر تفاوتی نخواهد کرد. یک تصویر با عرض 1600 پیکسل عملا حجمی 4 برابر تصویر 800 پیکسلی دارد (عرض*ارتفاع).

انتخاب سایز استاندارد برای تصاویر برای کاهش حجم

برای انجام این کار نیز می‌توانید از فتوشاپ یا ابزار کراپ در انواع نرم‌افزارهای ادیت تصویر استفاده کرد. برای تغییر سایز طول و عرض یک تصویر در فتوشاپ کافیست به مسیر image > image size مراجعه کرده و در کادر width و height میزان طول و عرض دلخواه را وارد کنید.

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

استانداردها و تکنیک‌های بهینه‌سازی تصاویر و بهبود سرعت سایت به صورت کامل و کاربردی در کارگاه آموزش سئو تکنیکال ارائه می‌شود.

آموزش سئو تکنیکال

استانداردهای سئو در طراحی و کدنویسی

  • 16 ساعت
  • 834 دانشجو
3,390,000 تومان
اطلاعات بیشتر

کاهش حجم عکس با ابزارهای آنلاین

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

imagecompressor.com ؛ ساده و سریع

کار کردن با این وب‌سایت بسیار ساده است. شما می‌توانید تا 20 تصویر را به صورت همزمان در این ابزار وارد کرده و نسخه بهینه شده آنها را در یک فولدر زیپ شده دریافت کنید.

ابزار imagecompressor.com برای کاهش حجم عکس به صورت آنلاین

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

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

این ابزار به شما اجازه می‌دهد فاکتور کیفیت را تغییر داده و تاثیر آن بر کیفیت تصویر را در لحظه مشاهده کنید. براساس تنوع رنگ، محل استفاده و محتوای تصویر این عدد بهتر است بین 85 تا 95 انتخاب شود (پیش فرض روی 90). در تصویر بالا شما مقایسه نسخه بهینه شده (سمت راست) با نسخه اصلی را مشاهده می‌کنید. جالب است که با کاهش 84 درصدی حجم عکس (520 کیلوبابیت) چشم ما قادر به تشخیص تفاوت کیفیت آنها نیست.

tinypng.com ؛ استفاده از API

ابزار دوم سایت tinypng است که مشابه ابزار قبلی اجازه ارسال همزمان 20 تصویر و دریافت آنها به صورت زیپ یا ارسال به Dropbox را دارد.

کم کردم حجم فایل عکس با سایت tinypng

میزان فشرده‌سازی تصویر در این ابزار 89 درصد بوده که از imagecomressor بیشتر است. تفاوت اصلی در این سایت این است که امکان مقایسه قبل و بعد از بهینه‌سازی و تعیین میزان فشرده‌سازی را ندارید ولی این سایت از یک سرویس API نیز پشتیبانی می‌کند (رایگان نیست) که به شما اجازه می‌دهد تصاویر را به صورت اتوماتیک برای این ابزار ارسال کرده و نسخه بهینه شده را (حتی در ابعاد دلخواه) دریافت کنید. به عنوان مثال سایتی مثل دیوار که تصاویر آن را کاربران بارگذاری می‌کنند می‌تواند با استفاده از این ابزار همه عکس‌ها را پیش از انتشار بهینه‌سازی کرده و از حفظ کیفیت و سرعت سایت خود مطمئن باشد.

compressnow.com ؛ کاهش حجم تصاویر gif

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

کاهش حجم عکس با فرمت gif به صورت آنلاین

برخلاف سایت tinypng که تصاویر با حجم بیشتر از 5 مگابایت برا قبول نمی‌کند در این سایت محدودیت سایز به 9 مگابایت افزایش یافته و امکان ارسال 10 تصویر به صورت همزمان در نظر گرفته شده است.

imageresizer.com ؛ تغییر ابعاد تصویر

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

تغییر سایز عکس به صورت آنلاین

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

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

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

امین اسماعیلی

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

پرسش و پاسخ

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

دیدگاه شما را با چه تصویری در سایت نمایش دهیم؟
امتیاز شما به این محتوا ارسال دیدگاه
نوری جوشقانی 8 آبان 1402

خوب دستمریزاد

حمیدرضا جلیلی 26 خرداد 1401

سلام عالی بود ممنونم

محمد علی عصایی 23 شهریور 1400

سلام بین وبسایت هایی که معرفی کردید وبسایت compressor.io هم وبسایت خوبیه برای کاهش حجم تصاویر. قابلیت مقایسه و آپلود و دانلود چند تایی تصاویر رو هم داره.

آکادمی وبسیما 27 شهریور 1400

سلام دوست عزیز
ممنون از پیشنهاد عالی شما

علی طاعتی مرفه 24 بهمن 1399

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

سمیعی 12 آذر 1399

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

زهره ابوالقاسم 10 آذر 1399

من همیشه از magecompressor استفاده می کردم و ابزارهای دیگه ای که معرفی کردید و نمیشناختم. ممنونم ازتون خیلی مقاله جامع و مفیدی بود برای ما نویسنده های محتوا 🙂

آکادمی وبسیما 12 آذر 1399

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

امیری 25 آبان 1399

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

آکادمی وبسیما 26 آبان 1399

سلام دوست عزیز
برای این کار باید از ابزار Inspect Element در گوگل کروم (راست کلیک روی صفحه) استفاده کنید و سایز واقعی نمایش تصاویر را پیدا کنید.

امیر محمدی 25 آبان 1399

در مورد رفع مشکل CLS هم مطلب بذارید
ممنون

آکادمی وبسیما 26 آبان 1399

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