برای بهینه سازی تصاویر در سایت 14 نکته کاربردی را یاد بگیرید
بهینه سازی تصاویر یکی از مهمترین اقداماتی است که برای بهبود سرعت و سئو سایت خود باید انجام دهید. تصاویر حجم زیادی از صفحات وب را تشکیل می دهند و اگر به درستی بهینه نشوند، میتوانند باعث کند شدن سرعت بارگذاری و در نتیجه تجربه کاربری ضعیف و رتبه پایین در موتورهای جستجو شوند.
در این مقاله، 14 نکته کاربردی برای بهینه سازی تصاویر سایت را با شما به اشتراک می گذاریم:
- ✔️
انتخاب فرمت مناسب:
فرمت های JPEG، PNG و WebP پرکاربردترین فرمت ها هستند. JPEG برای عکس ها با جزئیات زیاد، PNG برای تصاویر با پس زمینه شفاف و WebP به عنوان یک فرمت مدرن و فشرده تر برای هر دو نوع تصویر مناسب است. - ✔️
کاهش حجم تصاویر:
از ابزارهای فشرده سازی تصویر مانند TinyPNG، ImageOptim یا Compressor.io استفاده کنید تا حجم تصاویر را بدون افت کیفیت محسوس کاهش دهید. - ✔️
تغییر اندازه تصاویر:
تصویر را دقیقا به اندازه ای که در صفحه وب نیاز دارید، تغییر اندازه دهید. از بارگذاری تصاویر بزرگتر و مقیاس بندی آنها در مرورگر خودداری کنید. - ✔️
بهرهگیری از ویژگی Lazy Loading:
با بهرهگیری از Lazy Loading، تصاویر فقط زمانی بارگذاری می شوند که کاربر به آن قسمت از صفحه اسکرول کند. این کار باعث افزایش سرعت بارگذاری اولیه صفحه می شود. - ✔️
بهینه سازی نام فایل تصاویر:
از نام های توصیفی و مرتبط با محتوای تصویر استفاده کنید. به جای “IMG_1234.jpg” از “آموزش-بهینه-سازی-تصاویر.jpg” استفاده کنید. - ✔️
بهرهگیری از تگ alt مناسب:
تگ alt یک متن جایگزین برای تصویر است که در صورت عدم بارگذاری تصویر نمایش داده می شود. از تگ alt برای توصیف تصویر و بهرهگیری از کلمات کلیدی مرتبط استفاده کنید. - ✔️
بهرهگیری از تگ title (در صورت نیاز):
تگ title یک متن توضیحی است که هنگام نگه داشتن ماوس روی تصویر نمایش داده می شود. از تگ title برای ارائه اطلاعات بیشتر در مورد تصویر استفاده کنید. - ✔️
بهرهگیری از CDN:
بهرهگیری از شبکه توزیع محتوا (CDN) میتواند به بارگذاری سریعتر تصاویر از طریق سرورهای مختلف در سراسر جهان کمک کند. - ✔️
فعال کردن gzip compression:
فعال کردن فشرده سازی gzip در سرور میتواند به کاهش حجم فایل های HTML، CSS و JavaScript از جمله تصاویر کمک کند. - ✔️
بهرهگیری از تصاویر برداری (SVG) در صورت امکان:
تصاویر برداری (SVG) برای آیکون ها و گرافیک های ساده مناسب هستند و حجم کمتری نسبت به تصاویر پیکسلی دارند. - ✔️
بهینه سازی تصاویر برای موبایل:
تصاویر باید برای دستگاه های موبایل بهینه شوند. از تصاویر با رزولوشن پایین تر و فرمت های فشرده تر برای موبایل استفاده کنید. - ✔️
انتخاب ابعاد مناسب برای تصاویر رسپانسیو:
از تگ <picture> یا ویژگی srcset در تگ <img> برای ارائه تصاویر مختلف با ابعاد مختلف برای دستگاه های مختلف استفاده کنید. - ✔️
بررسی دوره ای تصاویر سایت:
به طور منظم تصاویر سایت خود را بررسی کنید و تصاویر قدیمی و غیرضروری را حذف کنید. - ✔️
بهرهگیری از ابزارهای تست سرعت سایت:
از ابزارهایی مانند گوگل PageSpeed Insights یا GTmetrix برای بررسی سرعت سایت خود و شناسایی مشکلات مربوط به تصاویر استفاده کنید.
با عمل کردن به این موارد ساده، میتوانید تصاویر سایت خود را بهینه کرده و سرعت و سئو سایت خود را بهبود بخشید.
1. انتخاب فرمت مناسب تصویر
انتخاب فرمت مناسب تصویر (JPEG، PNG، GIF، WebP) بسته به نوع تصویر و کاربرد آن اهمیت زیادی دارد.JPEG برای عکسها و تصاویر با جزئیات زیاد مناسب است، در حالی که PNG برای تصاویری با گرافیک برداری و شفافیت بهتر عمل میکند.GIF برای تصاویر متحرک کوتاه مناسب است و WebP فرمت جدیدی است که هم کیفیت بهتری ارائه میدهد و هم حجم کمتری دارد.مثلا اگر تصویری از یک منظره دارید که دارای رنگهای متنوع و جزئیات زیادی است، بهرهگیری از فرمت JPEG میتواند حجم فایل را به طور قابل توجهی کاهش دهد بدون اینکه کیفیت تصویر به شدت افت کند.
اما اگر لوگوی شرکت خود را میخواهید آپلود کنید که دارای پسزمینهی شفاف است، فرمت PNG گزینهی بهتری خواهد بود.WebP یک فرمت تصویر مدرن است که توسط گوگل توسعه داده شده و میتواند تصاویر را با حجم کمتر و کیفیت بهتری نسبت به JPEG و PNG فشرده کند.اگر مرورگرهای کاربران شما از این فرمت پشتیبانی میکنند، بهرهگیری از WebP میتواند به بهبود سرعت بارگذاری سایت شما کمک کند.فرمت GIF برای تصاویر متحرک کوتاه مانند انیمیشنهای ساده و یا آیکونهای متحرک کاربرد دارد.اما برای تصاویر پیچیدهتر و طولانیتر، فرمتهای دیگری مانند MP4 یا WebM مناسبتر هستند.
انتخاب فرمت مناسب تصویر به تعادل بین کیفیت و حجم فایل بستگی دارد.
باید با در نظر گرفتن نوع تصویر و نیازهای خود، فرمتی را انتخاب کنید که بهترین نتیجه را ارائه دهد.در ضمن، افزونههای وردپرس میتوانند به طور خودکار تصاویر شما را به فرمت WebP تبدیل کنند.
2. کاهش حجم تصاویر بدون افت کیفیت
این ابزارها با حذف اطلاعات غیر ضروری از فایل تصویر، حجم آن را کاهش می دهند.این اطلاعات معمولاً شامل فراداده (Metadata) تصویر مانند اطلاعات دوربین، موقعیت جغرافیایی و غیره است.در ضمن، این ابزارها از الگوریتم های فشرده سازی پیشرفته استفاده می کنند که به طور هوشمندانه پیکسل های تصویر را تجزیه و تحلیل می کنند و با حفظ کیفیت بصری، حجم فایل را بهینه می کنند.قبل از بارگذاری هر تصویر در وب سایت خود، حتماً آن را از طریق یکی از این ابزارها فشرده سازی کنید.این کار میتواند به طور قابل توجهی سرعت بارگذاری صفحات وب سایت شما را بهبود بخشد و تجربه کاربری را ارتقا دهد.
بسیاری از ابزارهای آنلاین فشرده سازی تصویر رایگان هستند و به راحتی قابل استفاده اند.
در ضمن، افزونه های وردپرس مختلفی وجود دارند که این کار را به طور خودکار انجام می دهند.اگر از نرم افزارهای ویرایش تصویر مانند فتوشاپ استفاده می کنید، میتوانید از گزینه “Save for Web” برای ذخیره تصاویر با حجم کمتر استفاده کنید.
3. انتخاب ابعاد مناسب برای تصاویر
بهرهگیری از تصاویری با ابعاد بسیار بزرگتر از آنچه واقعاً مورد نیاز است، باعث افزایش حجم صفحات وب سایت شما و کاهش سرعت بارگذاری آن می شود.قبل از آپلود تصاویر، ابعاد آنها را به اندازه مورد نیاز کاهش دهید.مثلا اگر تصویری را در یک بخش کوچک از صفحه وب سایت خود نمایش می دهید، نیازی نیست که تصویر اصلی دارای ابعاد بسیار بزرگی باشد.میتوانید ابعاد تصویر را با بهرهگیری از نرم افزارهای ویرایش تصویر یا ابزارهای آنلاین تغییر دهید.در ضمن، باید ابعاد تصاویر را متناسب با طرح بندی واکنش گرا (Responsive Design) وب سایت خود تنظیم کنید.
به این معنی که تصاویر باید در دستگاه های مختلف به درستی نمایش داده شوند و از کیفیت مناسبی برخوردار باشند.مثلا اگر تصویری را در یک تلفن همراه نمایش می دهید، نیازی نیست که تصویر دارای ابعاد بسیار بزرگی باشد.میتوانید از تصاویر کوچکتر برای دستگاه های موبایل استفاده کنید تا سرعت بارگذاری صفحه را بهبود بخشید.توصیه می شود که ابعاد تصاویر را قبل از آپلود به دقت بررسی کنید و آنها را به اندازه مورد نیاز کاهش دهید.این کار به بهبود سرعت بارگذاری صفحات وب سایت شما کمک می کند و تجربه کاربری را ارتقا می دهد.
برای تعیین ابعاد مناسب برای تصاویر، میتوانید از ابزارهای توسعه دهنده مرورگر (Developer Tools) استفاده کنید تا اندازه فضایی که تصویر در صفحه وب سایت اشغال می کند را بررسی کنید.
4. بهینه سازی نام فایل تصاویر
نام فایل تصاویر باید توصیفی و مرتبط با محتوای تصویر باشد.از بهرهگیری از نام های عمومی و بی معنی مانند “IMG_001.jpg” خودداری کنید و به جای آن از نام های توصیفی مانند “کوهستان-برفی-ایران.jpg” استفاده کنید.نام فایل تصاویر میتواند در رتبه بندی وب سایت شما در موتورهای جستجو تأثیرگذار باشد.موتورهای جستجو از نام فایل تصاویر برای درک بهتر محتوای تصویر و ارتباط آن با صفحه وب سایت استفاده می کنند.در ضمن، بهرهگیری از نام فایل های توصیفی میتواند به شما در مدیریت و سازماندهی تصاویر خود کمک کند.به راحتی میتوانید تصاویر مورد نظر خود را با جستجو در نام فایل ها پیدا کنید.
توصیه می شود که در نام فایل تصاویر از کلمات کلیدی مرتبط با محتوای تصویر و صفحه وب سایت خود استفاده کنید.این کار میتواند به بهبود رتبه بندی وب سایت شما در موتورهای جستجو کمک کند.از بهرهگیری از کاراکترهای خاص و فضاهای خالی در نام فایل تصاویر خودداری کنید و به جای آن از خط تیره (-) استفاده کنید.این کار به اطمینان از سازگاری نام فایل ها با سیستم های مختلف کمک می کند.قبل از آپلود هر تصویر در وب سایت خود، حتماً نام فایل آن را بهینه سازی کنید.این کار ساده میتواند تأثیر مثبتی بر سئو وب سایت شما داشته باشد.
5. بهرهگیری از متن جایگزین (Alt Text)
متن جایگزین (Alt Text) برای تصاویر بسیار مهم است.این متن در صورتی که تصویر بارگذاری نشود یا کاربر از صفحه خوان استفاده کند، نمایش داده می شود.در ضمن، موتورهای جستجو از متن جایگزین برای درک محتوای تصویر استفاده می کنند.متن جایگزین باید توصیفی، مختصر و مرتبط با محتوای تصویر باشد.از بهرهگیری از کلمات کلیدی غیر مرتبط خودداری کنید و به جای آن سعی کنید تصویری از آنچه در تصویر وجود دارد ارائه دهید.مثلا اگر تصویری از یک گربه در حال بازی دارید، متن جایگزین میتواند “گربه ای در حال بازی با توپ” باشد.
این متن هم توصیفی است و هم مختصر و مرتبط با محتوای تصویر.متن جایگزین میتواند به بهبود سئو وب سایت شما کمک کند.موتورهای جستجو از متن جایگزین برای درک بهتر محتوای تصویر و ارتباط آن با صفحه وب سایت استفاده می کنند.در ضمن، متن جایگزین به کاربران با نیازهای ویژه کمک می کند تا محتوای تصویر را درک کنند.صفحه خوان ها از متن جایگزین برای توصیف تصاویر برای کاربران نابینا استفاده می کنند.هنگام نوشتن متن جایگزین، سعی کنید تصویری واضح از آنچه در تصویر وجود دارد ارائه دهید و از بهرهگیری از کلمات کلیدی غیر مرتبط خودداری کنید.
6. بهرهگیری از عنوان و توضیحات برای تصاویر
علاوه بر متن جایگزین، میتوانید از عنوان و توضیحات برای تصاویر خود استفاده کنید.عنوان تصویر معمولاً هنگام قرار دادن ماوس بر روی تصویر نمایش داده می شود و توضیح تصویر میتواند اطلاعات بیشتری در مورد تصویر ارائه دهد.عنوان و توضیحات تصویر میتوانند به بهبود تجربه کاربری کمک کنند.کاربران میتوانند با بهرهگیری از عنوان و توضیحات تصویر، اطلاعات بیشتری در مورد تصویر کسب کنند.در ضمن، عنوان و توضیحات تصویر میتوانند به بهبود سئو وب سایت شما کمک کنند.موتورهای جستجو از عنوان و توضیحات تصویر برای درک بهتر محتوای تصویر و ارتباط آن با صفحه وب سایت استفاده می کنند.
عنوان تصویر باید کوتاه و توصیفی باشد و توضیح تصویر میتواند جزئیات بیشتری در مورد تصویر ارائه دهد.از بهرهگیری از کلمات کلیدی غیر مرتبط خودداری کنید و به جای آن سعی کنید اطلاعات مفیدی در مورد تصویر ارائه دهید.مثلا اگر تصویری از یک بنای تاریخی دارید، عنوان تصویر میتواند “بنای تاریخی تخت جمشید” باشد و توضیح تصویر میتواند اطلاعاتی در مورد تاریخچه بنا و معماری آن ارائه دهد.هنگام نوشتن عنوان و توضیحات تصویر، سعی کنید اطلاعات مفیدی در مورد تصویر ارائه دهید و از بهرهگیری از کلمات کلیدی غیر مرتبط خودداری کنید.
7. بهرهگیری از CDN برای تصاویر
بهرهگیری از شبکه تحویل محتوا (CDN) میتواند به طور قابل توجهی سرعت بارگذاری تصاویر وب سایت شما را بهبود بخشد.CDN ها سرورهایی هستند که در سراسر جهان توزیع شده اند و محتوای وب سایت شما را در نزدیکترین سرور به کاربر ذخیره می کنند.هنگامی که یک کاربر از وب سایت شما بازدید می کند، CDN محتوای وب سایت شما را از نزدیکترین سرور به کاربر ارائه می دهد.این کار باعث کاهش تأخیر و بهبود سرعت بارگذاری صفحات وب سایت شما می شود.بهرهگیری از CDN برای تصاویر وب سایت شما به ویژه برای کاربرانی که از نقاط مختلف جهان به وب سایت شما دسترسی دارند، مفید است.
CDN ها میتوانند سرعت بارگذاری تصاویر را برای این کاربران به طور قابل توجهی بهبود بخشند.سرویس های CDN مختلفی وجود دارند که میتوانید از آنها استفاده کنید.برخی از سرویس های CDN رایگان هستند و برخی دیگر پولی هستند.انتخاب سرویس CDN مناسب به نیازها و بودجه شما بستگی دارد.بهرهگیری از CDN میتواند به بهبود سئو وب سایت شما نیز کمک کند.موتورهای جستجو سرعت بارگذاری صفحات وب سایت را به عنوان یک عامل رتبه بندی در نظر می گیرند.قبل از انتخاب سرویس CDN، حتماً تحقیق کنید و سرویسی را انتخاب کنید که بهترین عملکرد و قیمت را برای شما ارائه دهد.
8. فعال سازی Lazy Loading
Lazy Loading تکنیکی است که در آن تصاویر فقط زمانی بارگذاری می شوند که در محدوده دید کاربر قرار بگیرند.این کار باعث کاهش زمان بارگذاری اولیه صفحه و بهبود تجربه کاربری می شود.بدون Lazy Loading، تمام تصاویر یک صفحه وب سایت به طور همزمان بارگذاری می شوند.این کار میتواند زمان بارگذاری اولیه صفحه را به طور قابل توجهی افزایش دهد، به ویژه اگر صفحه دارای تصاویر زیادی باشد.با فعال سازی Lazy Loading، تصاویر فقط زمانی بارگذاری می شوند که کاربر به قسمت هایی از صفحه که تصاویر در آن قرار دارند، اسکرول کند.این کار باعث کاهش زمان بارگذاری اولیه صفحه و بهبود تجربه کاربری می شود.
Lazy Loading میتواند به ویژه برای وب سایت هایی که دارای صفحات طولانی با تصاویر زیادی هستند، مفید باشد.فعال سازی Lazy Loading میتواند سرعت بارگذاری این صفحات را به طور قابل توجهی بهبود بخشد.راه های مختلفی برای فعال سازی Lazy Loading وجود دارد.میتوانید از افزونه های وردپرس، کتابخانه های جاوا اسکریپت یا ویژگی های داخلی مرورگرها استفاده کنید.قبل از فعال سازی Lazy Loading، حتماً تحقیق کنید و روشی را انتخاب کنید که بهترین عملکرد و سازگاری را با وب سایت شما داشته باشد.
9. بهینه سازی تصاویر برای موبایل
بهرهگیری از CDN نیز میتواند به بهبود سرعت بارگذاری تصاویر در دستگاه های موبایل کمک کند. CDN ها محتوای وب سایت شما را در نزدیکترین سرور به کاربر ذخیره می کنند و باعث کاهش تأخیر و بهبود سرعت بارگذاری صفحات وب سایت شما می شوند. قبل از آپلود تصاویر در وب سایت خود، حتماً آنها را برای موبایل بهینه سازی کنید. این کار میتواند تأثیر مثبتی بر سرعت بارگذاری وب سایت شما و تجربه کاربری داشته باشد.
10. بهرهگیری از تصاویر برداری (Vector Graphics)
تصاویر برداری (Vector Graphics) تصاویری هستند که از خطوط و منحنی های ریاضی تشکیل شده اند.این تصاویر میتوانند بدون از دست دادن کیفیت، به هر اندازه ای بزرگ یا کوچک شوند.تصاویر برداری برای آیکون ها، لوگوها و تصاویر گرافیکی ساده مناسب هستند.بر خلاف تصاویر رستر (Raster Graphics) که از پیکسل ها تشکیل شده اند، تصاویر برداری از پیکسل ها استفاده نمی کنند.این بدان معنی است که تصاویر برداری میتوانند بدون از دست دادن کیفیت، به هر اندازه ای بزرگ یا کوچک شوند.بهرهگیری از تصاویر برداری میتواند به کاهش حجم تصاویر وب سایت شما کمک کند.
تصاویر برداری معمولاً حجم کمتری نسبت به تصاویر رستر دارند، زیرا از خطوط و منحنی های ریاضی تشکیل شده اند و نیازی به ذخیره اطلاعات هر پیکسل ندارند.تصاویر برداری را می توان با بهرهگیری از نرم افزارهای ویرایش تصویر برداری مانند Adobe Illustrator یا Inkscape ایجاد کرد.توجه داشته باشید شما میتوانید تصاویر برداری آماده را از وب سایت های مختلف دانلود کنید.قبل از آپلود تصاویر در وب سایت خود، در نظر بگیرید که آیا بهرهگیری از تصاویر برداری میتواند به بهبود کیفیت و کاهش حجم تصاویر شما کمک کند.فرمت های رایج تصاویر برداری شامل SVG، EPS و AI هستند.
11. بررسی و اصلاح تصاویر قدیمی
بهینه سازی تصاویر نباید یک فرآیند یکباره باشد.به طور منظم تصاویر قدیمی وب سایت خود را بررسی کنید و آنها را در صورت نیاز بهینه سازی کنید.تصاویر قدیمی ممکن است با بهرهگیری از تکنیک های قدیمی فشرده سازی شده باشند و یا ابعاد نامناسبی داشته باشند.میتوانید با بهرهگیری از ابزارهای تجزیه و تحلیل وب سایت، تصاویری که بیشترین حجم را در وب سایت شما اشغال می کنند را شناسایی کنید.سپس میتوانید این تصاویر را با بهرهگیری از تکنیک های جدید فشرده سازی و بهینه سازی کنید.مورد دیگر اینکه، بررسی کنید که آیا تصاویر قدیمی دارای متن جایگزین مناسب هستند یا خیر.
متن جایگزین به موتورهای جستجو کمک می کند تا محتوای تصاویر شما را درک کنند و میتواند به بهبود سئو وب سایت شما کمک کند.
میتوانید از افزونه های وردپرس برای بررسی و اصلاح تصاویر قدیمی وب سایت خود استفاده کنید.توجه داشته باشید شما میتوانید از ابزارهای آنلاین برای بررسی سرعت بارگذاری تصاویر وب سایت خود استفاده کنید.به طور منظم (مثلاً هر سه ماه یکبار) تصاویر قدیمی وب سایت خود را بررسی و در صورت نیاز بهینه سازی کنید.
12. بهرهگیری از Sprite های CSS
Sprite های CSS تکنیکی است که در آن چندین تصویر کوچک در یک تصویر بزرگتر ترکیب می شوند.سپس با بهرهگیری از CSS، قسمت های مختلف تصویر بزرگتر برای نمایش تصاویر کوچک استفاده می شوند.این کار باعث کاهش تعداد درخواست های HTTP و بهبود سرعت بارگذاری وب سایت می شود.هنگامی که یک مرورگر یک صفحه وب سایت را بارگذاری می کند، برای هر تصویر در صفحه یک درخواست HTTP به سرور ارسال می کند.هر چه تعداد درخواست های HTTP بیشتر باشد، زمان بارگذاری صفحه بیشتر می شود.با بهرهگیری از Sprite های CSS، میتوانید تعداد درخواست های HTTP را کاهش دهید.
به جای اینکه مرورگر برای هر تصویر کوچک یک درخواست HTTP ارسال کند، فقط یک درخواست HTTP برای تصویر بزرگتر ارسال می کند.
Sprite های CSS برای آیکون ها، دکمه ها و تصاویر کوچک دیگر مناسب هستند.برای عکس ها و تصاویر بزرگتر، بهرهگیری از Sprite های CSS توصیه نمی شود.توجه داشته باشید شما میتوانید با بهرهگیری از CSS، موقعیت و اندازه قسمت های مختلف تصویر بزرگتر را برای نمایش تصاویر کوچک تنظیم کنید.
13. تنظیم Cache مرورگر برای تصاویر
تنظیم Cache مرورگر به مرورگرها اجازه می دهد تا تصاویر وب سایت شما را در حافظه خود ذخیره کنند.این کار باعث می شود که در بازدیدهای بعدی کاربران از وب سایت شما، تصاویر از حافظه مرورگر بارگذاری شوند و نیاز به دانلود مجدد آنها از سرور نباشد.این کار باعث بهبود سرعت بارگذاری وب سایت شما می شود.میتوانید با بهرهگیری از فایل .htaccess یا تنظیمات سرور خود، Cache مرورگر را برای تصاویر وب سایت خود تنظیم کنید.برای این کار، باید یک زمان انقضا برای تصاویر خود تعیین کنید.مثلا میتوانید تعیین کنید که تصاویر وب سایت شما به مدت یک سال در Cache مرورگر ذخیره شوند.
تنظیمات Cache مرورگر بسته به نوع سرور و تنظیمات وب سایت شما ممکن است متفاوت باشد.
برای اطلاعات بیشتر، با مدیر سرور خود مشورت کنید.توجه داشته باشید شما میتوانید از ابزارهای آنلاین برای بررسی تنظیمات Cache مرورگر وب سایت خود استفاده کنید.تنظیمات Cache مرورگر را با دقت تنظیم کنید تا از مشکلات احتمالی جلوگیری کنید.به طور منظم تنظیمات Cache مرورگر وب سایت خود را بررسی و در صورت نیاز به روز رسانی کنید.
14. بهرهگیری از WebP به عنوان جایگزین JPEG و PNG
WebP یک فرمت تصویر مدرن است که توسط گوگل توسعه یافته است. WebP میتواند تصاویر را با حجم کمتر و کیفیت بهتری نسبت به JPEG و PNG فشرده کند. بهرهگیری از WebP میتواند به بهبود سرعت بارگذاری وب سایت شما کمک کند. WebP از الگوریتم های فشرده سازی پیشرفته تری نسبت به JPEG و PNG استفاده می کند. این الگوریتم ها به WebP اجازه می دهند تا تصاویر را با حجم کمتر و کیفیت بهتری فشرده کند. WebP از شفافیت (Transparency) و انیمیشن (Animation) نیز پشتیبانی می کند. این بدان معنی است که میتوانید از WebP برای جایگزینی تصاویر PNG و GIF نیز استفاده کنید. میتوانید با بهرهگیری از ابزارهای آنلاین یا نرم افزارهای ویرایش تصویر، تصاویر خود را به فرمت WebP تبدیل کنید.
