🔥 รู้หรือไม่ ?! เดี๋ยวนี้ 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
同時也有9部Youtube影片,追蹤數超過5,040的網紅Sandy采聿老師,也在其Youtube影片中提到,Facebook粉絲專頁 ► https://www.facebook.com/sandytsaiyu/ 這則故事講的是一隻熱心助人的小熊,住在一間小木屋裡面。有一年冬天,天氣很冷,外面下起雪來,坐在暖爐邊喝著熱茶的小熊聽到外面不斷傳來敲門聲,在外頭受凍的小動物紛紛來尋求幫忙。 故事改編自一首很...
「vector graphics」的推薦目錄:
- 關於vector graphics 在 BorntoDev Facebook 的最佳貼文
- 關於vector graphics 在 GIGAZINE Facebook 的最佳解答
- 關於vector graphics 在 BorntoDev Facebook 的最讚貼文
- 關於vector graphics 在 Sandy采聿老師 Youtube 的精選貼文
- 關於vector graphics 在 魏巍 Youtube 的精選貼文
- 關於vector graphics 在 レトルト Youtube 的精選貼文
- 關於vector graphics 在 Understanding Vector Graphics — Using SVG with CSS3 and ... 的評價
- 關於vector graphics 在 Jserv與他愉快的小夥伴- Vector graphics on STM32F429i ... 的評價
vector graphics 在 GIGAZINE Facebook 的最佳解答
無料&ブラウザ上でSVG形式の画像やアイコンを作成・編集・ダウンロードできる「SvgPathEditor」レビュー
vector graphics 在 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 แล้วเราจะได้
vector graphics 在 Sandy采聿老師 Youtube 的精選貼文
Facebook粉絲專頁 ► https://www.facebook.com/sandytsaiyu/
這則故事講的是一隻熱心助人的小熊,住在一間小木屋裡面。有一年冬天,天氣很冷,外面下起雪來,坐在暖爐邊喝著熱茶的小熊聽到外面不斷傳來敲門聲,在外頭受凍的小動物紛紛來尋求幫忙。
故事改編自一首很有名的英文兒歌 Little Cabin in the Woods,原始的歌詞是這樣的:
Little cabin in the woods
Little man by the window stood
Saw a rabbit hopping by knocking at the door
"Help me, help me, sir!" he cried.
"Before the farmer bops my head!"
Come little rabbit
Come inside
Warm up by the fire
---
故事:The Bear in the Cabin
作者:Tsaiyu Chang 張采聿
插畫:Irene Chen 陳虹燁
源自:在彩虹時間Rainbow Time兒童英文雜誌 (2017/9月刊)
Banner & Vector created by freepik
► https://www.freepik.com
Free Realistic Snow Overlay by Kosmos Motion Graphics
► http://youtu.be/vEhD5WwCo44
![post-title](https://i.ytimg.com/vi/qizDnW2Ste4/hqdefault.jpg)
vector graphics 在 魏巍 Youtube 的精選貼文
開始一個新的系列!分享練習 Figma 向量繪圖的過程。第一集就這麼說做就做開始了。先下載免費的軟體 Figma,然後選擇一個簡單的圖形來試著畫畫看。我選了 Line 的熊大!之前教用 Sketch 來設計 UI/UX 的時候,這是我的第一個範例,現在用 Figma 來畫,很快就畫完了...
![post-title](https://i.ytimg.com/vi/xQqaYL0HZM4/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLDFR96Sf2bf6pZ8KESw-eKMnZhXUQ)
vector graphics 在 レトルト Youtube 的精選貼文
おえかきの森無限に遊べちゃうよね。
チャンネル登録よろしくどうぞ!⇒ http://goo.gl/OZrD3u
【コメント&高評価頂けると嬉しいです】
レトルト・キヨ・牛沢・ガッチマンで遊んだ
(c)NHN hangame Corp.
◆レトルトツイッター⇒https://twitter.com/retokani
◆インスタグラム⇒https://www.instagram.com/retort64/
◆ニコニコでも活動中⇒http://www.nicovideo.jp/user/14930070
◆ニコニコチャンネル⇒http://ch.nicovideo.jp/retort
★バカゲー 再生リスト⇒http://qq1q.biz/o4XA
★実況part1集 再生リスト⇒http://qq1q.biz/o4Xo
画像:Vector Graphics
![post-title](https://i.ytimg.com/vi/8y6kZkniojs/hqdefault.jpg)
vector graphics 在 Jserv與他愉快的小夥伴- Vector graphics on STM32F429i ... 的推薦與評價
Vector graphics on STM32F429i Discovery. 隨著應用型態的多樣化,以往高階繪圖技巧逐漸應用於小而美的裝置中。近來,我們也針對ARM Cortex-M4F ... ... <看更多>
vector graphics 在 Understanding Vector Graphics — Using SVG with CSS3 and ... 的推薦與評價
Vector graphics consist of mathematical descriptions of shapes as a combination of these numerical vectors. Because the vector graphics define the path that ... ... <看更多>