ຄູ່ມືການເພີ່ມປະສິດທິພາບຮູບພາບເວັບ

ຄວາມເຂົ້າໃຈກ່ຽວກັບຮູບແບບຮູບພາບເວັບ

ການເລືອກຮູບແບບຮູບພາບທີ່ເຫມາະສົມແມ່ນພື້ນຖານຂອງການເພີ່ມປະສິດທິພາບເວັບ. ແຕ່ລະຮູບແບບໃຫ້ບໍລິການຈຸດປະສົງທີ່ແຕກຕ່າງກັນແລະສະເຫນີຂໍ້ໄດ້ປຽບທີ່ເປັນເອກະລັກ. JPEG ແມ່ນເຫມາະສົມສໍາລັບການຖ່າຍຮູບແລະຮູບພາບສະລັບສັບຊ້ອນທີ່ມີຫຼາຍສີ, ສະເຫນີອັດຕາສ່ວນການບີບອັດທີ່ດີເລີດແຕ່ຢູ່ໃນຄ່າໃຊ້ຈ່າຍຂອງການສູນເສຍ. PNG ດີເລີດທີ່ຮູບພາບທີ່ມີຄວາມໂປ່ງໃສ, ຂອບແຫຼມ, ແລະ palettes ສີທີ່ຈໍາກັດ, ເຮັດໃຫ້ມັນສົມບູນແບບສໍາລັບໂລໂກ້ແລະກາຟິກ, ເຖິງແມ່ນວ່າຂະຫນາດໄຟລ໌ມີແນວໂນ້ມທີ່ຈະໃຫຍ່ກວ່າ. WebP ເປັນຕົວແທນຂອງການສ້າງຮູບພາບເວັບໄຊຕ໌ຕໍ່ໄປ, ສະຫນອງການບີບອັດທີ່ດີກວ່າເມື່ອທຽບກັບ JPEG ແລະ PNG ໃນຂະນະທີ່ຮັກສາຄຸນນະພາບສູງ. ມັນສະຫນັບສະຫນູນການບີບອັດທີ່ສູນເສຍແລະການສູນເສຍ, ຄວາມໂປ່ງໃສ, ແລະການເຄື່ອນໄຫວ. ຢ່າງໃດກໍຕາມ, ການສະຫນັບສະຫນູນຂອງຕົວທ່ອງເວັບ, ໃນຂະນະທີ່ກວ້າງຂວາງ, ບໍ່ແມ່ນທົ່ວໄປ. AVIF ແມ່ນຍັງໃຫມ່ກວ່າ, ສະເຫນີອັດຕາການບີບອັດພິເສດເຖິງ 50% ຂະຫນາດນ້ອຍກວ່າ JPEG, ແຕ່ການຮັບຮອງເອົາຕົວທ່ອງເວັບຍັງເຕີບໂຕ. ສໍາລັບຮູບພາບ vector ເຊັ່ນ: ໂລໂກ້, ໄອຄອນ, ແລະຮູບແຕ້ມທີ່ງ່າຍດາຍ, SVG ແມ່ນບໍ່ສາມາດເອົາຊະນະໄດ້. ໃນຮູບແບບ vector, ຮູບພາບ SVG ຂະຫນາດບໍ່ມີຂອບເຂດໂດຍບໍ່ມີການສູນເສຍຄຸນນະພາບແລະມັກຈະມີຂະຫນາດໄຟລ໌ຂະຫນາດນ້ອຍ. ພວກເຂົາຍັງສາມາດແກ້ໄຂໄດ້ດ້ວຍລະຫັດແລະການສະຫນັບສະຫນູນການໂຕ້ຕອບ, ເຮັດໃຫ້ພວກເຂົາມີຄວາມຫລາກຫລາຍຢ່າງບໍ່ຫນ້າເຊື່ອສໍາລັບການອອກແບບເວັບທີ່ທັນສະໄຫມ.

