در دنیای پرشتاب امروز و با توجه به شرایط خاص اینترنت در ایران، صبر کاربران به مویی بند است. عکسهای سنگین و بیکیفیت، قاتل خاموش فروش شما هستند. اینجاست که بهینه سازی تصاویر سایت از یک کار لوکس فنی، به یک ضرورت مطلق برای بقای کسبوکار تبدیل میشود. اگر میخواهید ویترین دیجیتال شما سریع، جذاب و مورد علاقه گوگل باشد، چارهای جز تسلط بر تکنیکهای فشرده سازی حجم تصاویر ندارید.
در این مقاله، قرار است با زبانی خودمانی اما کاملا تخصصی، زیر و بم آمادهسازی عکسها برای وب را کالبدشکافی کنیم تا سایتتان مثل یک موشک در صفحه اول گوگل به پرواز درآید.
بهینه سازی تصاویر سایت حکم مرگ و زندگی را دارد؟
بیایید کمی با واقعیتهای ملموس بازار خودمان روبهرو شویم. وقتی یک کاربر ایرانی وارد سایت شما میشود، با چند چالش زیرساختی مواجه است:
اینترنتهای موبایل با پایداری متغیر: بیشتر خریدهای اینترنتی در ایران از طریق شبکههای 4G یا 3G اپراتورها انجام میشود. در ساعاتی از روز، سرعت این شبکهها افت میکند.
هزینه بستههای اینترنتی: کاربر ایرانی دوست ندارد حجم بسته اینترنتش صرف لود شدن یک عکس ۵ مگابایتی از نمای دورِ یک محصول شود!
استفاده از ابزارهای تغییر آیپی: بسیاری از کاربران در طول روز ویپیان خود را روشن میگذارند که این موضوع خود به خود سرعت بارگذاری صفحات را کاهش میدهد.
وقتی شما بهینه سازی تصاویر سایت را نادیده میگیرید، در واقع دارید روی این آتش بنزین میریزید. گوگل به صورت رسمی اعلام کرده است که زمان بارگذاری صفحه (Page Speed) یکی از مهمترین فاکتورهای سئو است. اگر عکسهای شما سنگین باشند، سایت دیر لود میشود، نرخ پرش (Bounce Rate) بالا میرود و گوگل سایت شما را به اعماق نتایج جستجو تبعید میکند.
فشرده سازی حجم تصاویر!
اولین قدم در فشرده سازی حجم تصاویر، این است که بدانیم اصلا چه فرمتی را باید ذخیره کنیم. در دنیای وب، ما نمیتوانیم هر عکسی را با هر پسوندی در سایت رها کنیم. بیایید سه فرمت اصلی را با مثالهای بومی بررسی کنیم:
۱. فرمت JPEG (یا JPG)؛ پادشاه بلامنازع عکسهای واقعی
اگر شما یک فروشگاه اینترنتی فرش دستباف در تبریز دارید یا عکسهای پر از رنگ و لعاب از غذاهای رستورانتان میگذارید، JPEG بهترین دوست شماست. این فرمت برای عکسهایی که رنگهای پیچیده و سایهروشنهای زیاد دارند عالی است. قابلیت انعطافپذیری بالایی دارد و میتوانید حجم آن را بدون اینکه چشم انسان متوجه افت کیفیت شود، به شدت کاهش دهید.
۲. فرمت PNG؛ متخصص کارهای بدون پسزمینه
فرض کنید لوگوی شرکتتان را میخواهید روی هدر (Header) سایت قرار دهید، یا آیکونهای کوچکی برای بخش «خدمات ما» طراحی کردهاید. اینجا باید از PNG استفاده کنید. این فرمت برای تصاویری که پسزمینه شفاف (Transparent) دارند یا شامل متن و خطوط صاف هستند، بیرقیب است. اما مراقب باشید؛ هرگز از PNG برای عکسهای واقعی (مثل عکس محصول یا منظره) استفاده نکنید، زیرا حجم آن فاجعهبار خواهد بود!
۳. فرمت WebP؛ سوگلیِ این روزهای گوگل
اگر میخواهید نهایتِ بهینه سازی تصاویر سایت را تجربه کنید، به WebP سلام کنید! این فرمت را خود گوگل توسعه داده است. WebP میتواند کیفیتی برابر با JPEG یا PNG ارائه دهد، در حالی که حجم آن به طور میانگین ۲۵ تا ۳۵ درصد کمتر است! امروزه تقریبا تمام مرورگرهای مدرن از WebP پشتیبانی میکنند. تبدیل عکسهای قدیمی سایت به WebP، یکی از سریعترین راهها برای بهبود رتبه سئو است.
جادوی فشرده سازی حجم تصاویر (رژیم لاغری برای عکسها)
حالا که فرمت درست را انتخاب کردیم، باید حجم عکس را کاهش دهیم. در دنیای دیجیتال، حجم فایل با بایت محاسبه میشود و یک فرمول ساده داریم:1MB=1024KB
. هدف ما این است که عکسهای سایت، مخصوصا در مقالات و محصولات، ترجیحا زیر ۱۰۰ تا ۱۵۰ کیلوبایت (KB) باشند.
فشردهسازی به دو روش اصلی انجام میشود:
فشردهسازی با افت کیفیت (Lossy): در این روش، ابزار فشردهساز برخی از پیکسلهای رنگیِ مشابه که چشم انسان قادر به تشخیص تفاوت آنها نیست را حذف میکند. این بهترین روش برای عکسهای وب است. حجم به شدت کم میشود و ظاهر عکس هم (برای کاربر عادی) دستنخورده باقی میماند.
فشردهسازی بدون افت کیفیت (Lossless): اینجا هیچ پیکسلی حذف نمیشود، بلکه دادههای پنهان و اطلاعات اضافیِ فایل (مثل متادیتاهای دوربین عکاسی) پاک میشوند. حجم کمی کاهش مییابد اما کیفیت دقیقا همان است.
ابزارهای کاربردی برای فشرده سازی
نیازی نیست فتوشاپکار حرفهای باشید. ابزارهای آنلاین و رایگان زیادی برای این کار وجود دارند:
- سایت TinyPNG: یکی از محبوبترین سایتها. کافیست عکسهای خود (چه PNG چه JPG) را در آن رها کنید تا مثل یک جادوگر، حجم آنها را تا ۷۰٪ کم کند.
- سایت Squoosh.app: یک شاهکار از سمت خود گوگل. این ابزار به شما اجازه میدهد عکس را آپلود کنید و با یک نوار لغزان (Slider)، کیفیت را کم و زیاد کنید و همزمان تفاوت عکسِ قبل و بعد را با چشم ببینید.
تغییر ابعاد فیزیکی؛ لباس را به اندازه تن سایت بدوز
یکی از مرگبارترین اشتباهاتی که وبمسترهای ایرانی مرتکب میشوند، عدم توجه به رزولوشن (طول و عرض) عکس است.
بگذارید یک مثال واقعی بزنم: شما با گوشی آیفون خود یک عکس فوقالعاده از یک کیف چرمی در فروشگاهتان میگیرید. این عکس رزولوشنی معادل ۴۰۰۰ در ۳۰۰۰ پیکسل دارد و حجمش حدود ۴ مگابایت است. حالا شما همین عکس را بدون تغییر ابعاد، در بخشِ تصاویِر بندانگشتیِ سایت (که کلا ۳۰۰ در ۳۰۰ پیکسل جا دارد) آپلود میکنید!
مرورگر کاربر مجبور است تمام آن ۴ مگابایت را دانلود کند و سپس خودش آن را کوچک کند تا در آن کادر ۳۰۰ پیکسلی جا بدهد. این کار هم اینترنت کاربر را میبلعد و هم پردازنده گوشی او را خسته میکند.
قانون طلایی: قبل از آپلود عکس، دقیقا بدانید آن عکس قرار است در کجای سایت نمایش داده شود. اگر عرض بخش مقالات وبلاگ شما ۸۰۰ پیکسل است، هرگز عکسی با عرض بیشتر از ۸۰۰ پیکسل آپلود نکنید
سئوی تصاویر (SEO)؛ چون گوگل چشم ندارد!
تا اینجای کار، سایت را برای کاربر بهینهسازی کردیم و فشرده سازی حجم تصاویر را به خوبی انجام دادیم. اما گوگل چطور عکسهای ما را میفهمد؟ خزندههای گوگل (Googlebots) چشم ندارند که ببینند عکس شما چقدر زیباست؛ آنها فقط کدها و متنها را میخوانند.
۱. نام فایل (File Name): اولین سیگنال به گوگل
آپلود کردن عکسی با نام IMG_20230915.jpg یک فرصتسوزیِ محض است. قبل از آپلود، نام عکس را به صورت فینگلیش یا فارسیِ خطتیرهدار مرتبط با کلمه کلیدی تغییر دهید.
غلط: pic1.jpg یا عکسِ جدیدِ کفش.jpg (استفاده از فاصله ممنوع است).
درست: kafsh-charm-tabriz-mardane.jpg یا کفش-چرم-مردانه-تبریز.jpg.
۲. متن جایگزین (Alt Text): برگ برنده سئو
متن جایگزین یا Alt Text، یک ویژگی (Attribute) در کدهای HTML است که به گوگل میگوید موضوع این عکس چیست. همچنین اگر به هر دلیلی عکس برای کاربر لود نشود (مثلا سرعت پایین اینترنت)، این متن به جای عکس نمایش داده میشود تا کاربر بفهمد آنجا چه عکسی بوده است.
چطور یک Alt Text عالی برای بازار ایران بنویسیم؟
فرض کنید عکسِ یک ست مبلمان راحتیِ طوسیرنگ را گذاشتهاید.
بد: عکس مبل
متوسط: مبل راحتی طوسی
عالی: ست مبل راحتی ۷ نفره رنگ طوسی روشن مدل چستر مناسب دکوراسیون مدرن
همانطور که میبینید، توزیع کلمات کلیدی در تگ Alt باید کاملا طبیعی و توصیفی باشد.
راهنمای اصطلاحات (Glossary)
برای اینکه در دنیای دیجیتال سردرگم نشوید، این اصطلاحات تخصصی را با زبان ساده مرور کنیم:
پیکسل (Pixel): کوچکترین نقطه رنگی روی صفحه نمایش. وقتی میگوییم عکسی ۱۰۰۰ در ۱۰۰۰ پیکسل است، یعنی این عکس از یک میلیون نقطه رنگی تشکیل شده است.
فرمت WebP (وبپی): یک نوع فایل عکسی که گوگل ساخته است تا جایگزین JPG و PNG شود. حجم آن بسیار کمتر است ولی کیفیتش عالی میماند. (مثال: مثل این است که یک پتو ضخیم را در کیسه وکیوم بگذارید؛ همان پتو است اما جای کمتری میگیرد).
متن جایگزین (Alt Text): متنی که پشت عکس مخفی است و برای موتورهای جستجو و افراد نابینا (که از صفحهخوان استفاده میکنند) توضیح میدهد داخل عکس چه خبر است.
بایت و کیلوبایت (Byte & KB): واحد اندازهگیری حجم فایلها در کامپیوتر. عکسهای بهینه شده برای سایت باید حجمی در حد چند دهها کیلوبایت داشته باشند، نه چند مگابایت (MB).
نتیجهگیری و یک پیشنهاد جذاب برای رشد کسبوکار شما
ما در این مقاله متوجه شدیم که بهینه سازی تصاویر سایت صرفا یک آپشنِ دلخواه نیست؛ بلکه فونداسیونِ یک تجربه کاربری (UX) موفق و یک سئوی قدرتمند است. از انتخاب دقیق فرمت WebP و JPEG گرفته تا تغییر ابعاد فیزیکی و معجزه فشرده سازی حجم تصاویر، همگی دست به دست هم میدهند تا سایت شما در کسری از ثانیه روی موبایل مشتری ایرانی لود شود و گوگل نیز شما را شایسته رتبه اول بداند.
اما بیایید واقعبین باشیم؛ به عنوان یک مدیر کسبوکار، زمانِ شما بسیار ارزشمندتر از آن است که ساعتها وقت بگذارید و تکتک عکسهای سایت را بهینهسازی، تغییر سایز و سئو کنید. کارهای فنی و تکنیکال، نیازمند دقت و تجربه یک تیم حرفهای هستند.
اینجاست که شرکت دیجیتال مارکتینگ چکاوک شهر در کنار شماست. تیم متخصصان سئو و طراحان وب در چکاوک شهر، با تسلط کامل بر الگوریتمهای روز گوگل و شناخت دقیق از رفتار مصرفکننده ایرانی، صفر تا صد سئوی تکنیکال و بهینهسازی سرعت سایت شما را بر عهده میگیرند. ما سایت شما را از یک بروشور کُند و سنگین، به یک ماشین پولسازیِ سریع و چابک تبدیل میکنیم.
همین امروز با کارشناسان شرکت دیجیتال مارکتینگ چکاوک شهر تماس بگیرید تا با یک مشاوره تخصصی، مسیر سبقت گرفتن از رقبایتان را هموار کنیم.
برای ثبت دیدگاه باید وارد حساب کاربری خود شوید.
ورود / ثبتنامهنوز دیدگاهی برای این مطلب ثبت نشده است.