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

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

ສາລະບານ

ເປັນຫຍັງຂະໜາດໄຟລ໌ຮູບພາບຈຶ່ງມີຄວາມສຳຄັນໃນຮ້ານ Shopify

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

ການແຂ່ງຂັນທີ່ເຊື່ອງໄວ້ໃນທຸກໆໜ້າ

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

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

ຂະໜາດໄຟລ໌ຮູບພາບຍັງສົ່ງຜົນກະທົບຕໍ່ຄວາມໄວຂອງໜ້າເວັບທີ່ສາມາດໃຊ້ໄດ້, ຊຶ່ງເປັນເຫດຜົນທີ່ມັນຢູ່ໃນການສົນທະນາດຽວກັນກັບການວາງແຜນຮູບແບບ. ຂະໜາດຮູບພາບດິບມີຄວາມສຳຄັນ, ແຕ່ຂະໜາດໄຟລ໌ທີ່ສາມາດສົ່ງໄດ້ແມ່ນສິ່ງທີ່ໂປຣແກຣມທ່ອງເວັບຕ້ອງດຶງເອົາ ແລະ ຖອດລະຫັດ. ດັ່ງທີ່ໄດ້ອະທິບາຍໄວ້ໃນ ຄູ່ມືການປັບຂະໜາດຮູບພາບຂອງ Yassine Malti , ການສົ່ງອອກທີ່ນ້ອຍກວ່າສາມາດຮັກສາບົດບາດທາງສາຍຕາຂອງຮູບພາບໄດ້ ໃນຂະນະທີ່ກຳຈັດນ້ຳໜັກທີ່ບໍ່ຈຳເປັນ.

ຜົນຕອບແທນທາງປະຕິບັດ

ເຫດຜົນທີ່ສຳຄັນນີ້ແມ່ນງ່າຍດາຍ. ຈຳນວນພິກເຊວທີ່ຢູ່ເບື້ອງຕົ້ນກຳນົດພື້ນຖານ, ແລະການບີບອັດ ແລະ ຮູບແບບຈະຕັດສິນຂະໜາດໄຟລ໌ສຸດທ້າຍ. ຮູບພາບ 24 ລ້ານພິກເຊວທີ່ RGB 24 ບິດມີຂໍ້ມູນພິກເຊວດິບປະມານ 72 ລ້ານໄບຕ໌ , ໃນຂະນະທີ່ຮູບພາບດຽວກັນສາມາດມີຂະໜາດປະມານ 423.41 KB ເປັນ JPEG ທີ່ມີຄຸນນະພາບ 100% ຫຼືປະມານ 211.7 KB ທີ່ JPEG ຄຸນນະພາບ 90%, ຂຶ້ນກັບຕົວເລືອກການສົ່ງອອກ ( Scantips ). ຊ່ອງຫວ່າງນັ້ນແມ່ນເຫດຜົນທີ່ຮ້ານສອງແຫ່ງສາມາດໃຊ້ຮູບພາບທີ່ມີລັກສະນະຄ້າຍຄືກັນເກືອບທັງໝົດ ແລະຍັງໄດ້ຮັບຜົນຄວາມໄວທີ່ແຕກຕ່າງກັນຫຼາຍ.

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

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

ຂະໜາດຮູບພາບທຽບກັບຂະໜາດໄຟລ໌ ແລະ ເປັນຫຍັງທັງສອງຢ່າງຈຶ່ງມີຄວາມສຳຄັນ

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

ແຜນວາດປຽບທຽບຂະໜາດຮູບພາບເປັນພິກເຊວກັບຂະໜາດໄຟລ໌ເປັນໄບຕ໌ ສຳລັບການຖ່າຍຮູບດິຈິຕອລ ແລະ ກຣາບຟິກ.

ພິກເຊວກຳນົດເພດານ