• JPEG: ດີທີ່ສຸດສໍາລັບການຖ່າຍຮູບ ແລະຮູບພາບທີ່ຊັບຊ້ອນ
• PNG: ເຫມາະສໍາລັບກາຟິກທີ່ມີຄວາມໂປ່ງໃສແລະແຫຼມ
• WebP: ຮູບແບບທີ່ທັນສະໄຫມທີ່ມີການບີບອັດດີກວ່າ
• AVIF: ຮູບແບບໃໝ່ສຸດທີ່ມີການບີບອັດພິເສດ
• SVG: ທີ່ສົມບູນແບບສໍາລັບຮູບພາບ vector ແລະໄອຄອນທີ່ສາມາດຂະຫຍາຍໄດ້

ເຕັກນິກການບີບອັດຮູບພາບແລະການຕັ້ງຄ່າຄຸນນະພາບ

ຄວາມເຂົ້າໃຈການບີບອັດແມ່ນສໍາຄັນສໍາລັບການດຸ່ນດ່ຽງຄຸນນະພາບຮູບພາບກັບຂະຫນາດໄຟລ໌. ການບີບອັດເສຍ, ໃຊ້ໂດຍຮູບແບບເຊັ່ນ JPEG, ເອົາຂໍ້ມູນຮູບພາບອອກຢ່າງຖາວອນເພື່ອຫຼຸດຂະໜາດໄຟລ໌. ສິ່ງສໍາຄັນແມ່ນການຊອກຫາຈຸດອ່ອນທີ່ການບີບອັດສູງສຸດໃນຂະນະທີ່ຮັກສາຄຸນນະພາບສາຍຕາທີ່ຍອມຮັບໄດ້. ສໍາລັບຮູບພາບເວັບໄຊຕ໌ສ່ວນໃຫຍ່, ການຕັ້ງຄ່າຄຸນນະພາບ JPEG ລະຫວ່າງ 75-85% ສະຫນອງຄວາມສົມດຸນທີ່ດີເລີດ, ເຖິງແມ່ນວ່ານີ້ສາມາດແຕກຕ່າງກັນໂດຍອີງໃສ່ເນື້ອໃນຂອງຮູບພາບ. ການບີບອັດທີ່ບໍ່ມີການສູນເສຍ, ໃຊ້ໂດຍ PNG ແລະບາງຮູບພາບ WebP, ຫຼຸດຜ່ອນຂະຫນາດໄຟລ໌ໂດຍບໍ່ມີການສູນເສຍຄຸນນະພາບໃດໆ. ໃນຂະນະທີ່ນີ້ສຽງທີ່ເຫມາະສົມ, ໄຟລ໌ lossless ໂດຍທົ່ວໄປຫຼາຍຂະຫນາດໃຫຍ່ກ່ວາຄູ່ຮ່ວມງານການສູນເສຍຂອງເຂົາເຈົ້າ. ນີ້ເຮັດໃຫ້ການບີບອັດທີ່ບໍ່ມີການສູນເສຍແມ່ນເຫມາະສົມທີ່ສຸດສໍາລັບຮູບພາບທີ່ມີຄຸນະພາບເປັນອັນດັບຫນຶ່ງ, ເຊັ່ນຮູບພາບຜະລິດຕະພັນສໍາລັບອີຄອມເມີຊຫຼືຮູບພາບທີ່ຈະຖືກດັດແກ້ຕື່ມອີກ. ເຕັກນິກການບີບອັດແບບພິເສດລວມມີການໂຫຼດ JPEG ທີ່ມີຄວາມຄືບຫນ້າ, ເຊິ່ງສະແດງຮູບພາບໃນການເພີ່ມການສົ່ງຜ່ານທີ່ມີຄຸນນະພາບ, ແລະ chroma subsampling, ເຊິ່ງຫຼຸດຜ່ອນຂໍ້ມູນສີທີ່ຕາຂອງມະນຸດມີຄວາມອ່ອນໄຫວຫນ້ອຍ. ເຄື່ອງມືທີ່ທັນສະໄຫມຍັງສະຫນອງການເພີ່ມປະສິດທິພາບ perceptual, ປັບການບີບອັດໂດຍອີງໃສ່ສິ່ງທີ່ຕາຂອງມະນຸດສັງເກດເຫັນຫຼາຍທີ່ສຸດ, ມັກຈະບັນລຸຜົນໄດ້ຮັບທີ່ດີກວ່າການຕັ້ງຄ່າຄຸນນະພາບແບບດັ້ງເດີມ.

