ໃນການພັດທະນາເວັບໄຊທ໌, ການຫມູນໃຊ້ຮູບພາບທີ່ເຫມາະສົມເປັນສິ່ງຈໍາເປັນເພື່ອເພີ່ມປະສິດທິພາບແລະປະສົບການຂອງຜູ້ໃຊ້. ພວກເຮົາມັກຈະຊອກຫາຕົວເຮົາເອງທີ່ມີຄວາມຕ້ອງການທີ່ຈະຫຼຸດຜ່ອນຂະຫນາດຂອງ ຮູບພາບໃນ HTML ເພື່ອຮັບປະກັນວ່າມັນໂຫຼດໄດ້ໄວ ແລະມີປະສິດທິພາບຢູ່ໃນຫນ້າເວັບຂອງພວກເຮົາ. ໃນບົດຄວາມນີ້, ພວກເຮົາຈະຄົ້ນຫາວິທີການທີ່ແຕກຕ່າງກັນແລະເຕັກນິກດ້ານວິຊາການເພື່ອເຮັດໃຫ້ຮູບພາບໃນ HTML ຂະຫນາດນ້ອຍລົງ, ດັ່ງນັ້ນການເພີ່ມປະສິດທິພາບແລະການເບິ່ງເຫັນເນື້ອຫາຂອງພວກເຮົາດີຂຶ້ນ. ຖ້າທ່ານກໍາລັງຊອກຫາການປັບປຸງການປະຕິບັດເວັບໄຊທ໌ຂອງທ່ານແລະຫຼຸດຜ່ອນຂະຫນາດຂອງຮູບພາບຂອງທ່ານ, ທ່ານໄດ້ມາຮອດບ່ອນທີ່ເຫມາະສົມ!
1. ການແນະນໍາການຫຼຸດຜ່ອນຂະຫນາດຮູບພາບໃນ HTML
ການປັບຂະໜາດຮູບພາບແມ່ນເປັນວຽກທົ່ວໄປໃນການພັດທະນາເວັບ. ໃນເວລາທີ່ມັນມາກັບການເພີ່ມປະສິດທິພາບເວັບໄຊທ໌ຂອງພວກເຮົາ, ມັນເປັນສິ່ງສໍາຄັນທີ່ຈະຮັບປະກັນວ່າຮູບພາບຂອງພວກເຮົາມີຄວາມສະຫວ່າງເທົ່າທີ່ເປັນໄປໄດ້ໂດຍບໍ່ມີການທໍາລາຍຄຸນນະພາບຂອງສາຍຕາ. ໂຊກດີ, HTML ສະເຫນີໃຫ້ພວກເຮົາທາງເລືອກຫຼາຍຢ່າງເພື່ອບັນລຸເປົ້າຫມາຍນີ້. ຢ່າງມີປະສິດທິພາບ.
ວິທີຫນຶ່ງເພື່ອຫຼຸດຜ່ອນຂະຫນາດຂອງຮູບພາບແມ່ນໃຊ້ຄຸນສົມບັດ "ຄວາມກວ້າງ" ແລະ "ຄວາມສູງ" ຂອງ HTML ເພື່ອປັບຂະຫນາດຂອງຮູບພາບ. ນີ້ແມ່ນບັນລຸໄດ້ໂດຍການໃຊ້ຄຸນລັກສະນະໃນແທັກຮູບພາບ. ຕົວຢ່າງ: ຖ້າພວກເຮົາຕ້ອງການຫຼຸດຜ່ອນຂະຫນາດ ຈາກຮູບພາບ ເຄິ່ງທາງ, ພວກເຮົາສາມາດກໍານົດຄ່າ "ຄວາມກວ້າງ" ແລະ "ຄວາມສູງ" ເປັນເຄິ່ງຫນຶ່ງຂອງຂະຫນາດຕົ້ນສະບັບຂອງຮູບ. ວິທີນີ້, ຕົວທ່ອງເວັບຈະໂຫລດຮູບພາບທີ່ມີຂະຫນາດຂະຫນາດນ້ອຍກວ່າ, ເຊິ່ງຈະຊ່ວຍປັບປຸງເວລາໂຫຼດຫນ້າ.
ທາງເລືອກອື່ນເພື່ອຫຼຸດຜ່ອນຂະຫນາດຂອງຮູບພາບໃນ HTML ແມ່ນການນໍາໃຊ້ການບີບອັດຮູບພາບ. ມີເຄື່ອງມືຈໍານວນຫນຶ່ງທີ່ມີຢູ່ໃນອອນໄລນ໌ທີ່ອະນຸຍາດໃຫ້ພວກເຮົາບີບອັດຮູບພາບຂອງພວກເຮົາໂດຍບໍ່ມີການສູນເສຍຄຸນນະພາບ. ເຄື່ອງມືເຫຼົ່ານີ້ເຮັດວຽກໂດຍການເອົາຂໍ້ມູນທີ່ຊ້ໍາກັນອອກຈາກຮູບພາບ, ຫຼຸດຜ່ອນຂະຫນາດໄຟລ໌ໂດຍບໍ່ມີຜົນກະທົບຕໍ່ຄຸນນະພາບຂອງສາຍຕາ. ພວກເຮົາສາມາດນໍາໃຊ້ເຄື່ອງມືເຫຼົ່ານີ້ເພື່ອບີບອັດຮູບພາບຂອງພວກເຮົາກ່ອນທີ່ຈະຝັງຢູ່ໃນເວັບໄຊທ໌ຂອງພວກເຮົາ, ເຊິ່ງຈະສົ່ງຜົນໃຫ້ຫນ້າເວັບໂຫລດໄວຂຶ້ນສໍາລັບຜູ້ໃຊ້ຂອງພວກເຮົາ.
ຈົ່ງຈື່ໄວ້ວ່າການເພີ່ມປະສິດທິພາບຂະຫນາດຂອງຮູບພາບ HTML ບໍ່ພຽງແຕ່ປັບປຸງການປະຕິບັດຂອງເວັບໄຊທ໌ຂອງເຈົ້າ, ແຕ່ຍັງປັບປຸງປະສົບການຂອງຜູ້ໃຊ້. ໂດຍການຫຼຸດຜ່ອນຂະຫນາດຂອງຮູບພາບ, ພວກເຮົາຮັບປະກັນວ່າຜູ້ໃຊ້ຂອງພວກເຮົາສາມາດເຂົ້າເຖິງເນື້ອຫາໄດ້ໄວຂຶ້ນແລະມີປະສິດທິພາບຫຼາຍຂຶ້ນ. ໃຊ້ເຕັກນິກເຫຼົ່ານີ້ແລະເຄື່ອງມືທີ່ໄດ້ກ່າວມາເພື່ອເພີ່ມປະສິດທິພາບຮູບພາບຂອງທ່ານແລະບັນລຸເວັບໄຊທ໌ທີ່ມີປະສິດທິພາບແລະເປັນມິດກັບຜູ້ມາຢ້ຽມຢາມຂອງທ່ານ.
2. Tag ແລະຄຸນລັກສະນະເພື່ອປັບຂະຫນາດຮູບພາບໃນ HTML
HTML ສະຫນອງຊຸດຂອງ tags ແລະຄຸນລັກສະນະທີ່ສາມາດຖືກນໍາໃຊ້ເພື່ອປັບຂະຫນາດຮູບພາບໃນຫນ້າເວັບ. tags ແລະຄຸນລັກສະນະເຫຼົ່ານີ້ຊ່ວຍໃຫ້ທ່ານສາມາດປັບຂະຫນາດແລະຮູບແບບຂອງຮູບພາບໄດ້, ຮັບປະກັນການເບິ່ງເຫັນພາບທີ່ດີກວ່າຂອງພວກເຂົາໃນ. ອຸປະກອນທີ່ແຕກຕ່າງກັນ ແລະໜ້າຈໍຕ່າງໆ.
ກ່ອນອື່ນ ໝົດ, ເພື່ອປັບຂະ ໜາດ ຮູບພາບໃນ HTML, ທ່ານໃຊ້ 'ແທັກ`. ແທັກນີ້ຕ້ອງປະກອບມີຄຸນລັກສະນະທີ່ສໍາຄັນຈໍານວນຫນຶ່ງເພື່ອບັນລຸການປັບຂະຫນາດທີ່ເຫມາະສົມ. ຄຸນລັກສະນະ src ຖືກນໍາໃຊ້ເພື່ອກໍານົດເສັ້ນທາງຮູບພາບ, ໃນຂະນະທີ່ຄຸນລັກສະນະ ຄວາມກວ້າງ y ຄວາມສູງ ພວກມັນຖືກນໍາໃຊ້ເພື່ອກໍານົດຄວາມກວ້າງແລະຄວາມສູງຂອງຮູບພາບ, ຕາມລໍາດັບ. ຄຸນລັກສະນະເຫຼົ່ານີ້ສາມາດໄດ້ຮັບການກໍານົດເປັນຄ່າພິເສດສະເພາະຫຼືອັດຕາສ່ວນສາມາດຖືກນໍາໃຊ້ເພື່ອອະນຸຍາດໃຫ້ການປັບຂະຫນາດພີ່ນ້ອງ.
ນອກເຫນືອໄປຈາກຄຸນລັກສະນະ ຄວາມກວ້າງ y ຄວາມສູງ, HTML ຍັງສະຫນອງຄຸນລັກສະນະອື່ນໆທີ່ສາມາດຖືກນໍາໃຊ້ເພື່ອປັບຂະຫນາດຮູບພາບ. ຕົວຢ່າງ, ຄຸນລັກສະນະ ແບບ ສາມາດຖືກນໍາໃຊ້ເພື່ອນໍາໃຊ້ຮູບແບບ CSS ເພີ່ມເຕີມເຊັ່ນ: ຄວາມກວ້າງສູງສຸດ, ຄວາມສູງສູງສຸດ, ແລະອັດຕາສ່ວນຮູບພາບ. ທ່ານຍັງສາມາດໃຊ້ຄຸນລັກສະນະໄດ້ ຊັ້ນ ເພື່ອນຳໃຊ້ຮູບແບບສະເພາະທີ່ກຳນົດໄວ້ໃນແຜ່ນສະໄຕລ໌ພາຍນອກ ຫຼືພາຍໃນ. ຄຸນລັກສະນະເຫຼົ່ານີ້ອະນຸຍາດໃຫ້ມີການຄວບຄຸມຫຼາຍກວ່າກ່ຽວກັບຮູບແບບແລະຂະຫນາດສຸດທ້າຍຂອງຮູບພາບ. ໃນສັ້ນ, ໂດຍການນໍາໃຊ້ແທັກແລະຄຸນລັກສະນະທີ່ເຫມາະສົມໃນ HTML, ມັນເປັນໄປໄດ້ທີ່ຈະປັບຂະຫນາດຮູບພາບໃນຫນ້າເວັບໄດ້ງ່າຍແລະມີປະສິດທິພາບ. ດ້ວຍຄວາມເຂົ້າໃຈພື້ນຖານຂອງແນວຄວາມຄິດເຫຼົ່ານີ້, ຜູ້ພັດທະນາເວັບສາມາດຮັບປະກັນການສະແດງຮູບພາບທີ່ດີກວ່າ ໃນອຸປະກອນທີ່ແຕກຕ່າງກັນ ແລະໜ້າຈໍຕ່າງໆ.
3. ວິທີການກໍານົດຄວາມກວ້າງແລະຄວາມສູງຂອງຮູບພາບໃນ HTML
ການກໍານົດຄວາມກວ້າງແລະຄວາມສູງຂອງຮູບພາບໃນ HTML ເປັນສິ່ງຈໍາເປັນເພື່ອຄວບຄຸມຮູບລັກສະນະແລະຮູບແບບ ຈາກເວັບໄຊ ເວັບ. ໂຊກດີ, ມີຫຼາຍວິທີເພື່ອບັນລຸເປົ້າຫມາຍນີ້.
ວິທີທີ່ງ່າຍທີ່ສຸດທີ່ຈະລະບຸຂະຫນາດຂອງຮູບພາບແມ່ນໂດຍໃຊ້ຄຸນລັກສະນະ "ຄວາມກວ້າງ" ແລະ "ຄວາມສູງ". ຄຸນລັກສະນະເຫຼົ່ານີ້ສາມາດຖືກເພີ່ມໃສ່ແທັກ "img" ໂດຍກົງແລະຊ່ວຍໃຫ້ທ່ານສາມາດກໍານົດຄວາມກວ້າງແລະຄວາມສູງຂອງຮູບພາບເປັນ pixels. ຍົກຕົວຢ່າງ:
"`html
«`
ຖ້າທ່ານຕ້ອງການໃຫ້ຮູບພາບຮັກສາອັດຕາສ່ວນຕົ້ນສະບັບຂອງມັນ, ທ່ານພຽງແຕ່ຕ້ອງການລະບຸຄຸນລັກສະນະຫນຶ່ງ (ຄວາມກວ້າງຫຼືຄວາມສູງ) ແລະໃຫ້ອີກອັນຫນຶ່ງປັບອັດຕະໂນມັດໂດຍອີງໃສ່ອັດຕາສ່ວນ. ນີ້ແມ່ນບັນລຸໄດ້ໂດຍໃຊ້ຄຸນລັກສະນະ "ແບບ" ແລະລະບຸພຽງແຕ່ຫນຶ່ງຄ່າ, ບໍ່ວ່າຈະສໍາລັບຄວາມກວ້າງຫຼືຄວາມສູງ. ຍົກຕົວຢ່າງ:
"`html
«`
ນອກນັ້ນທ່ານຍັງສາມາດໃຊ້ຫນ່ວຍວັດແທກທີ່ກ່ຽວຂ້ອງ, ເຊັ່ນ: ເປີເຊັນ, ເພື່ອຂະຫນາດຮູບພາບທີ່ກ່ຽວຂ້ອງກັບຖັງຂອງມັນ. ເພື່ອເຮັດສິ່ງນີ້, ພຽງແຕ່ລະບຸຄ່າທີ່ຕ້ອງການຕາມດ້ວຍເຄື່ອງຫມາຍເປີເຊັນ (%). ຍົກຕົວຢ່າງ:
"`html
«`
ມັນເປັນສິ່ງສໍາຄັນທີ່ຈະສັງເກດວ່າຖ້າທ່ານບໍ່ລະບຸຂະຫນາດຂອງຮູບພາບໃນ HTML, ຕົວທ່ອງເວັບຈະສະແດງໃຫ້ພວກເຂົາຢູ່ໃນຂະຫນາດຕົ້ນສະບັບຂອງພວກເຂົາ. ມັນແນະນໍາໃຫ້ໃຊ້ເຕັກນິກການກໍານົດຄວາມກວ້າງແລະຄວາມສູງເຫຼົ່ານີ້ຢ່າງຕໍ່ເນື່ອງເພື່ອຮັກສາຮູບແບບທີ່ເປັນເອກະພາບໃນເວັບໄຊທ໌ຂອງທ່ານ. ທົດລອງທາງເລືອກເຫຼົ່ານີ້ແລະຊອກຫາຫນຶ່ງທີ່ເຫມາະສົມທີ່ສຸດຄວາມຕ້ອງການຂອງທ່ານ!
4. ການນໍາໃຊ້ອັດຕາສ່ວນເພື່ອຫຼຸດຜ່ອນຂະຫນາດຂອງຮູບພາບໃນ HTML
ການນໍາໃຊ້ເປີເຊັນໃນ HTML ແມ່ນວິທີທີ່ມີປະໂຫຍດໃນການຫຼຸດຜ່ອນຂະຫນາດຂອງຮູບພາບ. ເຕັກນິກນີ້ຊ່ວຍໃຫ້ທ່ານສາມາດປັບຮູບພາບຕາມພື້ນທີ່ທີ່ມີຢູ່ ຢູ່ໜ້າຈໍ, ເຮັດໃຫ້ມີການນໍາສະເຫນີທີ່ມີຄວາມຍືດຫຍຸ່ນແລະສາມາດປັບຕົວໄດ້ຫຼາຍຂຶ້ນສໍາລັບອຸປະກອນຕ່າງໆແລະຄວາມລະອຽດຫນ້າຈໍ.
ເພື່ອໃຊ້ອັດຕາສ່ວນເພື່ອຫຼຸດຜ່ອນຂະຫນາດຂອງຮູບພາບໃນ HTML, ພວກເຮົາພຽງແຕ່ປະຕິບັດຕາມຂັ້ນຕອນຕໍ່ໄປນີ້:
1. ກ່ອນອື່ນ, ພວກເຮົາຊອກຫາແທັກຮູບພາບ HTML () ແລະພວກເຮົາກໍານົດມັນເປັນຄຸນລັກສະນະຂະຫນາດ: width ແລະຄວາມສູງ. ແທນທີ່ຈະລະບຸຄ່າຄົງທີ່ໃນ pixels, ພວກເຮົາຈະໃຊ້ເປີເຊັນ. ຕົວຢ່າງ: ຖ້າພວກເຮົາຕ້ອງການໃຫ້ຮູບພາບຄອບຄອງ 50% ຂອງຄວາມກວ້າງຂອງຫນ້າຈໍ, ພວກເຮົາຈະໃຊ້ width=»50%» ໃນແທັກຮູບພາບ.
2. ຕໍ່ໄປ, ພວກເຮົາສາມາດປັບຄວາມສູງຕາມອັດຕາສ່ວນໂດຍໃຊ້ຄຸນສົມບັດ CSS "ອັດຕະໂນມັດ" ສໍາລັບຄຸນລັກສະນະຄວາມສູງ. ນີ້ຈະເຮັດໃຫ້ຄວາມສູງປັບອັດຕະໂນມັດໂດຍອີງໃສ່ຄວາມກວ້າງຂອງອັດຕາສ່ວນທີ່ກໍານົດໄວ້ໂດຍອັດຕາສ່ວນທີ່ມອບຫມາຍຂ້າງເທິງ. ຕົວຢ່າງ, ຖ້າຮູບພາບມີຄວາມກວ້າງ 50%, ຄວາມສູງຈະປັບອັດຕາສ່ວນໂດຍອັດຕະໂນມັດ.
3. ສຸດທ້າຍ, ເພື່ອໃຫ້ແນ່ໃຈວ່າຮູບພາບທີ່ເຫມາະສົມກັບອຸປະກອນທີ່ແຕກຕ່າງກັນແລະຄວາມລະອຽດຫນ້າຈໍ, ກົດລະບຽບການຈັດຮູບແບບເພີ່ມເຕີມສາມາດນໍາໃຊ້ໄດ້. ພວກເຮົາສາມາດກໍານົດຄວາມກວ້າງສູງສຸດໂດຍໃຊ້ຄຸນສົມບັດ CSS "max-width", ເຊິ່ງຈະຮັບປະກັນວ່າຮູບພາບບໍ່ overflow ຖ້າຫນ້າຈໍຂະຫນາດນ້ອຍກວ່າ. ຕົວຢ່າງ, ພວກເຮົາສາມາດເພີ່ມຮູບແບບ “max-width: 100%;” ກັບແທັກຮູບພາບ.
ຈົ່ງຈື່ໄວ້ວ່າການນໍາໃຊ້ອັດຕາສ່ວນເພື່ອຫຼຸດຜ່ອນຂະຫນາດຂອງຮູບພາບໃນ HTML ແມ່ນການປະຕິບັດທີ່ແນະນໍາ, ຍ້ອນວ່າມັນຮັບປະກັນການນໍາສະເຫນີທີ່ມີຄວາມຍືດຫຍຸ່ນແລະສາມາດປັບຕົວໄດ້ຫຼາຍຂຶ້ນໃນອຸປະກອນຕ່າງໆແລະຄວາມລະອຽດຫນ້າຈໍ. ໂດຍປະຕິບັດຕາມຂັ້ນຕອນທີ່ໄດ້ກ່າວມາຂ້າງເທິງ, ທ່ານສາມາດປັບຂະຫນາດຂອງຮູບພາບຂອງທ່ານໄດ້ຢ່າງງ່າຍດາຍໂດຍບໍ່ມີການສູນເສຍຄຸນນະພາບຫຼືການບິດເບືອນຮູບລັກສະນະຂອງເຂົາເຈົ້າ. ທົດລອງແລະຊອກຫາທີ່ເຫມາະສົມສໍາລັບຄວາມຕ້ອງການຂອງທ່ານ!
5. ປັບຂະຫນາດດ້ວຍ CSS ໃນຮູບພາບ HTML
ຫນຶ່ງໃນສິ່ງທ້າທາຍທົ່ວໄປໃນເວລາທີ່ການອອກແບບເວັບໄຊທ໌ແມ່ນການຄຸ້ມຄອງຂະຫນາດຮູບພາບ. ເລື້ອຍໆ, ຮູບພາບທີ່ບໍ່ໄດ້ຮັບການປັບປຸງສາມາດເຮັດໃຫ້ເວລາໂຫຼດດົນຂຶ້ນແລະສົ່ງຜົນກະທົບທາງລົບຕໍ່ປະສົບການຂອງຜູ້ໃຊ້. ໂຊກດີ, CSS ສະເຫນີການແກ້ໄຂງ່າຍໆເພື່ອຫຼຸດຜ່ອນຂະຫນາດຂອງຮູບພາບໃນ HTML.
ຂັ້ນຕອນທໍາອິດເພື່ອຫຼຸດຜ່ອນຂະຫນາດຂອງຮູບພາບແມ່ນກໍານົດຂະຫນາດຂອງມັນໂດຍໃຊ້ CSS. ນີ້ແມ່ນບັນລຸໄດ້ໂດຍໃຊ້ຄຸນສົມບັດ "ຄວາມກວ້າງ" ແລະ "ຄວາມສູງ". ຕົວຢ່າງ, ຖ້າພວກເຮົາຕ້ອງການກໍານົດຄວາມກວ້າງຂອງຮູບພາບເປັນ 300 pixels, ລະຫັດ CSS ຈະເປັນ width: 300px;. ມັນເປັນສິ່ງສໍາຄັນທີ່ຈະຈື່ໄວ້ວ່າໃນເວລາທີ່ເຮັດສິ່ງນີ້, ຮູບພາບອາດຈະສູນເສຍຄຸນນະພາບຫຼືປະກົດການບິດເບືອນຖ້າມັນຖືກຫຼຸດລົງຫຼາຍເກີນໄປ.
ອີກເຕັກນິກທີ່ເປັນປະໂຫຍດສໍາລັບການຫຼຸດຜ່ອນຂະຫນາດຮູບພາບແມ່ນການນໍາໃຊ້ການບີບອັດ CSS. ນີ້ແມ່ນບັນລຸໄດ້ໂດຍການກໍານົດຄຸນສົມບັດ "ຂະຫນາດພື້ນຫລັງ" ເປັນມູນຄ່າຫນ້ອຍກວ່າ 100%. ຕົວຢ່າງ: ຖ້າພວກເຮົາຕ້ອງການຫຼຸດຂະຫນາດຂອງຮູບພາບລົງເຄິ່ງຫນຶ່ງ, ລະຫັດ CSS ຈະເປັນ background-size: 50%;. ເຕັກນິກນີ້ຊ່ວຍໃຫ້ທ່ານສາມາດຫຼຸດຜ່ອນຂະຫນາດຂອງຮູບພາບໄດ້ໂດຍບໍ່ມີການສູນເສຍຄຸນນະພາບ, ເນື່ອງຈາກວ່າມັນຖືກປັບພຽງແຕ່ສາຍຕາ. ຢ່າງໃດກໍ່ຕາມ, ມັນເປັນສິ່ງສໍາຄັນທີ່ຈະສັງເກດວ່າເຕັກນິກນີ້ໃຊ້ໄດ້ກັບຮູບພາບພື້ນຫລັງເທົ່ານັ້ນ. ຖ້າພວກເຮົາຕ້ອງການຫຼຸດຜ່ອນຂະຫນາດຂອງຮູບພາບທີ່ສະແດງໂດຍກົງໃນຫນ້າ HTML, ມັນມັກໃຊ້ຄຸນສົມບັດ "ຄວາມກວ້າງ" ແລະ "ຄວາມສູງ" ທີ່ໄດ້ກ່າວມາຂ້າງເທິງ.
ການຫຼຸດຜ່ອນຂະຫນາດຂອງຮູບພາບໃນ HTML ໂດຍໃຊ້ CSS ແມ່ນເຕັກນິກທີ່ເປັນປະໂຫຍດເພື່ອປັບປຸງການໂຫຼດແລະການປະຕິບັດຫນ້າເວັບ. ໂດຍປະຕິບັດຕາມຂັ້ນຕອນທີ່ໄດ້ກ່າວມາຂ້າງເທິງ, ພວກເຮົາສາມາດປັບຂະຫນາດຂອງຮູບພາບແລະນໍາໃຊ້ການບີບອັດ CSS ເພື່ອຫຼຸດຜ່ອນຂະຫນາດຂອງມັນ. ຈື່ໄວ້ສະເໝີວ່າຕ້ອງພິຈາລະນາຄຸນນະພາບຂອງຮູບພາບເມື່ອເຮັດການປັບປ່ຽນເຫຼົ່ານີ້ເພື່ອຮັບປະກັນປະສົບການຂອງຜູ້ໃຊ້ທີ່ດີທີ່ສຸດ.
6. ເຕັກນິກການເພີ່ມປະສິດທິພາບການໂຫຼດຮູບພາບຂະຫນາດນ້ອຍໃນ HTML
ມີຫຼາຍເຕັກນິກທີ່ສາມາດຊ່ວຍເພີ່ມປະສິດທິພາບການໂຫຼດຮູບພາບຂະຫນາດນ້ອຍໃນ HTML. ຂ້າງລຸ່ມນີ້ແມ່ນບາງຍຸດທະສາດທີ່ມີປະສິດທິພາບເພື່ອບັນລຸເປົ້າຫມາຍນີ້:
1. ໃຊ້ຮູບແບບທີ່ຖືກຕ້ອງ: ມັນເປັນສິ່ງຈໍາເປັນທີ່ຈະເລືອກເອົາຮູບແບບຮູບພາບທີ່ເຫມາະສົມກັບເວັບໄຊທ໌ຂອງທ່ານ. ເມື່ອນໍາໃຊ້ຮູບພາບຂະຫນາດນ້ອຍ, ແນະນໍາໃຫ້ໃຊ້ຮູບແບບເຊັ່ນ JPEG ຫຼື WEBP, ຍ້ອນວ່າພວກມັນບີບອັດຮູບພາບໂດຍບໍ່ມີການສູນເສຍຄຸນນະພາບຫຼາຍ.
2. ບີບອັດຮູບພາບ: ກ່ອນທີ່ຈະເພີ່ມຮູບພາບໃນເວັບໄຊທ໌ຂອງທ່ານ, ມັນເປັນສິ່ງສໍາຄັນທີ່ຈະບີບອັດຮູບພາບເພື່ອຫຼຸດຜ່ອນຂະຫນາດຂອງພວກເຂົາໂດຍບໍ່ມີຜົນກະທົບຕໍ່ຄຸນນະພາບຂອງສາຍຕາຫຼາຍເກີນໄປ. ມີເຄື່ອງມືອອນໄລນ໌ຈໍານວນຫນຶ່ງທີ່ຊ່ວຍໃຫ້ທ່ານສາມາດບີບອັດຮູບພາບໄດ້ໄວແລະງ່າຍດາຍ.
3. ໃຊ້ປະໂຍດຈາກ cache ຂອງຕົວທ່ອງເວັບ: ໂດຍການຕັ້ງຄ່າການຫມົດອາຍຸຂອງ cache ທີ່ຖືກຕ້ອງສໍາລັບຮູບພາບຂະຫນາດນ້ອຍ, ທ່ານສາມາດຮັບປະກັນວ່າຜູ້ເຂົ້າຊົມເວັບໄຊທ໌ຂອງທ່ານຕ້ອງການໂຫຼດຮູບພາບພຽງແຕ່ຄັ້ງດຽວ. ນີ້ຫຼຸດຜ່ອນເວລາໂຫຼດແລະປັບປຸງປະສົບການຂອງຜູ້ໃຊ້.
ນອກເຫນືອຈາກເຕັກນິກເຫຼົ່ານີ້, ມັນເປັນສິ່ງສໍາຄັນທີ່ຈະຈື່ຈໍາວ່າຮູບພາບຂະຫນາດນ້ອຍກໍ່ຄວນຈະຖືກປັບແຕ່ງສໍາລັບອຸປະກອນມືຖື. ນີ້ກ່ຽວຂ້ອງກັບການປັບຂະຫນາດຮູບພາບແລະການນໍາໃຊ້ເຕັກນິກການໂຫຼດ lazy ເພື່ອຫຼຸດຜ່ອນການນໍາໃຊ້ຂໍ້ມູນມືຖື. ດ້ວຍການປະຕິບັດທີ່ເຫມາະສົມຂອງຍຸດທະສາດເຫຼົ່ານີ້, ການໂຫຼດຮູບພາບທີ່ມີປະສິດທິພາບຢູ່ໃນເວັບໄຊທ໌ HTML ຂອງທ່ານສາມາດບັນລຸໄດ້.
7. ການນໍາໃຊ້ຫ້ອງສະຫມຸດພາຍນອກເພື່ອປັບຂະຫນາດຮູບພາບໃນ HTML
ວິທີການທົ່ວໄປທີ່ຈະປັບຂະຫນາດຮູບພາບໃນ HTML ແມ່ນໂດຍໃຊ້ຫ້ອງສະຫມຸດພາຍນອກ. ຫ້ອງສະຫມຸດເຫຼົ່ານີ້ສະຫນອງຫນ້າທີ່ກໍານົດໄວ້ລ່ວງຫນ້າທີ່ສາມາດຖືກນໍາໃຊ້ເພື່ອປັບຂະຫນາດຮູບພາບໄດ້ຢ່າງງ່າຍດາຍແລະປະສິດທິພາບ.
ມີຫ້ອງສະຫມຸດທີ່ນິຍົມຫຼາຍທີ່ສາມາດຖືກນໍາໃຊ້ສໍາລັບວຽກງານນີ້, ເຊັ່ນ: jQuery, Pillow y lazysizes. ຫ້ອງສະຫມຸດເຫຼົ່ານີ້ສະເຫນີວິທີການແລະຫນ້າທີ່ທີ່ແຕກຕ່າງກັນເພື່ອປັບຂະຫນາດຮູບພາບໃນ HTML.
ເພື່ອໃຊ້ຫ້ອງສະຫມຸດເຫຼົ່ານີ້, ກ່ອນອື່ນ ໝົດ ທ່ານຕ້ອງໃສ່ການເຊື່ອມຕໍ່ກັບຫ້ອງສະຫມຸດຢູ່ໃນສ່ວນຫົວຂອງຫນ້າ HTML ຂອງທ່ານ. ຕົວຢ່າງ, ຖ້າທ່ານຕັດສິນໃຈໃຊ້ jQuery, ທ່ານສາມາດເພີ່ມການເຊື່ອມຕໍ່ຕໍ່ໄປນີ້ໃນສ່ວນຫົວຂອງຫນ້າຂອງທ່ານ:
"`html
«`
ເມື່ອທ່ານໄດ້ລວມເອົາການເຊື່ອມຕໍ່ກັບຫ້ອງສະຫມຸດ, ທ່ານສາມາດເລີ່ມຕົ້ນການນໍາໃຊ້ ໜ້າທີ່ຂອງມັນ ໃນລະຫັດ HTML ຂອງທ່ານ. ຕົວຢ່າງ: ຖ້າທ່ານຕ້ອງການປັບຂະຫນາດຮູບພາບດ້ວຍ jQuery, ທ່ານສາມາດນໍາໃຊ້ຫນ້າທີ່ `css()` ເພື່ອປ່ຽນຄວາມກວ້າງແລະຄວາມສູງຂອງຮູບພາບ. ຂ້າງລຸ່ມນີ້ແມ່ນຕົວຢ່າງຂອງສິ່ງທີ່ລະຫັດຈະຄ້າຍຄື:
"`html
«`
ຈົ່ງຈື່ໄວ້ວ່າທ່ານຕ້ອງປ່ຽນ "img" ດ້ວຍຕົວລະບຸຫຼືຊັ້ນຂອງຮູບພາບທີ່ທ່ານຕ້ອງການປັບຂະຫນາດ. ນອກຈາກນັ້ນ, ທ່ານສາມາດປັບຄ່າ "300px" ແລະ "200px" ກັບຄວາມຕ້ອງການປັບຂະຫນາດຂອງທ່ານເອງ.
ຖ້າທ່ານຕ້ອງການໃຊ້ຫ້ອງສະຫມຸດອື່ນ, ທ່ານສາມາດຄົ້ນຫາບົດສອນສະເພາະແລະຕົວຢ່າງອອນໄລນ໌ເພື່ອຮຽນຮູ້ວິທີການປັບຂະຫນາດຮູບພາບກັບຫ້ອງສະຫມຸດສະເພາະນັ້ນ. ຈື່ໄວ້ວ່າແຕ່ລະຫ້ອງສະຫມຸດມີ syntax ແລະວິທີການຂອງຕົນເອງ, ສະນັ້ນມັນເປັນສິ່ງສໍາຄັນທີ່ຈະປະຕິບັດຕາມຄໍາແນະນໍາແລະເອກະສານຂອງຫ້ອງສະຫມຸດທີ່ທ່ານເລືອກເພື່ອຮັບປະກັນວ່າທ່ານໄດ້ຮັບຜົນໄດ້ຮັບທີ່ຕ້ອງການ.
8. ການພິຈາລະນາການເຂົ້າເຖິງໃນເວລາທີ່ເຮັດໃຫ້ຮູບພາບຂະຫນາດນ້ອຍລົງໃນ HTML
ການນໍາໃຊ້ຮູບພາບຂະຫນາດໃຫຍ່ຢູ່ໃນເວັບໄຊທ໌ສາມາດສົ່ງຜົນກະທົບທາງລົບຕໍ່ປະສົບການຂອງຜູ້ໃຊ້, ໂດຍສະເພາະໃນອຸປະກອນມືຖືທີ່ມີການເຊື່ອມຕໍ່ຊ້າລົງ. ດັ່ງນັ້ນ, ມັນມັກຈະຈໍາເປັນຕ້ອງຫຼຸດຜ່ອນຂະຫນາດຂອງຮູບພາບເພື່ອເພີ່ມປະສິດທິພາບການໂຫຼດແລະປັບປຸງການເຂົ້າເຖິງ. ຕໍ່ໄປ, ພວກເຮົາຈະອະທິບາຍວິທີການເຮັດມັນໃນ HTML.
1. ໃຊ້ແທໍກ HTML `img` ເພື່ອໃສ່ຮູບພາບເຂົ້າໄປໃນຫນ້າຂອງທ່ານ. ໃຫ້ແນ່ໃຈວ່າໄດ້ລວມເອົາຄຸນສົມບັດ `src` ກັບສະຖານທີ່ຮູບພາບ. ຍົກຕົວຢ່າງ:
"`html
«`
2. ເພີ່ມຄຸນສົມບັດ `width` ເພື່ອລະບຸຄວາມກວ້າງທີ່ຕ້ອງການຂອງຮູບເປັນ pixels. ຕົວຢ່າງ, ຖ້າທ່ານຕ້ອງການໃຫ້ຮູບພາບກວ້າງ 300 pixels, ທ່ານສາມາດເຮັດໄດ້ດັ່ງຕໍ່ໄປນີ້:
"`html
«`
3. ໃຊ້ຄຸນສົມບັດ 'ຄວາມສູງ' ເພື່ອລະບຸຄວາມສູງທີ່ຕ້ອງການຂອງຮູບເປັນ pixels. ດ້ວຍວິທີນີ້, ທ່ານສາມາດຄວບຄຸມທັງຄວາມກວ້າງແລະຄວາມສູງຂອງຮູບພາບ. ຍົກຕົວຢ່າງ:
"`html
«`
ຈົ່ງຈື່ໄວ້ວ່າເມື່ອປັບຂະຫນາດຮູບພາບ, ທ່ານຕ້ອງຮັກສາອັດຕາສ່ວນຕົ້ນສະບັບເພື່ອປ້ອງກັນບໍ່ໃຫ້ມັນເບິ່ງບິດເບືອນ. ກະລຸນາສັງເກດວ່າການຫຼຸດຜ່ອນຂະຫນາດຂອງຮູບພາບຈະບໍ່ມີຜົນກະທົບໂດຍກົງຕໍ່ຄຸນນະພາບຂອງມັນ, ແຕ່ມັນເປັນສິ່ງສໍາຄັນທີ່ຈະຊອກຫາຄວາມສົມດຸນລະຫວ່າງຂະຫນາດແລະຄຸນນະພາບສໍາລັບການໂຫຼດໄວແລະປະສົບການຂອງຜູ້ໃຊ້ທີ່ດີທີ່ສຸດ. ຢ່າລືມເພີ່ມຂໍ້ຄວາມ alt ທີ່ອະທິບາຍຮູບພາບເພື່ອປັບປຸງການເຂົ້າເຖິງຂອງມັນ!
9. ຄໍາແນະນໍາທີ່ຈະຮັກສາຄຸນນະພາບໃນເວລາທີ່ຫຼຸດລົງຂະຫນາດຂອງຮູບພາບໃນ HTML
ມີເຕັກນິກຕ່າງໆແລະຄໍາແນະນໍາທີ່ພວກເຮົາຕ້ອງຄໍານຶງເຖິງໃນເວລາທີ່ການຫຼຸດຜ່ອນຂະຫນາດຂອງຮູບພາບ HTML ໂດຍບໍ່ມີການປະນີປະນອມຄຸນນະພາບຂອງມັນ. ຂ້າງລຸ່ມນີ້ແມ່ນບາງຄໍາແນະນໍາທີ່ສໍາຄັນ:
1. ໃຊ້ຄຸນສົມບັດ "ຄວາມກວ້າງ" ແລະ "ຄວາມສູງ": ມັນເປັນສິ່ງສໍາຄັນທີ່ຈະກໍານົດຂະຫນາດທີ່ແນ່ນອນຂອງຮູບພາບໃນ pixels ໂດຍໃຊ້ຄຸນລັກສະນະ "width" ແລະ "height". ນີ້ອະນຸຍາດໃຫ້ຕົວທ່ອງເວັບສາມາດສະຫງວນພື້ນທີ່ພຽງພໍສໍາລັບຮູບພາບ, ຫຼີກເວັ້ນການ rescaling ທີ່ບໍ່ຈໍາເປັນແລະດັ່ງນັ້ນການເພີ່ມປະສິດທິພາບຂອງມັນ.
2. ບີບອັດຮູບພາບ: ມີເຄື່ອງມືອອນໄລນ໌ ແລະໂປຣແກຣມແກ້ໄຂຮູບພາບທີ່ຊ່ວຍໃຫ້ເຮົາສາມາດບີບອັດຮູບພາບໄດ້ໂດຍບໍ່ເສຍຄຸນນະພາບ. ໂດຍການຫຼຸດຂະໜາດໄຟລ໌, ການໂຫຼດໜ້າຈະເລັ່ງຂຶ້ນຢ່າງຫຼວງຫຼາຍ. ນອກຈາກນັ້ນ, ມັນແມ່ນແນະນໍາໃຫ້ໃຊ້ ຮູບແບບຮູບພາບ ຮູບແບບທີ່ອ່ອນກວ່າເຊັ່ນ JPEG ຫຼື PNG ທີ່ຖືກບີບອັດ, ແທນທີ່ຈະເປັນຮູບແບບທີ່ຮຸນແຮງເຊັ່ນ TIFF ຫຼື BMP.
3. ຫຼີກເວັ້ນການປັບຂະຫນາດໂດຍໃຊ້ CSS: ເຖິງແມ່ນວ່າມັນເປັນໄປໄດ້ທີ່ຈະປັບຂະຫນາດຮູບພາບໂດຍໃຊ້ CSS, ນີ້ສາມາດສົ່ງຜົນກະທົບທາງລົບຕໍ່ຄຸນນະພາບຂອງມັນ. ມັນມັກໃຊ້ຮູບພາບທີ່ມີຂະຫນາດທີ່ຖືກຕ້ອງຕັ້ງແຕ່ເລີ່ມຕົ້ນແລະຫຼີກເວັ້ນການບັງຄັບຂະຫນາດຜ່ານ CSS. ໃຊ້ພຽງແຕ່ຂະຫນາດທີ່ຈໍາເປັນເພື່ອສະແດງຮູບພາບຢ່າງຖືກຕ້ອງ, ຫຼີກເວັ້ນການມີຄ່າໃຫຍ່ຫຼືນ້ອຍເກີນໄປ.
ຈື່ໄວ້ວ່າການເພີ່ມປະສິດທິພາບຮູບພາບແມ່ນສ່ວນຫນຶ່ງທີ່ສໍາຄັນຂອງການພັດທະນາເວັບ, ຍ້ອນວ່າຫນ້າເວັບທີ່ຊ້າສາມາດມີຜົນກະທົບທາງລົບຕໍ່ປະສົບການຂອງຜູ້ໃຊ້. ໂດຍການປະຕິບັດຕາມຄໍາແນະນໍາເຫຼົ່ານີ້ແລະນໍາໃຊ້ເຄື່ອງມືທີ່ເຫມາະສົມ, ທ່ານຈະສາມາດຫຼຸດຜ່ອນຂະຫນາດຂອງຮູບພາບ HTML ໂດຍບໍ່ມີການເສຍສະລະຄຸນນະພາບຂອງມັນ, ດັ່ງນັ້ນຈຶ່ງບັນລຸຫນ້າເວັບທີ່ໄວແລະມີປະສິດທິພາບຫຼາຍຂຶ້ນ.
10. ຕົວຢ່າງລະຫັດເພື່ອເຮັດໃຫ້ຮູບພາບຂະຫນາດນ້ອຍລົງໃນ HTML
ເພື່ອເຮັດໃຫ້ຮູບພາບນ້ອຍລົງໃນ HTML, ທ່ານສາມາດນໍາໃຊ້ CSS ເພື່ອປັບຂະຫນາດຮູບພາບ. ນີ້ແມ່ນບາງຕົວຢ່າງລະຫັດທີ່ທ່ານສາມາດນໍາໃຊ້ເປັນເອກະສານອ້າງອີງ:
1. ໃຊ້ຄຸນສົມບັດຄວາມກວ້າງຂອງ CSS ເພື່ອກໍານົດຄວາມກວ້າງຂອງຮູບ. ຕົວຢ່າງ: ຖ້າທ່ານຕ້ອງການຫຼຸດຜ່ອນຂະຫນາດຂອງຮູບພາບລົງເຄິ່ງຫນຶ່ງ, ທ່ານສາມາດກໍານົດຄວາມກວ້າງເປັນ 50%.
2. ອີກວິທີໜຶ່ງໃນການປັບຂະໜາດຮູບແມ່ນໂດຍໃຊ້ຄຸນສົມບັດ CSS “ຄວາມສູງ” ເພື່ອກຳນົດຄວາມສູງຂອງຮູບ. ຕົວຢ່າງ: ຖ້າທ່ານຕ້ອງການຫຼຸດຜ່ອນຂະຫນາດຮູບພາບລົງຫນຶ່ງສ່ວນສີ່, ທ່ານສາມາດກໍານົດຄວາມສູງເປັນ 25%.
3. ທ່ານຍັງສາມາດໃຊ້ຄຸນສົມບັດ CSS “ຫັນປ່ຽນ” ເພື່ອປັບຂະໜາດຮູບ. ສໍາລັບຕົວຢ່າງ, ຖ້າທ່ານຕ້ອງການຫຼຸດຜ່ອນຂະຫນາດຂອງຮູບພາບລົງເຄິ່ງຫນຶ່ງ, ທ່ານສາມາດນໍາໃຊ້ຫນ້າທີ່ "ຂະຫນາດ (0.5)".
ຈົ່ງຈື່ໄວ້ວ່າສິ່ງເຫຼົ່ານີ້ແມ່ນພຽງແຕ່ຕົວຢ່າງແລະທ່ານສາມາດປັບຄ່າຕາມຄວາມຕ້ອງການຂອງທ່ານ. ນອກຈາກນັ້ນ, ຈົ່ງຈື່ໄວ້ວ່າການປັບຂະຫນາດຮູບພາບໂດຍໃຊ້ HTML ແລະ CSS ພຽງແຕ່ມີຜົນກະທົບຕໍ່ການສະແດງຢູ່ໃນຕົວທ່ອງເວັບ, ບໍ່ແມ່ນຂະຫນາດຕົວຈິງຂອງໄຟລ໌ຮູບພາບ.
11. ແກ້ໄຂບັນຫາທົ່ວໄປໃນເວລາທີ່ປັບຂະຫນາດຮູບພາບໃນ HTML
ຂັ້ນຕອນດັ່ງກ່າວແມ່ນມີລາຍລະອຽດຢູ່ດ້ານລຸ່ມ. ເທື່ອລະຂັ້ນຕອນ ເພື່ອແກ້ໄຂບັນຫາທົ່ວໄປໃນເວລາທີ່ປັບຂະຫນາດຮູບພາບໃນ HTML:
1. ໃຊ້ຄຸນສົມບັດ CSS: HTML ສະຫນອງຄຸນສົມບັດ CSS ຫຼາຍເພື່ອປັບຂະຫນາດຂອງຮູບພາບ. ຫນຶ່ງໃນທົ່ວໄປທີ່ສຸດແມ່ນຄຸນສົມບັດ "width", ເຊິ່ງຊ່ວຍໃຫ້ທ່ານສາມາດກໍານົດຄວາມກວ້າງທີ່ຕ້ອງການໃນ pixels ຫຼືເປີເຊັນ. ຍົກຕົວຢ່າງ, ກໍານົດຄວາມກວ້າງຂອງຮູບພາບເປັນ 300 pixels. ເຊັ່ນດຽວກັນ, ຄຸນສົມບັດ "ຄວາມສູງ" ສາມາດຖືກນໍາໃຊ້ເພື່ອກໍານົດຄວາມສູງ.
2. ຮັກສາອັດຕາສ່ວນຮູບ: ເພື່ອຫຼີກເວັ້ນບັນຫາການບິດເບືອນ, ຄວນຮັກສາອັດຕາສ່ວນຮູບເດີມເມື່ອປັບຂະໜາດຮູບ. ເພື່ອເຮັດສິ່ງນີ້, ທ່ານສາມາດນໍາໃຊ້ຄຸນສົມບັດ "ຄວາມກວ້າງ" ແລະປ່ອຍໃຫ້ມູນຄ່າຂອງຊັບສິນ "ຄວາມສູງ" ຫວ່າງເປົ່າຫຼືໃຊ້ "ອັດຕະໂນມັດ". ຍົກຕົວຢ່າງ, .
3. ໃຊ້ເຄື່ອງມືພາຍນອກ: ຖ້າທ່ານຕ້ອງການປັບຂະຫນາດຮູບພາບຫຼາຍຄັ້ງໃນເວລາດຽວກັນຫຼືຖ້າການຄວບຄຸມແບບພິເສດກວ່າໃນຂະບວນການປັບຂະຫນາດແມ່ນຕ້ອງການ, ເຄື່ອງມືພາຍນອກສາມາດນໍາໃຊ້ໄດ້. ບາງທາງເລືອກທີ່ນິຍົມປະກອບມີໂຄງການແກ້ໄຂຮູບພາບເຊັ່ນ: Adobe Photoshop ຫຼື GIMP, ຫຼືການບໍລິການອອນໄລນ໌ເຊັ່ນ: TinyPNG ຫຼື Kraken.io. ເຄື່ອງມືເຫຼົ່ານີ້ໂດຍປົກກະຕິຈະສະເຫນີໃຫ້ທາງເລືອກທີ່ກ້າວຫນ້າຫຼາຍ, ເຊັ່ນ: ການປັບຂະຫນາດອັດຕະໂນມັດ, ການບີບອັດ, ຫຼືການຟໍແມັດຮູບພາບ.
ຈໍາໄວ້ສະເຫມີເພື່ອຊ່ວຍປະຢັດ a ສຳຮອງຂໍ້ມູນ ຂອງຮູບພາບຕົ້ນສະບັບກ່ອນທີ່ຈະເຮັດການດັດແກ້ໃດຫນຶ່ງ, ແລະທົດສອບໃນອຸປະກອນແລະຂະຫນາດຫນ້າຈໍທີ່ແຕກຕ່າງກັນເພື່ອຮັບປະກັນວ່າຮູບພາບໄດ້ຖືກປັບຂະຫນາດໄດ້ຖືກຕ້ອງ. ປະຕິບັດຕາມຂັ້ນຕອນເຫຼົ່ານີ້ແລະຫຼີກເວັ້ນບັນຫາທົ່ວໄປໃນເວລາທີ່ປັບຂະຫນາດຮູບພາບຂອງທ່ານໃນ HTML.
12. ການນຳໃຊ້ເຕັກນິກການບີບອັດຮູບພາບໃນ HTML
ການນໍາໃຊ້ເຕັກນິກການບີບອັດຮູບພາບໃນ HTML ເປັນສິ່ງຈໍາເປັນເພື່ອເພີ່ມປະສິດທິພາບການໂຫຼດແລະການສະແດງຮູບພາບຢູ່ໃນເວັບໄຊທ໌. ການບີບອັດຫຼຸດຜ່ອນຂະຫນາດຂອງ ໄຟລ໌ຮູບພາບ ໂດຍບໍ່ມີການສົ່ງຜົນກະທົບຕໍ່ຄຸນນະພາບສາຍຕາຂອງມັນຢ່າງຫຼວງຫຼາຍ, ເຊິ່ງປັບປຸງການປະຕິບັດຫນ້າແລະປະສົບການຂອງຜູ້ໃຊ້.
ມີຫຼາຍວິທີການບີບອັດທີ່ສາມາດນໍາໃຊ້ກັບ HTML, ເຊັ່ນການນໍາໃຊ້ໂປຼແກຼມແລະເຄື່ອງມືສະເພາະ, ເຊັ່ນ Adobe Photoshop ຫຼື GIMP, ເຊິ່ງຊ່ວຍໃຫ້ທ່ານສາມາດປັບຄຸນນະພາບແລະຂະຫນາດຂອງຮູບພາບກ່ອນທີ່ຈະອັບໂຫລດໃສ່ເວັບໄຊທ໌. ມັນຍັງສາມາດໃຊ້ບໍລິການອອນໄລນ໌ທີ່ອັດອັດຕະໂນມັດຮູບພາບໂດຍບໍ່ມີການສູນເສຍຄຸນນະພາບ.
ນອກຈາກນັ້ນ, ມັນເປັນສິ່ງສໍາຄັນທີ່ຈະນໍາໃຊ້ຮູບແບບຮູບພາບທີ່ເປັນມິດກັບເວັບ, ເຊັ່ນ JPEG, PNG, ຫຼື WEBP. ຮູບແບບເຫຼົ່ານີ້ສະເຫນີລະດັບການບີບອັດທີ່ແຕກຕ່າງກັນແລະສະຫນັບສະຫນູນຄວາມໂປ່ງໃສ, ດັ່ງນັ້ນມັນຈໍາເປັນຕ້ອງເລືອກທີ່ເຫມາະສົມທີ່ສຸດໂດຍອີງໃສ່ປະເພດຂອງຮູບພາບແລະຈຸດປະສົງຂອງມັນຢູ່ໃນເວັບໄຊທ໌. ທ່ານຍັງສາມາດນໍາໃຊ້ເຕັກນິກການໂຫຼດ lazy, ເຊິ່ງການໂຫຼດຮູບພາບພຽງແຕ່ເມື່ອມັນເຫັນໄດ້ໃນປ່ອງຢ້ຽມຂອງຕົວທ່ອງເວັບ, ເຊິ່ງຊ່ວຍເລັ່ງເວລາໂຫຼດຫນ້າ.
ໃນສັ້ນ, ມັນເປັນສິ່ງຈໍາເປັນທີ່ຈະປັບປຸງການໂຫຼດແລະການສະແດງຮູບພາບຢູ່ໃນເວັບໄຊທ໌. ການນໍາໃຊ້ໂຄງການແລະເຄື່ອງມືສະເພາະ, ການເລືອກຮູບແບບຮູບພາບທີ່ເຫມາະສົມແລະການນໍາໃຊ້ເຕັກນິກເຊັ່ນການໂຫຼດ lazy ແມ່ນບາງການປະຕິບັດທີ່ແນະນໍາເພື່ອບັນລຸໄດ້. ປະສິດທິພາບທີ່ດີຂຶ້ນ ແລະປະສົບການຜູ້ໃຊ້ທີ່ດີທີ່ສຸດ. ຈື່ໄວ້ສະເຫມີເພື່ອທົດສອບເວັບໄຊທ໌ໃນອຸປະກອນແລະການເຊື່ອມຕໍ່ທີ່ແຕກຕ່າງກັນເພື່ອຮັບປະກັນຮູບພາບທີ່ໂຫລດໄວແລະມີປະສິດທິພາບ.
13. ວິທີການປັບຮູບພາບກັບອຸປະກອນຕ່າງໆໃນ HTML
ມີວິທີທີ່ແຕກຕ່າງກັນໃນການປັບຮູບພາບກັບອຸປະກອນຕ່າງໆໃນ HTML. ວິທີການຂັ້ນຕອນໂດຍຂັ້ນຕອນເພື່ອແກ້ໄຂບັນຫານີ້ຈະມີລາຍລະອຽດຂ້າງລຸ່ມນີ້.
1. ໃຊ້ຄຸນສົມບັດ “srcset”: ຄຸນລັກສະນະນີ້ອະນຸຍາດໃຫ້ທ່ານລະບຸຮູບພາບຕ່າງໆສໍາລັບຂະຫນາດຫນ້າຈໍທີ່ແຕກຕ່າງກັນ. ເພື່ອເຮັດສິ່ງນີ້, ໄຟລ໌ຮູບພາບທີ່ແຕກຕ່າງກັນຕ້ອງຖືກລວມຢູ່ໃນແທັກ "img" ແລະແຍກດ້ວຍເຄື່ອງໝາຍຈຸດ. ຍົກຕົວຢ່າງ:
"`html
«`
ລະຫັດນີ້ຊີ້ໃຫ້ເຫັນວ່າ "small-image.jpg" ຈະຖືກສະແດງຖ້າຫນ້າຈໍມີຄວາມກວ້າງເຖິງ 320 pixels, "medium-image.jpg" ຖ້າຄວາມກວ້າງໃຫຍ່ກວ່າ 320px ແຕ່ຫນ້ອຍກວ່າຫຼືເທົ່າກັບ 768px, ແລະ " large-image .jpg» ຖ້າຄວາມກວ້າງໃຫຍ່ກວ່າ 768px ແຕ່ໜ້ອຍກວ່າ ຫຼືເທົ່າກັບ 1024px.
2. ໃຊ້ CSS media queries: ທາງເລືອກອື່ນແມ່ນໃຊ້ກົດລະບຽບການສອບຖາມສື່ CSS ເພື່ອກໍານົດຮູບແບບຕ່າງໆສໍາລັບຂະຫນາດຫນ້າຈໍທີ່ແຕກຕ່າງກັນ. ໃນກໍລະນີນີ້, ທ່ານສາມາດນໍາໃຊ້ຮູບພາບເປັນພື້ນຖານຂອງອົງປະກອບຫຼືກໍານົດຂະຫນາດຮູບພາບທີ່ແຕກຕ່າງກັນໂດຍໃຊ້ຄຸນລັກສະນະ "width". ຍົກຕົວຢ່າງ:
"`html
«`
ລະຫັດນີ້ຈະສະແດງ “small-image.jpg” ເປັນພື້ນຫຼັງຂອງອົງປະກອບທີ່ມີຊັ້ນ “ຮູບພາບ” ໃນໜ້າຈໍກວ້າງເຖິງ 480px, “medium-image.jpg” ໃນໜ້າຈໍໃຫຍ່ກວ່າ 480px ແຕ່ໜ້ອຍກວ່າ ຫຼືເທົ່າກັບ 1024px, ແລະ “ “image-grande.jpg” ໃນໜ້າຈໍໃຫຍ່ກວ່າ 1024px.
3. ໃຊ້ກອບແລະຫ້ອງສະຫມຸດ: ມີຫຼາຍກອບແລະຫ້ອງສະຫມຸດທີ່ງ່າຍຂະບວນການປັບຮູບພາບ, ເຊັ່ນ Responsive Images Community Group (RICG), Picturefill ແລະ Lazy Load. ເຄື່ອງມືເຫຼົ່ານີ້ອໍານວຍຄວາມສະດວກໃນການປະຕິບັດເຕັກນິກທີ່ໄດ້ກ່າວມາຂ້າງເທິງແລະອະນຸຍາດໃຫ້ມີການປັບຕົວຂອງຮູບພາບທີ່ມີປະສິດທິພາບແລະອັດຕະໂນມັດກັບອຸປະກອນຕ່າງໆ.
14. ສະຫຼຸບ: ການປະຕິບັດທີ່ດີທີ່ສຸດເພື່ອເຮັດໃຫ້ຮູບພາບນ້ອຍລົງໃນ HTML
ສະຫຼຸບແລ້ວ, ການຫຼຸດຜ່ອນຂະຫນາດຂອງຮູບພາບໃນ HTML ແມ່ນຂະບວນການທີ່ຂ້ອນຂ້າງງ່າຍດາຍທີ່ສາມາດບັນລຸໄດ້ໂດຍການປະຕິບັດຕາມການປະຕິບັດທີ່ດີທີ່ສຸດຈໍານວນຫນ້ອຍ. ຂ້າງລຸ່ມນີ້ແມ່ນບາງຄໍາແນະນໍາແລະຄໍາແນະນໍາສໍາລັບການເຮັດເຊັ່ນນັ້ນ:
1. ໃຊ້ຄຸນສົມບັດຂະໜາດ: ຄຸນລັກສະນະ “ຄວາມກວ້າງ” ແລະ “ຄວາມສູງ” ຂອງປ້າຍຊື່ ເປັນວິທີທີ່ງ່າຍດາຍທີ່ຈະລະບຸຂະຫນາດຂອງຮູບພາບໃນ HTML.
ຈະກໍານົດຄວາມກວ້າງແລະຄວາມສູງຂອງຮູບພາບເປັນ 500 ແລະ 300 pixels ຕາມລໍາດັບ. ມັນເປັນສິ່ງສໍາຄັນທີ່ຈະກ່າວເຖິງວ່ານີ້ພຽງແຕ່ຈະດັດແປງຂະຫນາດສາຍຕາຂອງຮູບພາບ, ບໍ່ແມ່ນຂະຫນາດໄຟລ໌ຂອງມັນ.
2. ການບີບອັດຮູບພາບ: ການບີບອັດຈະຫຼຸດຂະໜາດຂອງໄຟລ໌ຮູບພາບ ໂດຍບໍ່ສົ່ງຜົນກະທົບຕໍ່ຄຸນນະພາບສາຍຕາຂອງມັນ. ມີເຄື່ອງມືອອນໄລນ໌ຈໍານວນຫນຶ່ງແລະຊອບແວທີ່ມີຢູ່ເພື່ອບີບອັດຮູບພາບໃນຮູບແບບ JPEG, PNG ຫຼື GIF. ໃຫ້ແນ່ໃຈວ່າທ່ານໃຊ້ຮູບແບບການບີບອັດທີ່ເຫມາະສົມແລະປັບການຕັ້ງຄ່າຕາມຄວາມຕ້ອງການຂອງທ່ານ.
3. Optimize ສໍາລັບເວັບ: ມີວິທີອື່ນເພື່ອເພີ່ມປະສິດທິພາບຮູບພາບສໍາລັບການນໍາໃຊ້ ໃນເວັບ. ທ່ານສາມາດນໍາໃຊ້ຮູບແບບຮູບພາບທີ່ມີປະສິດທິພາບຫຼາຍຂຶ້ນເຊັ່ນ WebP ຫຼື SVG, ທີ່ສະຫນອງອັດຕາສ່ວນການບີບອັດທີ່ດີກວ່າ. ນອກຈາກນັ້ນ, ທ່ານຄວນພິຈາລະນາປ່ຽນຄວາມລະອຽດຂອງຮູບພາບຖ້າມັນຈະສະແດງຢູ່ໃນອຸປະກອນມືຖືເທົ່ານັ້ນ. **
4. ຫຍໍ້ລະຫັດ HTML: ລັກສະນະທີ່ສໍາຄັນອີກຢ່າງຫນຶ່ງແມ່ນການຫຼຸດຜ່ອນຂະຫນາດຂອງລະຫັດ HTML ທີ່ມີຮູບພາບ. ເພື່ອເຮັດສິ່ງນີ້, ທ່ານສາມາດລຶບຊ່ອງຫວ່າງທີ່ບໍ່ຈໍາເປັນແລະຄໍາເຫັນ. ນອກນັ້ນທ່ານຍັງສາມາດສົມທົບຫຼາຍຮູບພາບເຂົ້າໄປໃນແຜ່ນ sprite ດຽວໂດຍໃຊ້ເຕັກນິກ CSS Sprites. **
** ອັນນີ້ຈະຫຼຸດຜ່ອນຄ່າຜ່ານເຊີບເວີໃນເວລາທີ່ໄດ້ຮັບການຮ້ອງຂໍຮູບພາບຫຼາຍ. ນອກຈາກນັ້ນ, ພິຈາລະນານໍາໃຊ້ເຕັກນິກການເກັບຮັກສາໄວ້ເພື່ອໃຫ້ຕົວທ່ອງເວັບສາມາດບັນທຶກຮູບພາບໄວ້ໃນຫນ່ວຍຄວາມຈໍາຊົ່ວຄາວຂອງມັນແລະບໍ່ຈໍາເປັນຕ້ອງດາວໂຫລດອີກເທື່ອຫນຶ່ງກັບແຕ່ລະການຢ້ຽມຢາມ.
ປະຕິບັດຕາມການປະຕິບັດທີ່ດີທີ່ສຸດເຫຼົ່ານີ້ແລະທ່ານແນ່ນອນຈະສາມາດຫຼຸດຜ່ອນຂະຫນາດຂອງຮູບພາບ HTML ຂອງທ່ານຢ່າງມີປະສິດທິພາບ, ດັ່ງນັ້ນການເພີ່ມປະສິດທິພາບຂອງເວັບໄຊທ໌ຂອງທ່ານແລະໃຫ້ປະສົບການຜູ້ໃຊ້ທີ່ດີກວ່າ.
ສະຫຼຸບແລ້ວ, ການຫຼຸດຜ່ອນຂະຫນາດຂອງຮູບພາບໃນ HTML ແມ່ນຂະບວນການທີ່ຈໍາເປັນເພື່ອເພີ່ມປະສິດທິພາບຄວາມໄວໃນການໂຫຼດຂອງເວັບໄຊທ໌ແລະປັບປຸງປະສົບການຂອງຜູ້ໃຊ້. ຜ່ານເຄື່ອງມືແລະເຕັກນິກທີ່ໄດ້ກ່າວມາ, ນັກພັດທະນາສາມາດບັນລຸເປົ້າຫມາຍນີ້ຢ່າງມີປະສິດທິພາບ.
ການໃຊ້ແທັກ HTML ເພື່ອລະບຸຂະຫນາດຮູບພາບປ້ອງກັນບັນຫາການໂຫຼດ ແລະຮັບປະກັນວ່າຮູບພາບຈະສະແດງຢ່າງຖືກຕ້ອງໃນອຸປະກອນ ແລະໜ້າຈໍຕ່າງໆ. ນອກຈາກນັ້ນ, ໂດຍການບີບອັດຮູບພາບທີ່ມີຮູບແບບເຊັ່ນ JPEG ຫຼື WebP, ນ້ໍາຫນັກຂອງໄຟລ໌ຈະຫຼຸດລົງໂດຍບໍ່ມີການສູນເສຍຄຸນນະພາບສາຍຕາທີ່ສໍາຄັນ.
ມັນເປັນສິ່ງສໍາຄັນທີ່ຈະຈື່ຈໍາວ່າແຕ່ລະເວັບໄຊທ໌ແມ່ນເປັນເອກະລັກແລະອາດຈະຕ້ອງການການປັບຕົວເພີ່ມເຕີມໂດຍອີງຕາມຄວາມຕ້ອງການສະເພາະຂອງທ່ານ. ມັນແມ່ນແນະນໍາໃຫ້ເຮັດການທົດສອບແຕ່ລະໄລຍະແລະການເພີ່ມປະສິດທິພາບເພື່ອຮັກສາປະສິດທິພາບທີ່ດີທີ່ສຸດ.
ສະຫຼຸບແລ້ວ, ໂດຍການປະຕິບັດຕາມເຕັກນິກເຫຼົ່ານີ້ແລະການເພີ່ມປະສິດທິພາບຂະຫນາດຂອງຮູບພາບ HTML ຢ່າງຖືກຕ້ອງ, ນັກພັດທະນາສາມາດບັນລຸເວັບໄຊທ໌ທີ່ໄວແລະມີປະສິດທິພາບຫຼາຍຂຶ້ນ, ສະເຫນີປະສົບການຜູ້ໃຊ້ທີ່ດີຂຶ້ນ. ໂດຍຜ່ານການນໍາໃຊ້ທີ່ເຫມາະສົມຂອງເຄື່ອງມືແລະເຕັກນິກທີ່ມີຢູ່, ຂະຫນາດຮູບພາບຈະບໍ່ເປັນຂໍ້ຈໍາກັດໃນໂລກດິຈິຕອນອີກຕໍ່ໄປ.
ຂ້ອຍແມ່ນ Sebastián Vidal, ວິສະວະກອນຄອມພິວເຕີທີ່ມີຄວາມກະຕືລືລົ້ນກ່ຽວກັບເຕັກໂນໂລຢີແລະ DIY. ຍິ່ງໄປກວ່ານັ້ນ, ຂ້ອຍເປັນຜູ້ສ້າງ tecnobits.com, ບ່ອນທີ່ຂ້ອຍແບ່ງປັນບົດສອນເພື່ອເຮັດໃຫ້ເຕັກໂນໂລຢີສາມາດເຂົ້າເຖິງໄດ້ຫຼາຍຂຶ້ນແລະເຂົ້າໃຈໄດ້ສໍາລັບທຸກຄົນ.