"จะอัพรูปลงเว็บทั้งที ใช้ไฟล์ประเภทไหนถึงเหมาะสมนะ !?" <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 แล้วเราจะได้
同時也有1部Youtube影片,追蹤數超過2萬的網紅hktuto 設計教學,也在其Youtube影片中提到,html 5 動畫 簡介- HKTUTO live 02 adobe animate cc, google web designer, SVG animation, svg font...
「svg animation」的推薦目錄:
- 關於svg animation 在 BorntoDev Facebook 的最佳解答
- 關於svg animation 在 เกมถูกบอกด้วย v.2 Facebook 的最讚貼文
- 關於svg animation 在 โปรแกรมเมอร์ไทย Thai programmer Facebook 的最佳貼文
- 關於svg animation 在 hktuto 設計教學 Youtube 的精選貼文
- 關於svg animation 在 SVG animations: sluggish/poor performance in Chrome 的評價
- 關於svg animation 在 vivus.js - svg animation 的評價
- 關於svg animation 在 11 SVG Animation ideas - Pinterest 的評價
- 關於svg animation 在 parallax/svg-animation-tools: An awesome workflow ... - GitHub 的評價
- 關於svg animation 在 How to animate SVG paths as an animated PDF with animate? 的評價
svg animation 在 เกมถูกบอกด้วย v.2 Facebook 的最讚貼文
https://www.humblebundle.com/books/game-design-animation-packt-books?partner=ggcp
แพ็คใหม่จาก Humble นะครัช ครั้งนี้คือ HUMBLE BOOK BUNDLE: GAME DESIGN & ANIMATION BY PACKT รายละเอียดมีดังนี้
.
จ่าย $1 รับ
- Level Up Your CSS Animation Skills - Video
- Learn the Foundations of Blender - Video
- Hands-On C++ Game Animation Programming
- Learn Clip Studio Paint - Second Edition
- Blender 3D By Example - Second Edition
.
จ่าย $8 รับเพิ่ม
- Create a Game Character: Blender, Substance Painter, and Unity - Video
- Mastering Adobe Photoshop Elements 2020
- Blender for Video Production Quick Start Guide
- Hands-On Motion Graphics with Adobe After Effects CC
- OpenGL and GLSL Fundamentals with C++ (practical course) - Video
.
จ่าย $15 รับเพิ่ม
- Learn Modern OpenGL Programming - Video
- Practical Game Design
- Game Design with Unity 2019 - Video
- Mastering UI Development with Unity
- Introduction to 3D Character Animation in Unreal Engine 4 - Video
- Unreal Engine 4 Virtual Reality Projects
- Godot Engine Game Development Projects
- Real-Time 3D Graphics with WebGL 2 - Second Edition
- OpenGL 4 Shading Language Cookbook - Third Edition
- Mastering SVG
.
รายละเอียดเพิ่มเติมดูที่หน้าร้านค้า
https://www.humblebundle.com/books/game-design-animation-packt-books?partner=ggcp
.
อนึ่ง eBook และ วิดีโอ
.
อสอง ดีลนี้หมดเวลาในอีก 20 วันกว่าๆ
.
อสาม ก็ตามชื่อแพ็คคือรวมหนังสือและวิดีโอสอนเกี่ยวกับการทำเกมและแอนิเมชัน ใครทำงานหรือเรียนสายนี้อยู่ก็จัดกันไป
.
หนังสือดีราคาถูกแบบนี้
ไม่สอยได้ไงพี่น้องงงงง
https://www.humblebundle.com/books/game-design-animation-packt-books?partner=ggcp
-------------------------------
Steam Wallet, Battle.net Code, PSN ซื้อง่าย ได้โค๊ดทันที >> GGKeyStore.com
-------------------------------
Death Stranding ลด 21% เหลือ $47.59 ประมาณ 1510 บาท (Steam) ดูที่นี่ - https://bit.ly/32OcBym
svg animation 在 โปรแกรมเมอร์ไทย Thai programmer Facebook 的最佳貼文
SVG ชื่อเต็ม Scalable Vector Graphics
แปลเป็นไทยก็คือ "ภาพกราฟิกส์เวกเตอร์ที่ขยายขนาดได้"
.
มันเป็นภาษามาร์กอัปบนมาตรฐาน XML
สำหรับอธิบายภาพกราฟิกส์เวกเตอร์ 2 มิติ
ทั้งที่เป็นภาพนิ่งและภาพเคลื่อนไหว
.
อยู่ภายใต้การดูแลโดย
World Wide Web Consortium
เวอร์ชันล่าสุดคือ SVG 1.1
.
แต่ในมุมนักพัฒนาส่วนใหญ่
รู้จักว่า SVG เป็นภาพแบบเวคเตอร์
การวาดเส้นตรง ส่วนโค้ง เว้านูนต่างๆ ฯลฯ
เบื้องหลังสร้างขึ้นจากคณิตศาสตร์ที่คำนวณให้
.
มักพบเห็นบ่อยเอาไว้ใช้แสดงบนเว็บบราวเซอร์
เพื่อสร้างกราฟฟิกทั้งภาพนิ่งและเคลื่อนไหวให้สวยงาม
.
หรือจะใช้โปรแกรมกราฟฟิกสร้าง SVG ก็ย่อมได้
เพราะโปรแกรมบางตัวรองรับมาตรฐานแบบนี้
.
แต่ต่อไปนี้จะเป็นไลบรารรี่ภาษา JavaScript เอาไว้สร้าง SVG
เหมาะกับนักพัฒนาซอฟต์แวร์
มันมีหลายตัว
ซึ่งทางเพจก็ได้รวมรวบมาให้แล้วที่นี้ที่เดียว
.
1) http://velocityjs.org
http://velocityjs.org
2) SVG.JS
https://svgjs.com/docs/3.0/
3) Walkway.js
https://connoratherton.com/walkway
4) RaphaelJS
http://raphaeljs.com
5) Snap.Svg
http://snapsvg.io
6) Bonsai
https://bonsaijs.org
7) Lazy Line Painter
http://lazylinepainter.info/
8) Vivus
https://maxwellito.github.io/vivus/
9) ProgressBar.js
http://kimmobrunfeldt.github.io/progressbar.js/
10) Two.JS
https://jonobr1.github.io/two.js/
11)Chartlist.js
https://gionkunz.github.io/chartist-js/
12) svgweb
https://code.google.com/archive/p/svgweb/
13) SVGKit
http://svgkit.sourceforge.net
14) d3js
https://d3js.org
15) Jim Knopf
https://eskimoblood.github.io/jim-knopf/
16) RAWGraphs
https://rawgraphs.io
17) seen.js
http://seenjs.io
18) trianglify
http://qrohlf.com/trianglify/
19) pergola
http://www.dotuscomus.com/pergola/
20) JSDrawing
http://www.kevlindev.com/projects/jsdrawing/index.htm
21) circles
https://github.com/lugolabs/circles
22) Fitter Happier Text
https://github.com/jxnblk/fitter-happier-text
.
.
อ้างอิง
-https://noeticforce.com/javascript-libraries-for-svg-animation
-https://jqueryhouse.com/svg-javascript-libraries-for-developers/
.
.
++++ขอประชาสัมพันธ์++++++
ใครสนใจศึกษาจาวาสคริปต์ (JavaScript)
คนละภาษากับ Java
เผื่ออนาคตจะเอาไปต่อยอด
พัฒนาเว็บไซต์
ก็อุดหนุนหนังสือเล่มนี้ได้ ที่ซีเอ็ด
https://www.se-ed.com/product-search/จตุรพัชร์-พัฒนทรงศิวิไล.aspx?keyword=จตุรพัชร์+พัฒนทรงศิวิไล
.
✍เขียนโดย โปรแกรมเมอร์ไทย thai programmer
svg animation 在 hktuto 設計教學 Youtube 的精選貼文
html 5 動畫 簡介- HKTUTO live 02
adobe animate cc, google web designer, SVG animation, svg font

svg animation 在 vivus.js - svg animation 的推薦與評價
Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn. There are a variety ... ... <看更多>
svg animation 在 11 SVG Animation ideas - Pinterest 的推薦與評價
Jun 26, 2017 - Explore Gabriel Muniz's board "SVG Animation" on Pinterest. See more ideas about svg animation, animation, svg. ... <看更多>
svg animation 在 SVG animations: sluggish/poor performance in Chrome 的推薦與評價
... <看更多>