ການປັບແຕ່ງເວັບໄຊທ໌ຂອງທ່ານດ້ວຍ CSS Sprites

ເວັບໄຊຕ໌ spritemaster

ຂ້າພະເຈົ້າຂຽນກ່ຽວກັບຄວາມໄວຂອງ ໜ້າ ເວັບຂ້ອນຂ້າງ ໜ້ອຍ ໜຶ່ງ ໃນເວບໄຊທ໌ນີ້ແລະມັນແມ່ນສ່ວນ ໜຶ່ງ ທີ່ ສຳ ຄັນຂອງການວິເຄາະແລະປັບປຸງທີ່ພວກເຮົາເຮັດໃນເວັບໄຊຂອງລູກຄ້າຂອງພວກເຮົາ. ຫລີກໄປທາງຫນຶ່ງຈາກການເຄື່ອນຍ້າຍໄປຫາເຄື່ອງແມ່ຂ່າຍທີ່ມີປະສິດທິພາບແລະການໃຊ້ເຄື່ອງມືເຊັ່ນ ເຄືອຂ່າຍການຈັດສົ່ງເນື້ອຫາ, ມີຫລາຍໆເຕັກນິກການຂຽນໂປແກຼມອື່ນທີ່ນັກພັດທະນາເວັບສາມາດ ນຳ ໃຊ້ໄດ້.

ມາດຕະຖານ ສຳ ລັບແຜ່ນສະໄຕ ທຳ ມະດາທີ່ມີຮູບຊົງເດີມແມ່ນມີອາຍຸຫຼາຍກວ່າ 15 ປີແລ້ວ. CSS ແມ່ນວິວັດທະນາການທີ່ ສຳ ຄັນໃນການພັດທະນາເວບໄຊທ໌ເພາະມັນແຍກເນື້ອຫາອອກແບບ. ເບິ່ງບລັອກນີ້ແລະອື່ນໆແລະສ່ວນໃຫຍ່ຂອງຄວາມແຕກຕ່າງຂອງຄໍເຕົ້າໄຂ່ແມ່ນພຽງແຕ່ຢູ່ໃນຕາຕະລາງທີ່ຕິດຄັດມາ. Stylesheets ຍັງມີຄວາມ ສຳ ຄັນເພາະວ່າມັນຖືກເກັບຢູ່ໃນບ່ອນເກັບຂໍ້ມູນພາຍໃນ browser ຂອງທ່ານ. ດ້ວຍເຫດນັ້ນ, ໃນຂະນະທີ່ຜູ້ຄົນສືບຕໍ່ໄປຢ້ຽມຢາມເວັບໄຊທ໌້ຂອງທ່ານ, ພວກເຂົາບໍ່ໄດ້ດາວໂລດເອກະສານສະໄຕໃນແຕ່ລະຄັ້ງ ... ພຽງແຕ່ເນື້ອໃນຂອງ ໜ້າ.

ໜຶ່ງ ໃນອົງປະກອບຂອງ CSS ທີ່ບໍ່ຄ່ອຍໄດ້ປະຕິບັດແມ່ນ CSS Sprites. ເມື່ອຜູ້ໃຊ້ຢ້ຽມຢາມເວັບໄຊທ໌້ຂອງທ່ານ, ທ່ານອາດຈະບໍ່ຮູ້ວ່າພວກເຂົາບໍ່ພຽງແຕ່ເຮັດ ຄຳ ຮ້ອງຂໍ ໜຶ່ງ ດຽວ ສຳ ລັບ ໜ້າ ເວັບ. ພວກເຂົາ ເຮັດການຮ້ອງຂໍຫຼາຍຄັ້ງ… ຄຳ ຮ້ອງຂໍ ສຳ ລັບ ໜ້າ ທີ່, ສຳ ລັບເອກະສານສະໄຕ, ສຳ ລັບເອກະສານ JavaScript ທີ່ຕິດຄັດມາ, ແລະຕໍ່ມາແຕ່ລະຮູບ. ຖ້າທ່ານມີຫົວຂໍ້ທີ່ມີຊຸດຂອງຮູບພາບ ສຳ ລັບຊາຍແດນ, ແຖບ ນຳ ທາງ, ພື້ນຫລັງ, ປຸ່ມ, ແລະອື່ນໆ ... ຕົວທ່ອງເວັບຕ້ອງໄດ້ຮ້ອງຂໍແຕ່ລະອັນ, ເທື່ອລະອັນຈາກເຄື່ອງແມ່ຂ່າຍເວັບຂອງທ່ານ. ວີຜົນປະໂຫຍດໂດຍຫລາຍພັນຄົນຂອງຜູ້ມາຢ້ຽມຢາມແລະທີ່ສາມາດເປັນຫລາຍສິບພັນຄົນຂອງຄໍາຮ້ອງຂໍທີ່ເຮັດກັບເຄື່ອງແມ່ຂ່າຍຂອງທ່ານ!