ພິກເຊວກຳນົດວ່າໄຟລ໌ສາມາດເກັບລາຍລະອຽດທາງສາຍຕາໄດ້ຫຼາຍປານໃດ. ຮູບພາບ 24 ລ້ານພິກເຊວທີ່ RGB 24 ບິດມີຂໍ້ມູນພິກເຊວດິບປະມານ 72 ລ້ານໄບຕ໌ ເພາະວ່າ 24 ລ້ານພິກເຊວ × 3 ໄບຕ໌ຕໍ່ພິກເຊວ = 72,000,000 ໄບຕ໌ . ຕົວເລກດິບນັ້ນແມ່ນຈຸດເລີ່ມຕົ້ນສຳລັບການສົ່ງອອກ, ບໍ່ແມ່ນນ້ຳໜັກສຸດທ້າຍທີ່ໂປຣແກຣມທ່ອງເວັບໄດ້ຮັບ.

ຕົວເລືອກການສົ່ງອອກປ່ຽນແປງຜົນໄດ້ຮັບຢ່າງໄວວາ. ຮູບພາບແຫຼ່ງດຽວກັນສາມາດອອກມາປະມານ 423.41 KB ເປັນ JPEG ທີ່ຄຸນນະພາບ 100% ແລະປະມານ 211.7 KB ທີ່ຄຸນນະພາບ JPEG 90%. ພິກເຊວຍັງຄົງຄືເກົ່າ, ໃນຂະນະທີ່ການສົ່ງອອກຮັກສາລາຍລະອຽດຕົ້ນສະບັບຫຼາຍຫຼືໜ້ອຍ.

ການບີບອັດ ແລະ ຮູບແບບຕັດສິນຜົນໄດ້ຮັບ

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

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

ກົດລະບຽບທົ່ວໄປ: ພິກເຊວກຳນົດວ່າຮູບພາບສາມາດສະແດງລາຍລະອຽດທາງສາຍຕາໄດ້ຫຼາຍປານໃດ. ຂະໜາດໄຟລ໌ກຳນົດວ່າຜູ້ຊື້ຂອງທ່ານຕ້ອງດາວໂຫຼດເທົ່າໃດ.

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

ການປຽບທຽບ JPEG, PNG, WebP ແລະ AVIF

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

ອິນໂຟກຣາຟິກທີ່ປຽບທຽບຮູບແບບຮູບພາບ JPEG, PNG, WebP, ແລະ AVIF ພ້ອມກັບຄຳອະທິບາຍກ່ຽວກັບຄຸນສົມບັດ ແລະ ກໍລະນີການນຳໃຊ້ຂອງມັນ.

JPEG ແລະ PNG ຍັງຄົງໄດ້ຮັບຕຳແໜ່ງຂອງພວກເຂົາ

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

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

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

ຂະໜາດໄຟລ໌ WebP ແລະ AVIF ຕ່ຳກວ່າ

ຮູບແບບທີ່ທັນສະໄໝມັກຈະຫຼຸດຂະໜາດໄຟລ໌ລົງຕື່ມອີກ. ສຳລັບຮູບພາບຕົວຢ່າງທີ່ມີຄຸນນະພາບທຽບເທົ່າ, JPEG ທີ່ 75% ແມ່ນປະມານ 1.25–1.53 MB , WebP lossy ແມ່ນປະມານ 0.72–0.88 MB , AVIF ແມ່ນປະມານ 0.57–0.69 MB , ແລະ JPEG XL ແມ່ນປະມານ 0.55–0.67 MB ( W3Techs ). ນັ້ນແມ່ນການຫຼຸດລົງທີ່ມີຄວາມໝາຍຈາກນິໄສການສົ່ງອອກແບບເກົ່າ, ແລະມັນອະທິບາຍວ່າເປັນຫຍັງຮ້ານຄ້າຫຼາຍແຫ່ງສາມາດຫຼຸດນ້ຳໜັກໄດ້ໂດຍບໍ່ເຮັດໃຫ້ຮູບພາບເບິ່ງອ່ອນລົງ.