ການແກ້ໄຂແລະການເພີ່ມປະສິດທິພາບຮູບພາບທີ່ຕອບສະຫນອງ

ການອອກແບບເວັບທີ່ທັນສະໄຫມຕ້ອງການຮູບພາບທີ່ຄົມຊັດໃນທຸກສິ່ງທຸກຢ່າງຈາກໂທລະສັບສະຫຼາດຈົນເຖິງຈໍພາບ 4K. ສິ່ງສໍາຄັນແມ່ນການເຂົ້າໃຈຄວາມຫນາແຫນ້ນຂອງ pixels ລວງແລະຄວາມສາມາດຂອງອຸປະກອນ. ຮູບພາບກວ້າງ 1200px ອາດຈະດີເລີດສໍາລັບການເບິ່ງ desktop, ແຕ່ມັນ overkill ສໍາລັບຫນ້າຈໍມືຖື 375px, ເສຍແບນວິດແລະເວລາໂຫຼດຊ້າ. ການ​ສ້າງ​ຮູບ​ຫຼາຍ​ຂະ​ຫນາດ​ເຮັດ​ໃຫ້​ແນ່​ໃຈວ່​າ​ອຸ​ປະ​ກອນ​ແຕ່​ລະ​ໄດ້​ຮັບ​ຮູບ​ພາບ​ຂະ​ຫນາດ​ທີ່​ເຫມາະ​ສົມ​. ຮູບພາບທີ່ຕອບສະຫນອງໃຊ້ຄຸນລັກສະນະ srcset ຂອງ HTML ແລະອົງປະກອບຮູບພາບເພື່ອຮັບໃຊ້ຮູບພາບທີ່ແຕກຕ່າງກັນໂດຍອີງໃສ່ຂະຫນາດຫນ້າຈໍແລະຄວາມລະອຽດ. ເຕັກນິກນີ້ສາມາດຫຼຸດຜ່ອນ payload ຮູບພາບ 50% ຫຼືຫຼາຍກວ່ານັ້ນສໍາລັບຜູ້ໃຊ້ມືຖື. ຕົວຢ່າງ, ທ່ານອາດຈະຮັບໃຊ້ຮູບພາບ 400px ກັບອຸປະກອນມືຖື, 800px ກັບແທັບເລັດ, ແລະ 1200px ກັບຫນ້າຈໍ desktop. ຈໍສະແດງຜົນທີ່ມີຄວາມຫນາແຫນ້ນສູງເຊັ່ນ: ຫນ້າຈໍ Retina ຕ້ອງການຮູບພາບທີ່ມີຄວາມລະອຽດ 2x ສໍາລັບຮູບລັກສະນະທີ່ຄົມຊັດ. ຂະຫນາດຮູບພາບຄວນພິຈາລະນາຂະຫນາດການສະແດງຕົວຈິງຢູ່ໃນເວັບໄຊທ໌ຂອງທ່ານ. ຮູບພາບທີ່ສະແດງຢູ່ໃນຄວາມກວ້າງ 300px ບໍ່ຈໍາເປັນຕ້ອງກວ້າງ 1200px, ບໍ່ວ່າຈະເປັນຫນ້າຈໍຂອງຜູ້ໃຊ້. ສະເຫມີປັບປຸງຮູບພາບສໍາລັບຂະຫນາດການສະແດງຕົວຈິງຂອງພວກເຂົາ, ແລະພິຈາລະນາໃຊ້ CSS ເພື່ອຈັດການຂະຫນາດເລັກນ້ອຍແທນທີ່ຈະໃຫ້ບໍລິການຮູບພາບທີ່ມີຂະຫນາດໃຫຍ່.

