"จะอัพรูปลงเว็บทั้งที ใช้ไฟล์ประเภทไหนถึงเหมาะสมนะ !?" <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 แล้วเราจะได้
同時也有2部Youtube影片,追蹤數超過40萬的網紅Jananoi,也在其Youtube影片中提到,คลิปนิทานคลิปที่ 2 ของพวกเรา ดูแล้วช่วยเขียนคอมเมนต์ ติ-ชม กันเข้ามาด้วยนะคะ หรืออยากจะให้เราทำนิทานเรื่องอะไร ก็สามารถแนะนำได้ค่ะ กดติดตาม (Subscrib...
「vector animation」的推薦目錄:
- 關於vector animation 在 BorntoDev Facebook 的最佳貼文
- 關於vector animation 在 โปรแกรมเมอร์ไทย Thai programmer Facebook 的最佳貼文
- 關於vector animation 在 Jananoi Youtube 的精選貼文
- 關於vector animation 在 ノッカーナアニメーション nokkana animation Youtube 的最讚貼文
- 關於vector animation 在 380 Vector Animation ideas - Pinterest 的評價
- 關於vector animation 在 How are the animations of these vector art type made? 的評價
- 關於vector animation 在 Start Animated Vector Drawable in Jetpack Compose - Stack ... 的評價
- 關於vector animation 在 airbnb/lottie-ios: An iOS library to natively render After ... - GitHub 的評價
vector 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
vector animation 在 Jananoi Youtube 的精選貼文
คลิปนิทานคลิปที่ 2 ของพวกเรา ดูแล้วช่วยเขียนคอมเมนต์ ติ-ชม กันเข้ามาด้วยนะคะ หรืออยากจะให้เราทำนิทานเรื่องอะไร ก็สามารถแนะนำได้ค่ะ
กดติดตาม (Subscribe) พวกเราได้ที่
Youtube
ช่อง Jananoi ► http://goo.gl/7Rff9M
ช่อง Jananoi Pets ► http://goo.gl/5Tqf22
Facebook:
Fan Page ► https://www.facebook.com/jananoi
FB Messenger ► https://goo.gl/A7gE1H
Instagram: ► https://www.instagram.com/jananoi/
Credit ภาพ
http://www.freepik.com/free-vector/four-scenes-of-river-and-forest_1250834.htm
vector animation 在 ノッカーナアニメーション nokkana animation Youtube 的最讚貼文
【童謡】春が来た カラオケ(歌詞つき♪)です。
ノッカーナアニメーション子供向けの歌一覧はこちらです↓
https://www.youtube.com/playlist?list=PLhgsc6ISlPKYo9dDdx9xyxdpxqFDsSHdN
*チャンネル登録はコチラからどうぞ↓
http://www.youtube.com/subscription_center?add_user=nokkanaanimation
===================-==========
ノッカーナ アニメーションYoutube動画一覧はこちらです♪
https://www.youtube.com/watch?v=7_adAZ8a1io&list=PLhgsc6ISlPKYnGtlvuHFZygzf3ckJqw0s&index=1
☆幼児・子供向け知育アニメ☆楽しみながら覚えられるよ!
https://www.youtube.com/playlist?list=PLhgsc6ISlPKYp2MLvJmkGRVDexdmw8Gan
☆「いないいないばぁっ」赤ちゃん・幼児向けアニメ☆赤ちゃんが笑ういないいないばぁっがいっぱい!
https://www.youtube.com/playlist?list=PLhgsc6ISlPKbiUTCaa58fw2UTyeU_611G
==============================
素材:Vector Graphics
vector animation 在 How are the animations of these vector art type made? 的推薦與評價
Most probably in some animation software. Such as After Effects, Adobe Animate, Flash, Toonboom Harmony etc. Even most 3d animation software ... ... <看更多>
vector animation 在 380 Vector Animation ideas - Pinterest 的推薦與評價
Nov 24, 2018 - Slick vector 2D animation and illustration. See more ideas about vector animation, 2d animation, animation. ... <看更多>