ຂໍ້ເສຍກໍຄື ການເລືອກຮູບແບບຍັງຂຶ້ນກັບເນື້ອຫາເອງ. WebP ແລະ AVIF ສາມາດເຮັດວຽກໄດ້ດີຫຼາຍສຳລັບການຖ່າຍຮູບຜະລິດຕະພັນ, ແຕ່ຮູບພາບທີ່ມີຄວາມໂປ່ງໃສສາມາດເຮັດວຽກແຕກຕ່າງກັນໄດ້. ຖ້າໄຟລ໌ສ່ວນໃຫຍ່ແມ່ນຮູບຖ່າຍ, ໃຫ້ໃຊ້ຮູບແບບທີ່ບີບອັດຮູບພາບປະເພດນັ້ນຢ່າງມີປະສິດທິພາບ. ຖ້າມັນເປັນໂລໂກ້ ຫຼື ຮູບພາບທີ່ມີຄວາມໂປ່ງໃສ, ໃຫ້ໃຊ້ຮູບແບບທີ່ຮັກສາຂອບໃຫ້ສະອາດ.

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

ກົດລະບຽບການຕັດສິນໃຈ: ຖ່າຍຮູບກັບຄົນ, ຜະລິດຕະພັນ, ຫຼືໂຄງສ້າງ, ເລືອກ JPEG ຫຼື WebP. ຮູບພາບຮາບພຽງ, ໂລໂກ້, ຫຼືພາບໜ້າຈໍ, ເລືອກ PNG. ຖ້າຂະບວນການເຮັດວຽກຂອງທ່ານສາມາດຮອງຮັບທາງເລືອກສຳຮອງໄດ້, AVIF ຫຼື WebP ແມ່ນຕົວເລືອກຮ້ານຄ້າສົດທີ່ສະອາດກວ່າ.

ຄວາມລະອຽດ ແລະ ການບີບອັດປ່ຽນແປງຕົວເລກແນວໃດ

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

ພິກເຊວຫຼາຍໝາຍເຖິງຂໍ້ມູນຫຼາຍ

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

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

ການບີບອັດຊ່ວຍປະຢັດທ່ານ, ແຕ່ມັນບໍ່ໄດ້ເຮັດໃຫ້ພິກເຊວເພີ່ມເຕີມຫວ່າງ

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

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

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

ຮູບພາບ hero, tile collection, ແລະ thumbnail ລ້ວນແຕ່ຮຽກຮ້ອງໃຫ້ມີລະດັບລາຍລະອຽດທີ່ແຕກຕ່າງກັນ. ນັ້ນແມ່ນສ່ວນທີ່ພໍ່ຄ້າມັກຈະພາດ, ແລະມັນແມ່ນເຫດຜົນທີ່ການປ່ຽນແປງເລັກນ້ອຍໃນຄວາມລະອຽດສາມາດຮູ້ສຶກບໍ່ເປັນອັນຕະລາຍໃນຕົວແກ້ໄຂໃນຂະນະທີ່ຍັງສ້າງຮ້ານຄ້າທີ່ໜັກໜ່ວງກວ່າໃນບຣາວເຊີ.

Core Web Vitals ແລະຄ່າໃຊ້ຈ່າຍ SEO ຂອງຮູບພາບທີ່ມີນ້ຳໜັກຫຼາຍ