ນີ້, ແລະເຮັດໃຫ້ເວັບໄຊທ໌້ຂອງທ່ານຊ້າລົງ. ກ ເວັບໄຊທ໌ຊ້າສາມາດມີຜົນກະທົບຢ່າງຫຼວງຫຼາຍຕໍ່ການມີສ່ວນພົວພັນແລະການສົນທະນາ ທີ່ຜູ້ຊົມຂອງທ່ານເຮັດ. ຍຸດທະສາດ ໜຶ່ງ ທີ່ນັກພັດທະນາເວບໄຊທ໌ໃຫຍ່ໃຊ້ແມ່ນການເອົາຮູບພາບທັງ ໝົດ ເຂົ້າໃນເອກະສານດຽວ…ເອີ້ນວ່າ a sprite. ແທນທີ່ຈະເຮັດການຮ້ອງຂໍ ສຳ ລັບແຕ່ລະຮູບພາບເອກະສານຂອງທ່ານ, ດຽວນີ້ຕ້ອງມີການຮ້ອງຂໍດຽວ ສຳ ລັບຮູບພາບ Sprite ດຽວ!

ທ່ານສາມາດອ່ານກ່ຽວກັບ ວິທີການ CSS Sprites ເຮັດວຽກຢູ່ CSS-Tricks or CSS Sprite ຂອງ Smashing Magazine ໂພດ. ຈຸດຂອງຂ້ອຍບໍ່ແມ່ນເພື່ອສະແດງວິທີການ ນຳ ໃຊ້ພວກມັນ, ພຽງແຕ່ໃຫ້ ຄຳ ແນະ ນຳ ແກ່ເຈົ້າເພື່ອຮັບປະກັນວ່າທີມງານພັດທະນາຂອງເຈົ້າໄດ້ລວມເອົາພວກມັນເຂົ້າໃນເວັບໄຊທ໌້. ຕົວຢ່າງທີ່ CSS Tricks ສະແດງໃຫ້ເຫັນ 10 ຮູບພາບທີ່ເປັນ 10 ຄຳ ຮ້ອງຂໍແລະເພີ່ມສູງເຖິງ 20.5Kb. ໃນເວລາທີ່ການລວບລວມໃນ sprite ດຽວ, ມັນແມ່ນ 1 ຄຳ ຮ້ອງຂໍນັ້ນແມ່ນ 13kb! ເວລາການຮ້ອງຂໍການເດີນທາງຮອບແລະເວລາຕອບສະ ໜອງ ສຳ ລັບຮູບພາບ 9 ປະຈຸບັນໄດ້ ໝົດ ໄປແລ້ວແລະ ຈຳ ນວນຂໍ້ມູນຖືກຫຼຸດລົງຫຼາຍກວ່າ 30%. ຄູນດ້ວຍ ຈຳ ນວນຜູ້ມາຢ້ຽມຢາມໃນເວັບໄຊທ໌້ຂອງທ່ານແລະທ່ານ ກຳ ລັງໂກງຊັບພະຍາກອນບາງຢ່າງ!

globalnavໄດ້ ຈາກຫນາກແອບເປີ ແຖບ ນຳ ທາງແມ່ນຕົວຢ່າງທີ່ດີ. ແຕ່ລະປຸ່ມມີສອງສາມລັດ…ບໍ່ວ່າທ່ານຈະຢູ່ ໜ້າ, ປິດ ໜ້າ, ຫລືຢູ່ເທິງປຸ່ມ. CSS ກຳ ນົດຈຸດປະສານງານຂອງປຸ່ມແລະ ນຳ ສະ ເໜີ ຂົງເຂດຂອງລັດທີ່ຖືກຕ້ອງໃຫ້ກັບ browser ຂອງຜູ້ໃຊ້. ທຸກໆລັດດັ່ງກ່າວລ້ວນແຕ່ຖືກພັງທະລາຍລົງພ້ອມກັນເປັນຮູບດຽວ - ແຕ່ສະແດງເຂດຕາມພາກພື້ນຕາມທີ່ໄດ້ລະບຸໄວ້ໃນແຜ່ນສະໄຕ.

