Вэб дизайны ертөнцөд олон зургийн форматаас сонгох боломжтой. Хамгийн алдартай хоёр формат бол WebP болон SVG юм.
Аль аль нь өөр өөрийн гэсэн давуу болон сул талуудтай тул аль нь таны төсөлд тохирох вэ?
Энэхүү блог нийтлэл нь WebP болон SVG-г зэрэгцүүлэн харьцуулж, хэрэгцээнд тохирсон шийдвэр гаргахад тань туслах болно.
WebP гэж юу вэ?
WebP нь Google-ийн 2010 онд гаргасан шинэ зургийн формат юм. Энэ нь JPEG болон PNG-ээс илүү зургийг шахах зориулалттай бөгөөд ингэснээр файлын хэмжээ багасдаг. Энэ нь зургийг вэб сайтууд дээр илүү хурдан ачаалах бөгөөд энэ нь хэрэглэгчийн туршлагыг сайжруулж чадна.
WebP нь JPEG эсвэл PNG шиг өргөн дэмжигдээгүй байгаа ч аажмаар татагдаж байна. Та тэдгээрийг дэмждэг вэб сайт дээр WebP зургийг ашиглаж болно, эсвэл онлайн хэрэглүүр ашиглан JPEG эсвэл PNG форматыг WebP болгон хөрвүүлж болно.
WebP-ийн онцлог
1. Lossless Format
WebP нь алдагдалгүй зургийн формат бөгөөд үүнийг хадгалахад зургийн чанар мууддаггүй гэсэн үг юм. Энэ нь JPEG-ээс ялгаатай бөгөөд энэ нь алдагдалтай формат бөгөөд зургийг шахах үед зарим зургийн чанар алдагддаг гэсэн үг юм.
Энэхүү алдагдалгүй шахалтын давуу тал нь WebP зургууд нь ихэвчлэн том хэмжээтэй байдаг.
2. Шахалтын харьцаа
WebP зургийн шахалтын харьцаа нь чанарын тохиргооноос хамаарч өөр өөр байдаг. Жишээлбэл, 50%-ийн чанарын тохиргоонд WebP зураг нь ижил чанарын JPEG зургийн хагастай тэнцүү байж болно.
3. Дэмжлэг
Энэ бол шинэ формат бөгөөд хөгжиж буй формат хэвээр байна. Үүнийг JPEG эсвэл PNG шиг өргөн дэмждэггүй. Гэсэн хэдий ч үүнийг олон төрлийн хөтөч дэмждэг.
4. Аюулгүй байдал
WebP бол нээлттэй формат юм. Энэ нь шифрлэгдээгүй гэсэн үг юм. Гэсэн хэдий ч энэ нь аюулгүй форматаар бүтээгдсэн бөгөөд үүнийг Google-ээс сайтар туршиж үзсэн.
WebP-ийн давуу болон сул талууд
Давуу тал
- Жижиг файлын хэмжээ
- Илүү хурдан ачаалах хугацаа
- Илүү сайн чанар
- Google, Facebook, Twitter-ийн хэрэглээ нэмэгдсэн
Байг
- Бүх хөтөч WebP-г дэмждэггүй
- Зарим хуучин төхөөрөмжүүд WebP зургийг харуулах боломжгүй байж магадгүй
- WebP зургийн нөөц байхгүй тул хэрэв хөтөч тэдгээрийг харуулах боломжгүй бол зураг огт харагдахгүй.
- Зургийг WebP рүү хөрвүүлэх нь цаг хугацаа их шаарддаг
SVG гэж юу вэ?
SVG бол орчин үеийн ихэнх вэб хөтчүүдийн дэмждэг вектор график формат юм. Вектор график гэдэг нь пикселээс илүү шугам, муруйгаас бүрдсэн зургууд юм.
Энэ нь тэдгээрийг чанараа алдалгүйгээр томруулж эсвэл багасгах шаардлагатай лого, зураг чимэглэл болон бусад графикт тохиромжтой болгодог.
SVG-г олон программд ашиглаж болно. Жишээлбэл, тэдгээрийг Photoshop дээр дүрс, лого хийхэд ашиглаж болно. Тэдгээрийг InDesign-д сэтгүүлийн зураглал үүсгэх, график хэвлэх хүртэл ашиглах боломжтой.
Вэб график, дүрс үүсгэхийн тулд SVG-г HTML болон CSS-д суулгаж болно.
SVG-ийн онцлог
1. Өргөтгөх боломжтой вектор график
Нарийвчлалаас хамааралгүй тул та SVG-г томруулж болно. Тэд хөдөлгөөнт төхөөрөмжөөс эхлээд Retina дэлгэц хүртэл ямар ч хэмжээтэй дэлгэц дээр сайхан харагдах болно. Вектор дээр суурилсан форматууд нь градиент, сүүдэр, эсрэг заалтыг дэмждэг.
2. Нийцтэй байдал
SVG нь Firefox, Safari, Chrome, Opera, Internet Explorer 10 болон түүнээс дээш хувилбар зэрэг орчин үеийн бүх хөтчүүдээр дэмжигддэг.
3. Засварлах
SVG нь засварлах боломжтой байхаар бүтээгдсэн. Та зурган дээр текст, дүрс болон бусад объектуудыг нэмж болно. Та зурган дээр гипер холбоос нэмж болно. Та Photoshop эсвэл InDesign дээр зургуудаа засах боломжтой.
4. HTML-д суулгагдсан
SVG-г ашиглан HTML хуудсанд суулгаж болно шошго. Энэ нь тэдгээрийг хуудасны аль ч хэсэгт байрлуулах боломжийг олгодог бөгөөд тэдгээр нь савны хэмжээтэй тохирч автоматаар томруулна.
Та мөн SVG-ийн байрлал, хэв маягийг хянахын тулд CSS ашиглаж болно.
SVG-ийн давуу болон сул талууд
Давуу тал
- SVG нь нягтралаас үл хамааран ямар ч төхөөрөмж дээр гайхалтай харагдах болно.
- Тэдгээр нь ихэвчлэн уламжлалт битмап зургуудаас жижиг хэмжээтэй байдаг тул илүү хурдан ачаалагддаг.
- Тэдгээрийг хөдөлгөөнт байдлаар хийж, таны контент хэрхэн харагдах, биеэ авч явахад илүү их хяналт тавих боломжтой.
- Та тэдгээрийг CSS болон JavaScript ашиглан хялбархан удирдаж, олон талт болгох боломжтой.
Байг
- Мэргэшсэн програм хангамжгүйгээр SVG-г үүсгэх, засварлахад хэцүү байж болно.
- Бүх хөтчүүд үүнийг дэмждэггүй тул SVG контентыг үзэж чадахгүй байгаа хэрэглэгчдэд зориулж нөөц зураг өгөх шаардлагатай байж магадгүй.
WebP vs SVG: Дүгнэлт
Ерөнхийдөө энэ нь таны юу хийхийг оролдож байгаагаас хамаарна. Хэрэв танд жижиг файлын хэмжээ, илүү нарийвчлалтай зураг хэрэгтэй бол SVG нь явах арга юм.
Гэсэн хэдий ч, хэрэв та хурдан ачаалах хугацаа, жижиг файлын хэмжээ авахын тулд бага зэрэг нарийвчлалыг золиослохыг хүсэхгүй байгаа бол WebP нь илүү дээр байж магадгүй юм.
Аль ч форматыг сонгохоос үл хамааран өөр өөр хувилбаруудыг туршиж үзээд таны хэрэгцээнд юу хамгийн сайн тохирохыг үзээрэй.
хариу үлдээх