ຮູບພາບທີ່ມີນ້ຳໜັກຫຼາຍສົ່ງຜົນກະທົບຕໍ່ SEO ໂດຍກົງ, ເພາະວ່າ Google ວັດແທກປະສົບການ, ບໍ່ແມ່ນເຈດຕະນາທີ່ຢູ່ເບື້ອງຫຼັງການອັບໂຫລດ. ໃນໜ້າ Shopify ຫຼາຍໆໜ້າ, ຮູບພາບທີ່ເຫັນໄດ້ຫຼາຍທີ່ສຸດແມ່ນສິ່ງທີ່ມີແນວໂນ້ມທີ່ຈະຄວບຄຸມປະສົບການການໂຫຼດຫຼາຍທີ່ສຸດ. ຖ້າຮູບພາບນັ້ນໜັກເກີນໄປ, Largest Contentful Paint ຈະຊ້າລົງ, ແລະຜູ້ເຂົ້າຊົມຈະລໍຖ້າດົນກວ່າກ່ອນທີ່ໜ້າເວັບຈະຮູ້ສຶກວ່າໃຊ້ໄດ້.

ແຜນວາດແຖບສະແດງໃຫ້ເຫັນວ່າການເພີ່ມຂະໜາດໄຟລ໌ຮູບພາບສົ່ງຜົນກະທົບທາງລົບຕໍ່ເວລາໂຫຼດໜ້າ Largest Contentful Paint ແນວໃດ.

ໂດຍປົກກະຕິແລ້ວ LCP ຈະຖືກຕຳໜິໃນສິ່ງທີ່ຜິດພາດ

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

ຕົວຊີ້ວັດອື່ນທີ່ນ້ຳໜັກຮູບພາບມີຜົນກະທົບແມ່ນ Cumulative Layout Shift . ຖ້າຮູບແບບຂອງທ່ານບໍ່ໄດ້ສະຫງວນພື້ນທີ່ຢ່າງຖືກຕ້ອງສຳລັບຮູບພາບ, ຮູບແບບຈະໂດດຂຶ້ນເມື່ອຊັບສິນໂຫຼດ. ສິ່ງນັ້ນເຮັດໃຫ້ຜູ້ຊື້ຮູ້ສຶກວ່າບໍ່ເປັນລະບຽບ ແລະ ເຮັດໃຫ້ໜ້າເວັບໃຊ້ຍາກຂຶ້ນ. ຮູບແບບ Shopify ມັກຈະເຮັດວຽກບາງຢ່າງຢູ່ແລ້ວ, ແຕ່ບໍ່ພຽງພໍທີ່ຈະຊ່ວຍປະຢັດຮ້ານຄ້າຈາກຂະບວນການເຮັດວຽກຮູບພາບທີ່ບໍ່ດີສະເໝີໄປ.

ເປົ້າໝາຍຂະໜາດບໍ່ແມ່ນແບບສຸ່ມ

ຄຳແນະນຳດ້ານເຕັກນິກສຳລັບການຈັດສົ່ງເວັບມັກຈະຮຽກຮ້ອງໃຫ້ມີຮູບພາບຜະລິດຕະພັນປະມານ 800 ຫາ 1000 ພິກເຊວ ແລະ 80 ຫາ 150 KB , ຮູບພາບ hero ຕໍ່າກວ່າ 200 KB , ແລະ ງົບປະມານຮູບພາບໜ້າທັງໝົດຕໍ່າກວ່າ 500 KB . ຄຳແນະນຳດຽວກັນນີ້ມັກຈະວາງ ຮູບພາບ JPEG ປະມານ 200 ຫາ 600 KB , WebP ຢູ່ທີ່ 150 ຫາ 450 KB , AVIF ຢູ່ທີ່ 80 ຫາ 300 KB , ແລະ PNG ຢູ່ທີ່ 500 KB ຫາ 3 MB ( Vizua ). ຂອບເຂດເຫຼົ່ານັ້ນມີຢູ່ເພາະວ່ານ້ຳໜັກຮູບພາບ ແລະ ປະສິດທິພາບຂອງໜ້າແມ່ນເຊື່ອມໂຍງເຂົ້າກັນ.

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

ສຳລັບມຸມມອງທີ່ສຸມໃສ່ Shopify ກ່ຽວກັບຂະບວນການກວດສອບທີ່ກວ້າງຂວາງ, ຄູ່ມື SEO ຮູບພາບນີ້ສຳລັບ Shopify ແມ່ນຈຸດອ້າງອີງທີ່ເປັນປະໂຫຍດ.

