HOT-TH.COm

.:: สังคมดีๆแห่งการแบ่งปัน ::....

คุณมี ID แล้วหรือยัง ? สมัครสมาชิก  ลืมรหัสผ่าน

หาเงินออนไลน์ งาน online โปรเจคจบ ทำ seo adword สร้างเว็บฟรี แจกสคริป

ดู: 709|ตอบกลับ: 2

Plugin WordPress : เรียกรูปตามขนาดของหน้าจอด้วย Hammy

[คัดลอกลิงก์]


1000

กระทู้

38

ติดตาม

1หมื่น

เครดิต

ผู้จัดการกระดาน

Rank: 9Rank: 9Rank: 9

โพสต์เมื่อ 24-10-2012 12:31:05 |ดูโพสต์ทั้งหมด
  shared Ping your blog, website, or RSS feed for Free

Plugin WordPress : เรียกรูปตามขนาดของหน้าจอด้วย Hammy
ปรกติบทความที่เราสร้างขึ้นเมื่อเราใส่รูปลงไปแล้ว มันก็จะมีขนาดเดียวไม่ว่าเราจะลดขยายจอยังไง รูปที่เรียกใช้งานก็มีเพียงรูปเดียวขนาดเดียว ทำให้เมื่อเราใช้งานหน้าจอเล็กแต่ก็ยังต้องเรียกใช้งานรูปที่มีขนาดใหญ่เกินกว่าหน้าจอ ซึ่งจะทำให้เสียเวลาโหลดรูปที่ขนาดเกินความจำเป็นของเราโดยใช่เหตุ
และ plugin ที่จะมาช่วยเราในเรื่องนี้ก็คือ Hammy
Hammy
หลังจากที่ download plugin hammy มาติดตั้งแล้ว จะมีหัวข้อ hammy โผล่มาใน settings
มาดูว่า hammy ต้องตั้งค่าอะไรกันบ้าง
หัวข้อที่ 1 คือ เราจะให้ hammy ช่วยจัดการขนาดของรูปในส่วนไหนบ้าง ซึ่งตามปรกติที่ทาง plugin แนะนำมา ก็คือส่วนของเนื้อหาบทความ หรือ content ของเรานั่นเอง และตามหลักทั่วไป theme มักจะใช้ #content หรือ.entry-content
หัวข้อที่ 2 ซึ่งเป็นส่วนสำคัญเลย คือตั้งค่าว่าจะให้มีรูปขนาดไหนบ้าง เพื่อที่จะได้เลือกรูปให้มีขนาดเหมาะสมกับขนาดหน้าจอที่เรียกใช้งานเว็บของเรา โดยยึดหลักที่ความกว้างของรูปและหน้าจอ ส่วนตรงที่ลูกศรชี้ก็คือ จะให้รูปมีขนาดกว้างที่สุดเท่าไหร่ สมมติว่าเราอัพรูปขนาดกว้าง 800px เวลาไปอยู่หน้าเว็บ มันจะถูกเรียกด้วยรูปที่มีขนาดกว้าง 768px และมีขนาด 480px และ 360px ตามขนาดหน้าจอที่เปิดเว็บ แต่ถ้าเราอัพรูปขนาดกว้าง 600px มันจะถูกเรียกด้วยขนาดกว้าง 480px เพราะว่ารูปที่เราอัพมีขนาดไม่ถึง 768px ดังนั้นจะตั้งขนาดรูปเท่าไหร่บ้าง ก็คำนวนกันให้ดี ๆ นะครับ
หัวข้อที่ 3 คือให้เราใส่ id หรือ class ของส่วนที่เราไม่ต้องการให้ตัว hammy ไปจัดการรูปภาพ

ผมจะลองตั้งค่าให้ดูนะครับ

คราวนี้มาดูหน้าเว็บว่า เจ้า hammy มันช่วยจัดการขนาดรูปอย่างไรบ้าง โดยรูปที่จะแสดงต่อไป จะเป็นบทความที่แสดงในหน้าจอทั่ว ๆ ไป, หน้าจอกว้าง 480px และหน้าจอกว้าง 320px ตามลำดับ

หน้าจอทั่ว ๆ ไป



หน้าจอกว้าง 480px


หน้าจอกว้าง 320px


ถ้าดูแบบนี้ ก็คงยังไม่เห็นว่า hammy มันช่วยให้ลดขนาดรูปยังไง คราวนี้มาดูขนาดรูปกันครับ ว่าในแต่ละขนาดหน้าจอ มันเรียกรูปตัวไหนมากัน

หน้าจอทั่ว ๆ ไป



หน้าจอกว้าง 480px


หน้าจอกว้าง 320px


จะเห็นว่า ในแต่ละขนาดของหน้าจอจะมีการเรียกไฟล์รูปกันคนละตัว และขนาดหน้าจอที่เล็กลงก็หมายถึงขนาดของรูปที่เราจะโหลดมาใช้งานก็มีขนาดเล็กลงไปด้วย ทำให้เราไม่ต้องโหลดรูปที่มีขนาดมากเกินความจำเป็นกับขนาดหน้าจอของเรา



0

กระทู้

0

ติดตาม

7หมื่น

เครดิต

Vip

Rank: 8Rank: 8

โพสต์เมื่อ 16-3-2020 01:33:33 |ดูโพสต์ทั้งหมด


0

กระทู้

0

ติดตาม

7หมื่น

เครดิต

Vip

Rank: 8Rank: 8

โพสต์เมื่อ 16-3-2020 01:35:08 |ดูโพสต์ทั้งหมด
Sponsor
ขออภัย! คุณไม่ได้รับสิทธิ์ในการดำเนินการในส่วนนี้ กรุณาเลือกอย่างใดอย่างหนึ่ง ลงชื่อเข้าใช้ | สมัครสมาชิก

Ping your blog, website, or RSS feed for Free

© 2013 หาเงินออนไลน์ งาน online โปรเจคจบ ทำ seo adword สร้างเว็บฟรี แจกสคริป

Check Google Page Rank

Processed in 37.069461 second(s), 233 queries .

ขึ้นไปด้านบน