ปรกติบทความที่เราสร้างขึ้นเมื่อเราใส่รูปลงไปแล้ว มันก็จะมีขนาดเดียวไม่ว่าเราจะลดขยายจอยังไง รูปที่เรียกใช้งานก็มีเพียงรูปเดียวขนาดเดียว ทำให้เมื่อเราใช้งานหน้าจอเล็กแต่ก็ยังต้องเรียกใช้งานรูปที่มีขนาดใหญ่เกิน กว่าหน้าจอ ซึ่งจะทำให้เสียเวลาโหลดรูปที่ขนาดเกินความจำเป็นของเราโดยใช่เหตุ และ plugin ที่จะมาช่วยเราในเรื่องนี้ก็คือ
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
จะเห็นว่าในแต่ละขนาดของหน้าจอจะมีการเรียกไฟล์รูปกันคนละตัว และขนาดหน้าจอที่เล็กลงก็หมายถึงขนาดของรูปที่เราจะโหลดมาใช้งานก็มีขนาด เล็กลงไปด้วย ทำให้เราไม่ต้องโหลดรูปที่มีขนาดมากเกินความจำเป็นกับขนาดหน้าจอของเรา
ที่มา:
http://www.wordpress.in.th/wordpress-plugin/plugin-wordpress-image-hammy/