ຂະໜາດໄຟລ໌ຮູບພາບເປົ້າໝາຍໂດຍ Shopify Placement

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

ໃຫ້ຮູບແບບໜ້າຮ້ານກຳນົດຕົວເລືອກການສົ່ງອອກຂອງທ່ານ

ຮູບພາບທີ່ມີຄວາມກວ້າງເຕັມປົກກະຕິແລ້ວຕ້ອງການພື້ນທີ່ຫຼາຍກວ່າບລັອກຮູບແບບຂະໜາດນ້ອຍ. ການແນະນຳຮູບພາບທີ່ຕອບສະໜອງມັກຈະຊີ້ບອກເຖິງຮູບພາບທີ່ມີຄວາມກວ້າງເຕັມປະມານ 1600 px ແລະ 200 ຫາ 300 KB , ຮູບພາບຮູບແບບຂະໜາດນ້ອຍກວ່າ 25% ຫາ 50% ໃກ້ຄຽງກັບ 800 px ແລະ 70 ຫາ 350 KB , ແລະ ຮູບພາບທີ່ມີຂະໜາດປະມານ 2 ເທົ່າ ຂອງພື້ນທີ່ສະແດງຜົນ ດັ່ງນັ້ນພວກມັນຍັງເບິ່ງຄົມຊັດໃນໜ້າຈໍທີ່ມີຄວາມໜາແໜ້ນສູງ. ໃນທາງປະຕິບັດ, ນັ້ນໝາຍຄວາມວ່າຮູບພາບແຫຼ່ງດຽວກັນມັກຈະຕ້ອງການການສົ່ງອອກທີ່ແຕກຕ່າງກັນ, ອັນໜຶ່ງສຳລັບຊ່ອງທີ່ມັນເຕັມ ແລະ ອີກອັນໜຶ່ງສຳລັບຄວາມຄົມຊັດກວ່າທີ່ໜ້າຈໍທີ່ມີຄວາມໜາແໜ້ນຄາດຫວັງ.

ເປົ້າໝາຍຂະໜາດໄຟລ໌ຮູບພາບໂດຍ Shopify Placement ຕຳແໜ່ງ ຄວາມກວ້າງຂອງເປົ້າໝາຍ ຂະໜາດໄຟລ໌ເປົ້າໝາຍ ຮູບແບບທີ່ແນະນຳ
ປ້າຍໂຄສະນາວິລະບຸລຸດ ວິລະບຸລຸດອັນດັບຕົ້ນໆຂອງໜ້າ ປະມານ 1600 ພິກເຊວ 200 ຫາ 300 KB JPEG ຫຼື WebP
ຮູບຕົວຢ່າງຕາຂ່າຍຄໍເລັກຊັນ ກະເບື້ອງຄໍເລັກຊັນ ປະມານ 400 ຫາ 600 ພິກເຊວ 40 ຫາ 80 KB JPEG ຫຼື WebP
ຮູບພາບໜ້າຜະລິດຕະພັນ ຫ້ອງສະແດງຜະລິດຕະພັນຫຼັກ ປະມານ 800 ຫາ 1200 ພິກເຊວ 100 ຫາ 200 KB JPEG, WebP, ຫຼື AVIF
ຮູບພາບຕົວຢ່າງ ຫຼື ຮູບພາບຕົວຢ່າງ ຊ່ອງຮອງຮັບຂະໜາດນ້ອຍ ປະມານ 200 ຫາ 400 ພິກເຊວ ຮັກສາໃຫ້ເບົາທີ່ສຸດເທົ່າທີ່ຈະເປັນໄປໄດ້ JPEG ຫຼື PNG, ຂຶ້ນກັບເນື້ອຫາ