ຖ້ານັກພັດທະນາຂອງທ່ານຮັກເຄື່ອງມື, ມັນມີໂຕນຢູ່ບ່ອນນັ້ນທີ່ສາມາດຊ່ວຍພວກເຂົາ, ລວມທັງເຄື່ອງ ກອບ Compass CSS, ຄໍາຮ້ອງຂໍຫຼຸດຜ່ອນ ສຳ ລັບ ASP.NET, CSS-Spriter ສຳ ລັບ Ruby, ສະຄິບ CSSSprite ສຳ ລັບ Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Project Fondue's CSS Sprite Generator, ເວັບຕົ້ນສະບັບ Sprite, ແລະ SpriteMe Bookmarklet.

ພາບຫນ້າຈໍຂອງ ເວັບຕົ້ນສະບັບ Sprite:
ເວັບໄຊຕ໌ spritemaster

Martech Zone ບໍ່ໄດ້ ນຳ ໃຊ້ຮູບພາບພື້ນຫລັງໃນຫົວຂໍ້ຂອງມັນ, ສະນັ້ນພວກເຮົາບໍ່ ຈຳ ເປັນຕ້ອງ ນຳ ໃຊ້ເຕັກນິກນີ້ໃນເວລານີ້.

2 ຄໍາເຫັນ

  1. 1

    ລໍຖ້າ ... ການເກັບກໍາທັງຫມົດບໍ່ແມ່ນ "ຮູບພາບ" (ຫຼື "ຍົນ"), ແລະແຕ່ລະຮູບຍ່ອຍ (ຫຼືກຸ່ມຍ່ອຍຂອງຮູບພາບໃນກໍລະນີຂອງການມີການເຄື່ອນໄຫວຫຼືການໂຕ້ຕອບທີ່ມີການປ່ຽນແປງຫນຶ່ງ) ເປັນ "sprite"?

    ບາງທີສິ່ງທີ່ຖືກປ່ຽນຊື່ຕັ້ງແຕ່ຄັ້ງສຸດທ້າຍທີ່ຂ້ອຍຈັດການກັບສິ່ງດັ່ງກ່າວແຕ່ຂ້ອຍສາມາດສາບານວ່າ Sprite ແມ່ນອົງປະກອບທີ່ສິ້ນສຸດລົງເຖິງການສະແດງ, ບໍ່ແມ່ນຕາຕະລາງຂໍ້ມູນໃຫຍ່ທີ່ມັນຖືກດຶງອອກມາ.

    (“ຕາຕະລາງ Sprite”… ນັ້ນບໍ່ແມ່ນບໍ?)

    • 2

      ພວກເຮົາອາດຈະເວົ້າສອງສິ່ງທີ່ແຕກຕ່າງກັນ, Mark. ດ້ວຍ CSS, ທ່ານສາມາດລະບຸໄດ້ໂດຍພື້ນຖານວ່າ 'ສ່ວນ' ຂອງໄຟລ໌ຮູບພາບໃດນຶ່ງເພື່ອສະແດງການນຳໃຊ້ພິກັດ. ນີ້ອະນຸຍາດໃຫ້ທ່ານເອົາຮູບພາບທັງຫມົດຂອງທ່ານເຂົ້າໄປໃນ 'sprite' ດຽວແລະຫຼັງຈາກນັ້ນພຽງແຕ່ຊີ້ໄປຫາພື້ນທີ່ທີ່ທ່ານຕ້ອງການສະແດງດ້ວຍ CSS.

ທ່ານຄິດແນວໃດ?

ເວັບໄຊທ໌ນີ້ໃຊ້ Akismet ເພື່ອຫຼຸດຜ່ອນການຂີ້ເຫຍື້ອ. ຮຽນຮູ້ວິທີທີ່ຂໍ້ມູນຂອງທ່ານຖືກປະຕິບັດ.