برای بهینه سازی سایت برای موتورهای جستجو یکی از کارهای مهمی که باید وبمستران انجام دهند، بهینه سازی عکس است. برای بهینه سازی تصاویر لازم است که با تکنیک های فشرده سازی تصاویر آشنا شوید. هر چقدر عکس ها فشرده تر باشند، سرعت بارگذاری صفحه که یکی از سیگنالهای محاسبه رنکینگ است بیشتر خواهد شد.
فرمت Webp
گوگل در سال 2010 فرمت Webp را برای عکس ها به صورت متن باز یا open source معرفی کرد. فایل های با فرمت Webp از فرمت های jpg و png فشرده تر هستند و از انیمیشن و transparency نیز پشتیبانی می کنند و بنابراین جایگزین مناسبی برای فایل های GIF نیز هستند.
انواع فایل Webp
فرمت Webp با دو نوع Lossless یا بدون افت کیفیت و Lossy یا با افت کیفیت ارائه شده اند. طبق اعلام گوگل، فایل های Webp Lossless به میزان 26 درصد و فایل های Webp Lossy به میزان 25-34 درصد فشرده تر از فایل های JPEG فشرده شده با تکنیک های دیگر هستند. همچنین تبدیل فایل PNG به Webp سایز فایل را به صورت میانگین به میزان 45 درصد کاهش می دهد.
مرورگرهایی که از Webp پشتیبانی می کنند
مرورگرهای گوگل کروم و اپرا از ابتدا از فرمت Webp پشتیبانی می کردند ولی مایکروسافت اینترنت اکسپلورر از ورژن 6 به بعد از Webp پشتیبانی می کند.
فرمت SVG
SVG مخفف Scale Vector Graphic است و در سال 2001 توسط کمپانی W3C معرفی گردید. فایل های SVG به صورت وکتور هستند. اگر یک فایل SVG را با یک ادیتور متنی مانند notepad باز کنید، خواهید دید که یک فایل SVG کاملا به صورت کد نوشته می شود و به عنوان مثال می توانید کد رنگ قسمت های مختلف عکس را در ادیتور متنی تغییر دهید.
استفاده از SVG به صورت inline
از آنجایی که ماهیت عکس های SVG به صورت کد هستند میتوانید از آنها به صورت inline در کد HTML استفاده کنید. مزیت استفاده از inline SVG این است که برای بارگذاری آنها در مرورگر نیازی به ارسال request به سرور نیست و عیب آن این است که امکان کش شدن inline SVG مانند فایل SVG وجود ندارد.
سلام
وقتی میخوام فایلی رو با فرمت webp در سایت قرار بدم اصلا اون رو نشون نمیده چیکار کنم فرمت webpرو بخونه
سلام
همان طور که در متن توضیح داده شد، همه مرورگرها از فرمت Webp پشتیبانی نمی کنند. راهکارهای گوناگونی برای serve کردن عکس با فرمت Webp وجود دارد. به عنوان نمونه، سرور شما بتواند مرورگر کاربر را شناسایی کند و با توجه به آن، عکس webp یا فرمت دیگری را در اختیار او قرار دهد. یا اینکه شما کدنویسی را به صورتی انجام دهید که از تگ picture به جای img در HTML استفاده کنید و در آن هر دو فرمت webp و jpg را قرار دهید تا مرورگر هر کدام را که پشتیبانی می کرد، رندر کند.
سلام مثل همیشه مطالبتون عالی بود, به نظر من مهمترین آیتمی که در بهینه سازی تصاویر سایت با فرمت SVG به صورت inline وجود داشت عدم ارسال ریکوئست به سرور هست.