ຮູບພາບ hero ສາມາດມີນ້ຳໜັກຫຼາຍກວ່າເພາະມັນເຕັມ viewport ຫຼາຍກວ່າ. tile collection ບໍ່ສາມາດເຮັດໄດ້. ນັ້ນແມ່ນຄວາມແຕກຕ່າງທີ່ຮ້ານຄ້າຕ້ອງຈື່ໄວ້ເມື່ອພວກເຂົາສົ່ງອອກຮູບພາບສຳລັບພາກສ່ວນ Shopify, ເພາະວ່າຂະໜາດໄຟລ໌ຄວນຈະກົງກັບພື້ນທີ່ທີ່ຮູບພາບໃຊ້ໃນໜ້າເວັບ.

ເປັນຫຍັງຮູບພາບດຽວກັນອາດຈະຕ້ອງການການສົ່ງອອກຫຼາຍກວ່າໜຶ່ງຄັ້ງ

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

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

ກົດລະບຽບທົ່ວໄປຂອງ Shopify: ໃຫ້ຊ່ອງຕັດສິນໃຈສົ່ງອອກ. ວິລະບຸລຸດສາມາດມີນ້ຳໃຈໄດ້ ແຕ່ຮູບຫຍໍ້ຂອງຕາຂ່າຍໄຟຟ້າບໍ່ສາມາດເປັນໄດ້.

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

ຄວາມເຂົ້າໃຈຜິດທົ່ວໄປທີ່ເຮັດໃຫ້ຮ້ານຄ້າຊ້າ

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

ຫ້າຄວາມເຊື່ອທີ່ເຮັດໃຫ້ອາການທ້ອງອືດຫຼີກລ່ຽງໄດ້

  • ຄວາມລະອຽດທີ່ສູງຂຶ້ນໝາຍເຖິງຄຸນນະພາບທີ່ດີກວ່າສະເໝີ. ແຕ່ສິ່ງນັ້ນຈະໝົດໄປເມື່ອຮູບພາບໃຫຍ່ກວ່າພື້ນທີ່ທີ່ມັນເຕັມໄປແລ້ວ. ພິກເຊວເພີ່ມເຕີມບໍ່ໄດ້ເຮັດຫຍັງໃຫ້ກັບມຸມມອງຂອງຜູ້ຊື້ເລີຍ, ພວກມັນພຽງແຕ່ເພີ່ມນ້ຳໜັກເທົ່ານັ້ນ.
  • PNG ມີຄວາມຄົມຊັດກວ່າ JPEG ສະເໝີ. PNG ເປັນທາງເລືອກທີ່ເໝາະສົມສຳລັບໂລໂກ້ ແລະ ຮູບພາບທີ່ມີຂອບແຂງ, ແຕ່ຮູບພາບຜະລິດຕະພັນໂດຍປົກກະຕິແລ້ວບໍ່ຕ້ອງການພື້ນທີ່ຈັດເກັບຂໍ້ມູນທີ່ບໍ່ມີການສູນເສຍຂໍ້ມູນ.
  • Shopify ຈະປັບປຸງທຸກຢ່າງໃຫ້ດີທີ່ສຸດໂດຍອັດຕະໂນມັດ. Shopify ຊ່ວຍໄດ້ໃນບາງກໍລະນີ, ແຕ່ການອັບໂຫຼດຕົ້ນສະບັບຍັງກຳນົດເພດານນ້ຳໜັກຂອງຊັບສິນໄວ້.
  • WebP ສົ່ງຜົນກະທົບຕໍ່ SEO ເພາະວ່າ Google ບໍ່ສາມາດອ່ານມັນໄດ້. ຄວາມເຊື່ອນັ້ນລ້າສະໄໝແລ້ວ. ລະບົບຄົ້ນຫາສາມາດສະແດງຮູບແບບທີ່ທັນສະໄໝໄດ້ຄືກັບຮູບພາບທຳມະດາ.
  • ຂະໜາດຮູບພາບມີຄວາມສຳຄັນພຽງແຕ່ໃນຄອມພິວເຕີຕັ້ງໂຕະເທົ່ານັ້ນ. ຜູ້ຊື້ຜ່ານມືຖືຮູ້ສຶກວ່າມີນ້ຳໜັກໄຟລ໌ທີ່ບໍ່ຈຳເປັນກ່ອນ, ເພາະວ່າອຸປະກອນ ແລະ ການເຊື່ອມຕໍ່ຂອງເຂົາເຈົ້າມີພື້ນທີ່ໜ້ອຍສຳລັບຄວາມຜິດພາດ.