ຜົນກະທົບດ້ານການປະຕິບັດແລະຍຸດທະສາດການໂຫຼດ

ຮູບພາບມີຜົນກະທົບຢ່າງຫຼວງຫຼາຍຕໍ່ການປະຕິບັດເວັບໄຊທ໌, ມັກຈະເປັນຕົວແທນ 50-70% ຂອງນ້ໍາຫນັກຫນ້າທັງຫມົດ. ຮູບພາບຂະຫນາດໃຫຍ່ທີ່ບໍ່ໄດ້ຮັບການປັບປຸງແມ່ນໃນບັນດາຜູ້ເຄາະຮ້າຍຕົ້ນຕໍຂອງເວັບໄຊທ໌ໂຫຼດຊ້າ, ມີຜົນກະທົບໂດຍກົງຕໍ່ປະສົບການຂອງຜູ້ໃຊ້ແລະການຈັດອັນດັບຂອງເຄື່ອງຈັກຊອກຫາ. ທຸກໆວິນາທີເພີ່ມເຕີມຂອງເວລາໂຫຼດສາມາດເພີ່ມອັດຕາ bounce ໄດ້ເຖິງ 32%, ເຮັດໃຫ້ການເພີ່ມປະສິດທິພາບຮູບພາບເປັນການພິຈາລະນາທຸລະກິດທີ່ສໍາຄັນ. Lazy loading ເປັນເຕັກນິກທີ່ມີປະສິດທິພາບທີ່ຊັກຊ້າການໂຫຼດຮູບພາບຈົນກ່ວາພວກເຂົາກໍາລັງຈະເຂົ້າໄປໃນ viewport. ນີ້ປັບປຸງເວລາໂຫຼດຫນ້າເບື້ອງຕົ້ນຢ່າງຫຼວງຫຼາຍ, ໂດຍສະເພາະສໍາລັບຫນ້າທີ່ມີຮູບພາບຫນັກ. ຕົວທ່ອງເວັບທີ່ທັນສະໄຫມສະຫນັບສະຫນູນການໂຫຼດ lazy native ກັບ loading = “lazy” attribute, ໃນຂະນະທີ່ຫ້ອງສະຫມຸດ JavaScript ໃຫ້ການຄວບຄຸມທີ່ກ້າວຫນ້າທາງດ້ານຫຼາຍແລະສະຫນັບສະຫນູນຕົວທ່ອງເວັບທີ່ກວ້າງຂວາງ. ຍຸດທະສາດການໂຫຼດຮູບພາບລ່ວງໜ້າຍັງສາມາດປັບປຸງປະສົບການຂອງຜູ້ໃຊ້ໄດ້. ຮູບພາບດ້ານເທິງສຳຄັນຄວນຖືກປັບໃຫ້ເໝາະສົມສຳລັບການໂຫຼດໄດ້ໄວທີ່ສຸດ, ໃນຂະນະທີ່ຮູບຂ້າງລຸ່ມສາມາດໂຫຼດໄດ້ຢ່າງອິດເມື່ອຍ. ພິຈາລະນາໃຊ້ຕົວຍຶດຮູບພາບຄຸນນະພາບຕໍ່າ (LQIP) ຫຼືເອັບເຟັກທີ່ມົວຫາຄົມຊັດເພື່ອສະໜອງການຕິຊົມພາບທັນທີໃນຂະນະທີ່ຮູບພາບຄວາມລະອຽດເຕັມໂຫຼດ. ການເຂົ້າລະຫັດ JPEG ທີ່ມີຄວາມຄືບໜ້າເຮັດໃຫ້ຮູບພາບປາກົດໄດ້ໄວໃນຄຸນນະພາບຕ່ຳ, ຈາກນັ້ນເຮັດໃຫ້ຄົມຊັດຂຶ້ນເມື່ອໂຫຼດຂໍ້ມູນຫຼາຍຂຶ້ນ.

