🔥 รู้หรือไม่ ?! เดี๋ยวนี้ Image Format ที่เขาใช้กันบนเว็บไม่ได้มีแค่ JPEG, PNG และ GIF แล้วนะ
.
แล้วมันมีแบบไหนบ้างล่ะ ? แต่ละแบบเหมาะกับงานแบบใด ? เก็บคำถามเหล่านี้ไว้ แล้วมาหาคำตอบไปพร้อม ๆ กับแอดได้ในโพสต์นี้เลยจ้า !!
.
ก่อนอื่นเรามารู้จักแบบที่เราคุ้นเคยกันก่อน นั่นคือ JPEG, PNG และ GIF
.
📷 JPEG
.
ย่อมาจาก Joint Photographic Experts Group เป็นไฟล์ที่อยู่คู่กับคนทำเว็บมานานมาก ๆ โดยมีไฟล์ขนาด คุณภาพดี แต่หากมีการบีบอัดอาจจะทำให้สูญเสียคุณภาพลงได้ จึงไม่เหมาะกับงานที่ต้องการความละเอียดสูง รองรับการแสดงผลได้ทุกเบราว์เซอร์
.
📷 PNG
.
ย่อมาจาก Portable Network Graphics เป็น Format ที่มีคุณภาพดีกว่า JPEG แต่จะมีขนาดไฟล์ใหญ่กว่า เหมาะกับการแสดงผลโลโก้ ภาพถ่าย หรือข้อความ ที่ต้องการความละเอียดสูง รองรับได้ทุกเบราว์เซอร์
.
📷 GIF
.
ย่อมาจาก Graphic Interchange Format เป็นไฟล์ภาพแบบเคลื่อนไหว แสดงค่าสีได้สูงสุดเพียง 256 มีไฟล์ขนาดเล็ก เหมาะสำหรับการทำภาพเคลื่อนไหว หรือกราฟิกแบบง่าย ๆ บนเว็บ รองรับการแสดงผลได้ทุกเบราว์เซอร์
.
📷 SVG
.
ย่อมาจาก Scalable Vector Graphics เป็น Image Format แบบกราฟิก 2 มิติ สร้างขึ้นด้วยสมการทางคณิตศาสตร์ ทำให้แสดงผลได้คมชัด และมีคุณภาพสูง ย่อ/ขยายได้ไม่แตก มีขนาดไฟล์มากกว่า Format อื่น ๆ ถ้าใช้เยอะ ๆ อาจจะทำให้เว็บโหลดช้าลงได้ เหมาะกับการแสดงผลรูปภาพที่ต้องการความละเอียดสูง ซึ่งเจ้า SVG รองรับการแสดงผลบนเบราว์เซอร์รุ่นใหม่ ๆ ไม่ว่าจะเป็น Chrome, Firefox, Opera และ Microsoft Edge เป็นต้น
.
มาต่อกันที่ Format ใหม่ ๆ ที่เราไม่คุ้นเคยกันบ้าง
.
📷 WebP
.
เป็นมาตรฐานไฟล์ภาพจาก Google ซึ่งเป็นการบีบอัดไฟล์ภาพให้เล็กลงกว่าเดิม (เล็กกว่า JPEG ถึง 25-34%) แต่คุณภาพยังดีเหมือนเดิมนั่นเอง ซึ่งถ้าใช้แสดงผลบนเว็บจะทำให้เว็บสามารถโหลดได้ไวมากขึ้นด้วย รองรับการแสดงผลบนเบราว์เซอร์ ได้แก่ Chrome, Firefox, Opera mini และ Microsoft Edge เป็นทางเลือกใหม่สำหรับคนที่ไม่อยากใช้ JPEG และ PNG
.
📷 AVIF
.
ชื่อเต็ม ๆ ของมันก็คือ AV1 Image File Format พัฒนาโดย Alliance for Open Media (AOMedia) ไฟล์ภาพเล็กลงกว่าเดิมโดยคุณภาพยังเหมือนเดิม ถ้าเทียบกับ JPEG แล้วจะลดลงถึง 50% และเทียบกับ WebP จะลดลง 30% รองรับการแสดงผลบน Google Chrome, Firefox และ Android ซึ่งมันเป็น Image Format รูปแบบใหม่จึงมีเบราว์เซอร์รองรับไม่เยอะ ซึ่งในอนาคตอาจจะใช้แทน JPEG ได้นั่นเอง
.
ก็จบกันไปแล้วกับ Image Format ที่สามารถใช้ทำ Web Application เพื่อน ๆ ก็ไปเลือกใช้ให้เหมาะกับงานของตัวเองได้เลย และหวังว่าโพสต์นี้จะเป็นประโยชน์กับเพื่อน ๆ นะคะ ❤️
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
#webdeveloper #imageformat #BorntoDev
同時也有2部Youtube影片,追蹤數超過11萬的網紅馮韋元Francois Devatine,也在其Youtube影片中提到,請你訂閲我的頻道! IG:@yuanyuanintaiwan FB:www.facebook.com/yuanyuanintaiwan 我終於開了YouTube頻道會員的功能!你如果想更瞭解頻道會員到底是什麽,你可以去看這裏:https://www.youtube.com/channel/UCj1...
「svg image」的推薦目錄:
- 關於svg image 在 BorntoDev Facebook 的最讚貼文
- 關於svg image 在 Facebook 的最佳解答
- 關於svg image 在 BorntoDev Facebook 的最佳貼文
- 關於svg image 在 馮韋元Francois Devatine Youtube 的精選貼文
- 關於svg image 在 hktuto 設計教學 Youtube 的最讚貼文
- 關於svg image 在 image 與SVG | 卡斯伯Blog - 前端,沒有極限 的評價
- 關於svg image 在 Do I use ,
- 關於svg image 在 How to turn any image into an SVG for free. - YouTube 的評價
- 關於svg image 在 EtheaDev/SVGIconImageList - GitHub 的評價
svg image 在 Facebook 的最佳解答
沒事來逛個外掛吧:讓你的圖,變成可互動、可點擊的Image Map!
這款外掛叫做
Image Map Pro for WordPress - SVG Map Builder
如果你想要做一個互動式的人體地圖,或是台灣地圖,這個外掛就可以搞定。
之前就有客戶畫了一張像是藏寶圖的圖,然後說希望做出互動效果,當用戶點A就前往A頁面,點B就前往B頁面。一開始我很煩惱,還想說這是不是要用Slider Revolution那種外掛才做得出來。
不用!這個Image Map就搞定了。我自己玩了5分鐘就會了,再花5分鐘錄了教學給客戶,客戶看了也就自己會設定了。
WP的好處就是這樣,所有都是自由的,網站可以跟你一起成長。你想要的功能,別人都幫你做好了。
查看外掛介紹 & Demo:
https://1.envato.market/MajDJ
喜歡這樣的內容嗎?在留言區告訴我吧,我還有一堆有趣的外掛可以分享
svg image 在 BorntoDev Facebook 的最佳貼文
"จะอัพรูปลงเว็บทั้งที ใช้ไฟล์ประเภทไหนถึงเหมาะสมนะ !?" <3
.
กับคำถามในหัวช่วงแรก ๆ ของการทำเว็บ (จนไปถึงแอปพลิเคชัน) ว่า ถ้าเราอยากอัพภาพให้คมชัด จนไปถึง อยากให้ภาพของเราขนาดเล็ก โหลดเพจไว ๆ
.
"ควรใช้ไฟล์ภาพประเภทไหนดี ?" วันนี้แอดจะพาทุกคนไปรู้จักทุกประเภทสำคัญ สำหรับงานเว็บไปพร้อมกัน ^_^
.
✅ JPEG (Joint Photographic Experts Group image)
.
รูปที่ใช้กันโดยทั่วไป JPEG เป็นไฟล์ประเภท lossy หมายความว่าไฟล์ประเภทนี้จะลดทอนข้อมูลบางส่วนที่ไม่สำคัญของภาพออกไปอย่างถาวร แต่ได้ไฟล์เล็กกว่า
.
เหมาะใช้กับภาพถ่ายหรือรูปที่ไม่จำเป็นต้องมีรายละเอียดครบ แต่ถ้าใช้กับกราฟหรือแผนภาพต่างๆ ที่ต้องการความละเอียดสูง อาจจะได้ผลลัพธ์ที่ไม่ดีนัก
.
✅ PNG (Portable Network Graphics)
PNG นั้นขึ้นชื่อเรื่องคำว่า lossless เหมาะใช้กับรูปทั่วไปบนเว็บไซต์ การบีบอัดที่คงรายละเอียดดีกว่า JPEG
.
และมีสีที่ดีกว่า GIF แต่ก็แลกมากับไฟล์ขนาดใหญ่กว่า ที่สำคัญ PNG ยังสามารถสร้างภาพเคลื่อนไหวได้ด้วย ซึ่งหลักการก็จะคล้ายๆกับ GIF เรียกว่า APNG (Animated)
.
✅ GIF (Graphics Interchange Format)
เป็นที่นิยมมากใน social media, ด้วยความเรียบง่ายของมัน และจุดเด่นที่สามารถสร้างภาพเคลื่อนไหวแบบง่ายๆได้
.
โดย GIF เป็นไฟล์ภาพที่มีมาตั้งแต่ปี 1987โดยสมัยนั้น GIF ถูกผลิตมาเป็นไฟล์ภาพที่แบบ Lossless แต่ก็เพียง 8-bit color เท่านั้น ซึ่งปัจจุบันถ้าต้องการความละเอียดใช้ PNG จะดีกว่า
.
✅ SVG (Scalable Vector Graphics)
เป็นไฟล์ภาพที่ใช้รองรับภาพแบบ Vector ที่จะคงข้อมูลการวาดไว้อย่างครบถ้วนไม่ว่าจะเป็น รูปร่าง เส้น และสี
.
ดังนั้นซูมแค่ไหนก็ไม่แตกแน่นอน เหมาะจะใช้กับ แผนภาพ และ icon ต่างๆ และเราสามารถนำไฟล์ SVG มาเปิดใน text editor แล้วเราจะได้
svg image 在 馮韋元Francois Devatine Youtube 的精選貼文
請你訂閲我的頻道!
IG:@yuanyuanintaiwan
FB:www.facebook.com/yuanyuanintaiwan
我終於開了YouTube頻道會員的功能!你如果想更瞭解頻道會員到底是什麽,你可以去看這裏:https://www.youtube.com/channel/UCj1uvaVv-iHtFvSCFoiLpYw/join
一下是我所有常用的裝備【你如果對Insta360的相機有興趣的話,可以用我的連結去買,我會收到小費,謝謝你~】
Insta360 GO 2: https://www.insta360.com/sal/go_2?insrc=INRTDOF
Insta360 ONE X2: https://www.insta360.com/sal/one_x2?insrc=INRTDOF
Insta360 ONE R:https://www.insta360.com/sal/one_r?insrc=INRTDOF
Canon M6 Mark II: https://amzn.to/2NtCFJP
Saramonic Blink500 Pro: https://amzn.to/3cZlhWj
DJI Mini 2: https://amzn.to/38SAqHH
Canon EF-M 55-200: https://amzn.to/3eSbdRl
Canon EF-M 22mm: https://amzn.to/3bVxeN6
Manfrotto PIXI EVO 2: https://amzn.to/3qYUZsb
GoPro Hero 9: https://amzn.to/3twdc1N
Using Samwingkit's Cangjie image https://commons.wikimedia.org/wiki/File:%E5%80%89%E9%A0%A1%E8%BC%B8%E5%85%A5%E6%B3%95_%E6%8B%86%E7%A2%BC.jpg
Using Boshiamy image from https://en.wikipedia.org/wiki/File:Boshiamy_decomposed2.svg
svg image 在 hktuto 設計教學 Youtube 的最讚貼文
Hello 大家好,歡迎再一次收睇 HKTUTO,
2015 年就快來到,所以將來幾集都會同大家講一下在 2015 年會流行什麼同有什麼新技術係大家一定要留意的
首先和大家講下有關網站設計的十個流行趨勢吧 !
1.Responsive Website
2.Webfonts
3.SVG
4. Full Screen Image / video
5. Flat Design
6. Card Design
7, Parallax Scrolling
8, Scrolling not Clicking
9. Material design / apple os
10. Microinteraction
svg image 在 How to turn any image into an SVG for free. - YouTube 的推薦與評價
This tutorial will show you how to take a PNG or JPG image and turn it into a layered SVG for free ... ... <看更多>
svg image 在 image 與SVG | 卡斯伯Blog - 前端,沒有極限 的推薦與評價
以上的原始碼 <svg> <image xlink:href="images/20130821.svg" src="images/20130821.png" width="75" height="75"/> </svg>. 如果在支持SVG的瀏覽器 ... ... <看更多>