ມີຈໍານວນຮູບແບບພາບທີ່ສາມາດໃຊ້ໃນຫນ້າເວັບຕ່າງໆ. ບາງຕົວຢ່າງທົ່ວໄປແມ່ນ GIF , JPG , ແລະ PNG . ໄຟ SVG ຍັງຖືກນໍາໃຊ້ທົ່ວໄປໃນເວັບໄຊທ໌໌ໃນມື້ນີ້, ໃຫ້ນັກອອກແບບເວັບໄຊຕ໌ຕົວເລືອກອື່ນສໍາລັບຮູບພາບອອນໄລນ໌.
ຮູບພາບ GIF
ໃຊ້ໄຟລ໌ GIF ສໍາລັບຮູບພາບທີ່ມີຈໍານວນຂະຫນາດນ້ອຍຄົງທີ່ຂອງສີ. ໄຟລ໌ GIF ຖືກຫຼຸດລົງສະເຫມີໄປບໍ່ເກີນ 256 ສີທີ່ເປັນເອກະລັກ. ລະບົບການບີບອັດສໍາລັບໄຟລ໌ GIF ແມ່ນຫນ້ອຍທີ່ສັບສົນກວ່າສໍາລັບໄຟລ໌ JPG, ແຕ່ເມື່ອນໍາໃຊ້ໃນຮູບພາບທີ່ມີຮູບແປນແລະຂໍ້ຄວາມມັນກໍ່ສ້າງ ຂະຫນາດໄຟລ໌ຂະຫນາດນ້ອຍ ຫຼາຍ.
ຮູບແບບ GIF ບໍ່ເຫມາະສົມສໍາລັບຮູບພາບຮູບພາບຫຼືຮູບພາບທີ່ມີສີ gradient. ເນື່ອງຈາກຮູບແບບ GIF ມີຈໍານວນສີຈໍາກັດ, gradient ແລະຮູບຖ່າຍຈະສິ້ນສຸດດ້ວຍແຖບແລະການສະແດງຜົນ pixels ໃນເວລາທີ່ບັນທຶກເປັນໄຟລ໌ GIF.
ໃນຄວາມເປັນຈິງ, ທ່ານຈະນໍາໃຊ້ GIFs ພຽງແຕ່ສໍາລັບຮູບພາບທີ່ງ່າຍດາຍມີພຽງແຕ່ສີທີ່ບໍ່ຫຼາຍປານໃດ, ແຕ່ທ່ານຍັງສາມາດນໍາໃຊ້ PNGs ສໍາລັບວ່າເຊັ່ນດຽວກັນ (ຫຼາຍໃນນັ້ນໃນໄລຍະສັ້ນໆ).
JPG Images
ໃຊ້ຮູບພາບ JPG ສໍາລັບຮູບພາບແລະຮູບພາບອື່ນໆທີ່ມີລ້ານສີ. ມັນໃຊ້ລະບົບການບີບອັດທີ່ສະລັບສັບຊ້ອນທີ່ຊ່ວຍໃຫ້ທ່ານສ້າງຮູບພາບຂະຫນາດນ້ອຍໂດຍການສູນເສຍບາງຄຸນນະພາບຂອງຮູບພາບ. ນີ້ຖືກເອີ້ນວ່າການສູນເສຍ "ການສູນເສຍ" ເນື່ອງຈາກບາງຂໍ້ມູນພາບແມ່ນສູນເສຍເວລາທີ່ຮູບພາບແມ່ນ compressed.
ຮູບແບບ JPG ບໍ່ເຫມາະສົມກັບຮູບພາບຕ່າງໆທີ່ມີຂໍ້ຄວາມ, ຂະຫນາດໃຫຍ່ຂອງສີແຂງ, ແລະຮູບແບບທີ່ງ່າຍດາຍທີ່ມີແຂບແຫນ້ນ. ນີ້ແມ່ນຍ້ອນເມື່ອຮູບພາບຖືກບີບອັດ, ຂໍ້ຄວາມ, ສີ, ຫຼືເສັ້ນອາດຈະເຮັດໃຫ້ມີຄວາມຜິດພາດທີ່ເຮັດໃຫ້ຮູບພາບທີ່ບໍ່ຄ່ອຍຊັດເຈນຍ້ອນວ່າມັນຈະຖືກບັນທຶກໄວ້ໃນຮູບແບບອື່ນ.
ຮູບພາບ JPG ຖືກນໍາໃຊ້ທີ່ດີທີ່ສຸດສໍາລັບການຖ່າຍຮູບແລະຮູບພາບທີ່ມີ lots ຂອງສີທໍາມະຊາດແລະຫຼາຍ.
ຮູບພາບ PNG
ຮູບແບບ PNG ໄດ້ຖືກພັດທະນາເປັນການທົດແທນສໍາລັບຮູບແບບ GIF ໃນເວລາທີ່ມັນປາກົດວ່າຮູບພາບ GIF ຈະຖືກຕ້ອງກັບຄ່າທໍານຽມຄ່າທໍານຽມ. ຮູບພາບ PNG ມີອັດຕາການບີບອັດທີ່ດີກ່ວາຮູບພາບ GIF ເຊິ່ງເຮັດໃຫ້ຮູບພາບຂະຫນາດນ້ອຍກວ່າໄຟດຽວກັນທີ່ບັນທຶກເປັນ GIF. ໄຟລ໌ PNG ສະເຫນີຄວາມໂປ່ງໃສຂອງ alpha, ຊຶ່ງຫມາຍຄວາມວ່າທ່ານສາມາດມີພື້ນທີ່ຂອງຮູບພາບຂອງທ່ານທີ່ມີຄວາມໂປ່ງໃສຢ່າງເຕັມສ່ວນຫຼືແມ້ກະທັ້ງການນໍາໃຊ້ລະດັບຄວາມໂປ່ງໃສຂອງ alpha. ຕົວຢ່າງ, shadow drop ໃຊ້ລະດັບຄວາມໂປ່ງໃສແລະຈະເຫມາະສົມສໍາລັບ PNG (ຫຼືທ່ານອາດຈະຢຸດພວກເຮົາໂດຍໃຊ້ CSS shadows ແທນ).
ພາບ PNG, ເຊັ່ນ GIFs, ບໍ່ເຫມາະສົມກັບຮູບຖ່າຍ. ມັນເປັນໄປໄດ້ທີ່ຈະໄດ້ຮັບປະມານບັນຫາແຖບທີ່ສົ່ງຜົນກະທົບຕໍ່ຮູບພາບທີ່ບັນທຶກໄວ້ເປັນໄຟລ໌ GIF ທີ່ໃຊ້ສີທີ່ແທ້ຈິງ, ແຕ່ນີ້ສາມາດເຮັດໃຫ້ຮູບພາບຂະຫນາດໃຫຍ່ຫຼາຍ. ພາບ PNG ຍັງບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນຈາກໂທລະສັບມືຖືທີ່ມີອາຍຸແລະໂທລະສັບມືຖື.
ພວກເຮົາໃຊ້ PNG ສໍາລັບເອກະສານທີ່ຕ້ອງການຄວາມໂປ່ງໃສ. ພວກເຮົາຍັງໃຊ້ PNG-8 ສໍາລັບໄຟລ໌ທີ່ເຫມາະສົມເປັນ GIF ເຊິ່ງໃຊ້ຮູບແບບ PNG ນີ້ແທນ.
SVG Images
SVG stands for Scalable Vector Graphic. ບໍ່ຄ້າຍຄືກັບຮູບແບບ raster ທີ່ພົບໃນ JPG, GIF ແລະ PNG, ໄຟລ໌ເຫຼົ່ານີ້ໃຊ້ vectors ເພື່ອສ້າງໄຟລ໌ຂະຫນາດນ້ອຍທີ່ສາມາດສະແດງຢູ່ໃນຂະຫນາດທີ່ບໍ່ມີການສູນເສຍຄຸນນະພາບຂອງການຂະຫຍາຍຂະຫນາດໄຟລ໌. ພວກເຂົາຖືກສ້າງຂື້ນເພື່ອການສະແດງພາບເຊັ່ນຮູບສັນຍາລັກແລະຮູບສັນຍາລັກ.
ການກະກຽມຮູບພາບສໍາລັບການສົ່ງເວັບ
ໂດຍບໍ່ສົນເລື່ອງຮູບແບບຮູບພາບໃດໆທີ່ທ່ານໃຊ້ແລະເວັບໄຊທ໌ຂອງທ່ານແນ່ໃຈວ່າໃຊ້ຮູບແບບຕ່າງໆໃນທົ່ວທຸກຫນ້າ, ທ່ານຈໍາເປັນຕ້ອງຮັບປະກັນວ່າທຸກຮູບພາບໃນເວັບໄຊດັ່ງກ່າວແມ່ນ ກຽມພ້ອມສໍາລັບການຈັດສົ່ງເວັບ . ຮູບພາບທີ່ໃຫຍ່ເກີນໄປກໍ່ສາມາດເຮັດໃຫ້ເວັບໄຊທ໌ທີ່ດໍາເນີນການຊ້າແລະຜົນກະທົບໂດຍລວມ. ເພື່ອຕ້ານການນີ້, ຮູບພາບເຫລົ່ານີ້ຕ້ອງໄດ້ຮັບການປັບປຸງ ເພື່ອຊອກຫາຄວາມສົມດຸນລະຫວ່າງຄຸນນະພາບສູງແລະຂະຫນາດໄຟລ໌ທີ່ຕໍ່າທີ່ສຸດໃນລະດັບຄຸນນະພາບນັ້ນ.
ການເລືອກຮູບແບບທີ່ຖືກຕ້ອງແມ່ນສ່ວນຫນຶ່ງຂອງການສູ້ຮົບ, ແຕ່ຍັງໃຫ້ແນ່ໃຈວ່າທ່ານໄດ້ກະກຽມໄຟລ໌ເຫຼົ່ານັ້ນເປັນຂັ້ນຕອນຕໍ່ໄປໃນຂະບວນການຈັດສົ່ງເວັບທີ່ສໍາຄັນນີ້.
ບົດສະບັບຕົ້ນໂດຍ Jennifer Krynin. ແກ້ໄຂໂດຍ Jeremy Girard.