تصاویر و محتوای بصری در وب سایت ها نسبت به گذشته به طور فزاینده ای اهمیت می یابد و اکنون کیفیت طراحی گرافیکی سایت در میزان فروش محصولات و خدمات بسیار موثر است. همچنین تصاویر، نمودارها و دیاگرام ها می توانند به تاثیرگذاری بهتر و آسان تر محتوا کمک کنند.
سئو تصاویر بسیار مهم می باشد و اگر به شکل صحیح انجام نگیرد می تواند روی تجربه کاری ، کاهش سرعت سایت و سئو سایت تاثیر منفی بگذارد از این رو توجه به بهینه سازی تصاویر قرار داده شده در وب سایت بسیار مهم می باشد اگر چه برخی از افراد آن را نادیده میگیرند .
سئو و بهینه سازی تصاویر وردپرس
برای بهینه سازی تصاویر وردپرس شما می توانید به صورت دستی موارد بالا را انجام دهید همچنین در صورتی که می خواهید برخی از فاکتورها را به صورت خودکار اینجام دهید می توانید از افزونه سئو تصاویر وردپرس به اسم WP Smush استفاده نمایید که می تواند به شما امکانات زیر را ارائه دهد
- فشرده سازی بدون افت کیفیت
- تنظیم حداکثر عرض و ارتفاع برای تصاویر
- پشتیبانی از انواع فرمت ها
- بهینه سازی تصاویر در هر دایرکتوری که قرار دارد
- و….
سئوی تصاویر با فرمت های مختلف فایل: JPEG، PNG و …
بهینه سازی دقیق تصاویر در سئو به نوع فایل تصویر مورد استفاده نیز بستگی دارد. آنها در اندازه ها و فرمت های مختلف در دسترس هستند. مرورگرهای مدرن می توانند بسیاری از فرمت ها را نمایش دهند.
در سال های اخیر، چندین فرمت ، خود را به عنوان یک فرمت استاندارد معرفی کرده اند. با این حال، این توسعه نیز توقفی ندارد.
فایل های تصویری کلاسیک در فرمت JPEG
فرمت JPEG یک فرمت فایل تصویری کلاسیک است. این فرمت به سال ۱۹۹۲ باز می گردد. همانند سایر فرمت ها نظیر PNG یا GIF، JPEG نیز به دسته گرافیکی bitmap تعلق دارد. تک تک پیکسل های یک تصویر در یک شبکه مرتب شده و از یک ساختار ثابت پیروی می کنند. تصاویر JPEG روان و پرکاربرد بوده و مخصوصا برای عکس های رنگی و کنتراست-بالا مناسب هستند.
گزینه ی دیگر: PNG
مانند فرمت JPEG، فرمت PNG هم یک گرافیک بیت مپ است. به سال ۱۹۹۴ باز می گردد و به عنوان جایگزینی برای فرمت GIF طراحی شده است. در آن زمان توسط شخص دارای امتیاز محافظت میشد.این فرمت فایل در دو نوع موجود است: ۸PNG و ۲۴PNG. فرمت ۸PNG تنها ۲۵۶ رنگ را نشان می دهد.و فرمت ۲۴PNG 16.7 میلیون رنگ را شامل میشود، همانند JPEG.
تفاوت اصلی بین PNG و JPEG قابلیت نمایش مناطق transparent است. فایل های PNG همچنین می توانند بدون افت کیفیت، فشرده شوند، که با فرمت JPEG امکان پذیر نیست. با این حال، این کار حجم فایل های تصاویر را افزایش می دهد. این فرمت برای نمایش لوگو یا متن مناسب هستند.
فایل های تصویر با کد: SVG
بزرگترین و مهمترین تفاوت SVG در مقابل JPEG و PNG نوع فرمت فایل است. فایل های SVG گرافیکهای وکتوری هستند، و SVG مخفف گرافیک وکتوری مقیاس پذیر است. این فرمت به زمان توسعه W3c در سال ۲۰۰۱ بازمی گردد. این فرمت بر اساس زبان نشانه گذاری XML است.
بنابراین امکان ادغام فایل های SVG به طور مستقیم به کد HTML در یک صفحه وب وجود دارد. پس از آن مرورگر گرافیک را به طور مستقیم و نه فایلی از سرور، بارگذاری می کند، بر خلاف JPEG یا PNG. این کار تاثیر مثبتی بر زمان(سرعت) بارگذاری وب سایت دارد، زیرا بهتر است درخواست های کمتری بین مرورگر و سرور مبادله شود.به علاوه فایل های SVG بدون کاهش کیفیت، می توانند مقیاس(تغییر سایز) شوند. این کار با فایل های JPEG یا PNG امکان پذیر نیست. به این معناست که فایل های SVG به ویژه برای لوگو یا گرافیک مناسب هستند.
ادغام مستقیم در کد HTML همچنین دارای معایبی است. فایل های SVG خیلی امن نیستند. این فرمت حفره های امنیتی ذاتی ای دارد که می تواند، به عنوان مثال، توسط اسکریپت های مخرب فیلتر شود. این می تواند بر عملکرد یک وب سایت تاثیر بگذارد و بنابراین یک تجربه کاربری ضعیف ایجاد کند. در نتیجه، سیگنال های کاربر که مربوط به رتبه بندی هستند می توانند بدتر شوند.
اندازه(سایز)
اندازه فایل یک تصویر نیز در عملکرد وب سایت نقش مهمی دارد. بهینه سازی تصویر در مسئله سئوی سایت، تنها نامگذاری درست و حفظ برچسب ها نیست. وضوح فایل نیز مهم است، زیرا به طور مستقیم اندازه فایل را تعیین می کند.
یک فایل بزرگتر نیاز به منابع بیشتری دارد، هم در سرور و هم هنگام بارگذاری فایل. بنابراین مهم است که فایل ها را تا حد ممکن کوچک نگه دارید، زیرا تصاویرِ پیکسل شده یا تار شده از نگاه کاربر غیر جذاب است. واقعاً معقول نیست که یک فایل با طول ۱۰۰۰ پیکسل را در یک اِلِمانی که طولش فقط ۵۰۰ پیکسل است، بگنجانیم. با این حال، تصاویر نباید بیش از حد کوچک شوند. فایل هایی که بیش از حد کوچک هستند و کاربر محتوای آن را نمی تواند شناسایی کند به ترافیک و رتبه بندی کمکی نمی کند. در مجموع سیگنال های کاربر در رتبه بندی در جستجوی تصویر نقش مهمی دارند. اگر کاربر چیزی در تصویر نبیند و یا بسیار سخت چیزی را پیدا کند، به سرعت صفحه را ترک می کند. این مسئله برای جستجوهای تصاویر به طور ویژه حقیقت می یابد. تصاویر بندانگشتی کوچک یا تصاویر تار به احتمال زیاد ترافیکی در جستجوی تصویرایجاد نخواهند کرد.
اندازه اصلی فایل برای جستجوگرهای تلفن همراه و افزایش استفاده از گوشی های هوشمند بسیار مهم است. کاربران تلفن های هوشمند معمولا بی صبر هستند و اگر زمان بارگیری یک سایت بیش از حد طول بکشد، وب سایت را به سرعت ترک می کنند. بهینه سازی تصاویر و به ویژه اندازه فایل ها می تواند به سرعت منجر به عملکرد بهتر شود. اهمیت این واقعیت با معرفی سرعت صفحه موبایل به عنوان یک عامل رتبه بندی در اواسط سال جاری نشان داده شده است.
فرمت های جدید تصاویر
PNG، JPEG یا SVG فرمت های تصویری ایجاد شده هستند. با این وجود، توسعه فرمت های فایل تصاویر همچنان ادامه دارد. برای مثال، فرمت های ۲۰۰۰JPEG و JPEG XR، پیشرفت هایی از فرمت JPEG اصلی هستند. آنها با حجم فایلی کوچکتر، همان کیفیت را ارائه می دهند. علاوه بر این، فرمت JPEG XR درست مثل فرمت PNG ترنسپرنسی یا شفافیت را نیز پشتیبانی می کند.
علاوه بر این پیشرفت ها، فرمت های جدید فایل نیز در حال توسعه هستند. هدف اصلی این است که حجم فایل را بدون آسیب رساندن به کیفیت نگه دارند. پیشرفت های اخیر شامل فرمت FLIF (فرمت تصویر بدون افت کیفیت) و HEIF (فایل تصویری با کارایی بالا) می شود.
یک مشکل در این زمینه این است که تا به حال، تقریبا هیچ گونه پشتیبانی ای برای این فرمت ها توسط مرورگرهای شناخته شده وجود ندارد. ابزارهایی مانند Can I use میتوانند برای بررسی سازگاری فرمتهای مختلف فایل با مرورگرهای مختلف مورد استفاده قرار گیرند.
در زیر به برخی از شیوه‌های عمومی در مورد چگونگی بهینه سازی تصاویر وب می‌پردازیم :
- تا جایی که ممکن است از تصاویر وکتور به جای تصاویر PNG و JPEG استفاده کنید.
- از CDN برای افزایش سرعت لود تصاویر توسط کاربران در هرجای جهان استفاده کنید.
- تصاویرتان را با استفاده از فشرده سازی Gzip ، بهینه سازی کنید.
- بخش‌های غیر ضروری تصاویر را حذف کنید.
- بخش‌های سفید تصاویر را پاک کنید و توسط CSS آنها را بسازید.
- از افکت‌های CSS3 تا جای ممکن استفاده کنید.
- تصاویرتان را با ابعاد خودشان در html و css سایت لود کنید (اشاره به خطای serve scaled images).
- برای نوشتن متن بر روی تصاویر از وب فونت‌ها استفاده کنید. (آنها عکس را بهینه تر می‌کنند و امکان تغییر اندازه را در تصاویر و نوشته محیا می‌کنند)
- از تصاویر شطرنجی تنها در بخش‌هایی که اشکال و جزئیات وجود دارد استفاده کنید.
- از bit-depth برای کاهش پلات رنگ استفاده کنید.
- در جاهایی که می‌توانید از متد lossy برای فشرده سازی استفاده کنید.
- در صورت نیاز به انیمیشن از GIF استفاده کنید.
- برای پیدا کردن بهترین تنظیم در تصاویر با فرمتهای مختلف، آنها را آزمایش کنید.
- اگر بهترین کیفیت و بهترین جزئیات را نیاز دارید از فرمت PNG استفاده کنید.
- برای تصاویر اصلی و اسکرین شات‌ها از JPEG استفاده کنید.
- مقیاس تصاویر را نسبت به صفحه نمایش تنظیم کنید تا تعداد پیکسل‌ها کاهش یابد.
- هر Metadata غیر ضروری را حذف کنید.
- عملیات فشرده سازی را تا جای ممکن خودکار کنید.
- در ابزاری مانند photoshop تصاویر را به صورت Save for Web خروجی بگیرید، این گزینه در سربرگ File موجود است.
هنگامی که شما از بهترین شیوه برای بهینه سازی سازی تصاویر و قالب‌بندی آنها استفاده کردید . سایت شما در مرورگرها ، موتورهای جست‌وجو ، شبکه‌ها و همچنین توسط کاربران سریع‌تر لود میشود.