SEO ແລະການພິຈາລະນາການເຂົ້າເຖິງ

ເຄື່ອງຈັກຊອກຫາພິຈາລະນາຄວາມໄວຫນ້າເປັນປັດໄຈອັນດັບ, ເຮັດໃຫ້ການເພີ່ມປະສິດທິພາບຮູບພາບສໍາຄັນສໍາລັບຄວາມສໍາເລັດ SEO. ຮູບພາບທີ່ຖືກປັບປຸງຢ່າງຖືກຕ້ອງຊ່ວຍໃຫ້ຫນ້າໂຫລດໄວຂຶ້ນ, ປະກອບສ່ວນເຂົ້າໃນການຈັດອັນດັບການຊອກຫາທີ່ດີກວ່າແລະປະສົບການຂອງຜູ້ໃຊ້. ນອກຈາກນັ້ນ, ຊື່ໄຟລ໌ຮູບພາບແລະຂໍ້ຄວາມ alt ໃຫ້ບໍລິບົດທີ່ມີຄຸນຄ່າແກ່ເຄື່ອງຈັກຊອກຫາ, ຊ່ວຍໃຫ້ເນື້ອຫາຂອງທ່ານປາກົດຢູ່ໃນຜົນການຄົ້ນຫາຮູບພາບ. ການຊ່ວຍເຂົ້າເຖິງຕ້ອງການຂໍ້ຄວາມ alt ທີ່ມີຄວາມຄິດທີ່ອະທິບາຍເນື້ອຫາຮູບພາບສໍາລັບຜູ້ອ່ານຫນ້າຈໍແລະຜູ້ໃຊ້ທີ່ມີຄວາມບົກຜ່ອງທາງດ້ານສາຍຕາ. ຂໍ້ຄວາມ Alt ຄວນເປັນຄໍາອະທິບາຍແຕ່ຫຍໍ້, ອະທິບາຍສິ່ງທີ່ຢູ່ໃນຮູບພາບແລະຈຸດປະສົງຂອງມັນຢູ່ໃນສະພາບການ. ສໍາລັບຮູບພາບຕົກແຕ່ງທີ່ບໍ່ເພີ່ມມູນຄ່າຂໍ້ມູນ, ໃຫ້ໃຊ້ຄຸນສົມບັດ alt ຫວ່າງເປົ່າ (alt=””) ເພື່ອປ້ອງກັນບໍ່ໃຫ້ຜູ້ອ່ານຫນ້າຈໍປະກາດພວກມັນໂດຍບໍ່ຈໍາເປັນ. ຂໍ້ມູນທີ່ມີໂຄງສ້າງແລະ schema markup ສາມາດປັບປຸງວິທີທີ່ເຄື່ອງຈັກຊອກຫາເຂົ້າໃຈແລະສະແດງຮູບພາບຂອງທ່ານ. ແຜນທີ່ຮູບພາບທີ່ເຫມາະສົມຊ່ວຍໃຫ້ເຄື່ອງຈັກຊອກຫາຄົ້ນພົບແລະດັດສະນີຮູບພາບຂອງທ່ານຢ່າງມີປະສິດທິພາບ. ສົນທິສັນຍາການຕັ້ງຊື່ໄຟລ໌ຄວນຈະເປັນຄໍາບັນຍາຍ ແລະຄໍາສໍາຄັນຫຼາຍເມື່ອມີຄວາມກ່ຽວຂ້ອງ, ຫຼີກເວັ້ນຊື່ທົ່ວໄປເຊັ່ນ “image1.jpg” ເພື່ອເປັນການອະທິບາຍຊື່ເຊັ່ນ “red-running-shoes-front-view.jpg”.