ພໍ່ຄ້າແກ້ໄຂສາມາດໃຊ້ໄດ້ທັນທີ

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

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

ດັ່ງທີ່ໄດ້ກ່າວເຖິງໃນພາກຄວາມລະອຽດ, ຮູບພາບ 24MP ສາມາດລົງໄປໄດ້ທຸກບ່ອນຕັ້ງແຕ່ 2 ຫາ 8 MB ຫຼັງຈາກການບີບອັດ, ເຊິ່ງພຽງພໍທີ່ຈະສະແດງວ່າເປັນຫຍັງຈຳນວນພິກເຊວພຽງຢ່າງດຽວບໍ່ໄດ້ບອກທ່ານວ່າຮູບພາບນັ້ນພ້ອມທີ່ຈະໃຊ້ງານໃນເວັບຫຼືບໍ່. ຄຳຖາມຫຼັກແມ່ນວ່າໄຟລ໌ກົງກັບຕຳແໜ່ງ Shopify ທີ່ມັນໃຫ້ບໍລິການຫຼືບໍ່. hero ສາມາດທົນທານຕໍ່ຫຼາຍກວ່າບັດ grid, ແລະຮູບພາບ zoom ສາມາດທົນທານຕໍ່ຫຼາຍກວ່າຮູບຫຍໍ້. ການສົ່ງອອກຕ້ອງເໝາະສົມກັບບົດບາດ.

ຄວາມຜິດພາດທີ່ກ່ຽວຂ້ອງແມ່ນການສົມມຸດວ່າທຸກໆຊັບສິນສົມຄວນໄດ້ຮັບການເຮັດຄວາມສະອາດ metadata ຄືກັນ. ຖ້າຮູບພາບມີຄວາມສຳຄັນພຽງພໍທີ່ຈະສະແດງ, ມັນມີຄວາມສຳຄັນພຽງພໍທີ່ຈະກວດສອບກ່ອນ. ໃຊ້ ຕົວສ້າງຂໍ້ຄວາມ alt ສຳລັບຮູບພາບ Shopify ເພື່ອຮັກສາສ່ວນນັ້ນຂອງຂະບວນການເຮັດວຽກໃຫ້ສອດຄ່ອງ, ຈາກນັ້ນຕັດສິນຂະໜາດໄຟລ໌ທຽບກັບຊ່ອງທີ່ມັນຈະເຕັມ.

ນັ້ນແມ່ນສ່ວນທີ່ຮ້ານຄ້າສ່ວນໃຫຍ່ພາດ. ໄຟລ໌ບໍ່ຈຳເປັນຕ້ອງນ້ອຍ. ມັນຕ້ອງເໝາະສົມ.

ບັນຊີກວດສອບທີ່ເຮັດຊ້ຳໄດ້ສຳລັບຊຸດຮູບພາບຕໍ່ໄປຂອງທ່ານ

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

ຂັ້ນຕອນການສົ່ງອອກແບບງ່າຍໆທີ່ເໝາະສົມກັບ Shopify

  1. ສົ່ງອອກຕາມຄວາມກວ້າງເປົ້າໝາຍສຳລັບການຈັດວາງ. ແຕ່ລະ hero, ບັດຄໍເລັກຊັນ, ຮູບພາບຊູມຜະລິດຕະພັນ, ແລະຮູບຫຍໍ້ມີໜ້າວຽກທີ່ແຕກຕ່າງກັນ, ສະນັ້ນຢ່າອັບໂຫລດໄຟລ໌ຂະໜາດໃຫຍ່ກວ່າພຽງແຕ່ຍ້ອນວ່າຮູບພາບຕົ້ນສະບັບອະນຸຍາດ.
  2. ເລືອກຮູບແບບຕາມບົດບາດ. ຮູບພາບມັກຈະພໍດີກັບ JPEG, WebP, ຫຼື AVIF. ໂລໂກ້ ແລະ ຮູບພາບທີ່ມີຂໍ້ຄວາມຫຼາຍຈະພໍດີກັບ PNG ດີກວ່າເມື່ອຄວາມໂປ່ງໃສ ຫຼື ຂອບທີ່ຄົມຊັດມີຄວາມສຳຄັນ.
  3. ບັນທຶກເວີຊັນຮ້ານຄ້າສົດ ແລະ ເວີຊັນຊູມຖ້າຈຳເປັນ. ໄຟລ໌ຊູມສາມາດເກັບຮັກສາລາຍລະອຽດໄດ້ຫຼາຍຂຶ້ນ, ແຕ່ໜ້າທີ່ເບິ່ງເຫັນບໍ່ຄວນມີນ້ຳໜັກນັ້ນ ເວັ້ນເສຍແຕ່ວ່າຮູບແບບຕ້ອງການມັນແທ້ໆ.
  4. ໃຫ້ໃຊ້ຮູບແບບທີ່ທັນສະໄໝທີ່ເບົາກວ່າເມື່ອເປັນໄປໄດ້. ໃຊ້ WebP ຫຼື AVIF ສຳລັບຮູບພາບສົດ, ແລະ ຮັກສາ JPEG ເປັນຕົວເລືອກສຳຮອງບ່ອນທີ່ຄວາມເຂົ້າກັນໄດ້ມີຄວາມສຳຄັນ.
  5. ກວດສອບ metadata ຮູບພາບ ແລະ ຂໍ້ຄວາມ alt ກ່ອນທີ່ຈະເຜີຍແຜ່. ຖ້າຊັບສິນມີຄວາມສຳຄັນພຽງພໍທີ່ຈະສະແດງ, ມັນກໍ່ມີຄວາມສຳຄັນພຽງພໍທີ່ຈະກວດສອບ. ໃຊ້ ຕົວສ້າງຂໍ້ຄວາມ alt ຂອງ RankEngine ເພື່ອຮັກສາສ່ວນນັ້ນຂອງຂະບວນການເຮັດວຽກໃຫ້ສອດຄ່ອງກັນ.

ພາບໜ້າຈໍຈາກ https://rankengine.app

ຄວາມສອດຄ່ອງອັນໃດທີ່ຊື້ເຈົ້າໄດ້

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

ຖ້າທີມງານຂອງທ່ານຈັດການກັບ metadata ຮູບພາບໃນຂອບເຂດກ້ວາງຂວາງ, ຕົວສ້າງຂໍ້ຄວາມ alt ຂອງ RankEngine ສາມາດເຮັດໃຫ້ສ່ວນນັ້ນຂອງຂະບວນການເຮັດວຽກດຳເນີນຕໍ່ໄປໂດຍບໍ່ຕ້ອງປ່ຽນການອັບໂຫຼດແຕ່ລະຄັ້ງໃຫ້ກາຍເປັນວຽກທີ່ຕ້ອງເຮັດດ້ວຍຕົນເອງ.

ນຳໃຊ້ວິທີການນີ້ກັບຊຸດຕໍ່ໄປຂອງທ່ານ, ແລະ ໜ້າຮ້ານຂອງທ່ານຈະໂຫຼດໄວຂຶ້ນທັນທີ.