Mga Laki ng Larawan sa Shopify

Gamitin ang 2048 x 2048 pixels bilang iyong Shopify master at panatilihing mas mababa sa 500 KB ang bawat naihahatid na file. Pinapayagan ng Shopify ang mga larawang hanggang 20 MB at 4472 pixels square, ngunit inilalarawan ng mga numerong iyon ang kaya lamang tiisin ng platform kaysa sa kung ano ang kailangan ng isang mabilis na storefront.

Ang 20 MB na numero ang madalas binabanggit ng karamihan ng mga gabay, at ito ang maling batayan sa pagdidisenyo. Magkaiba ang pinapayagan ng Shopify sa kung ano ang binibigyan nito ng gantimpala. Ang isang page ng produkto na may 8 larawan na 3 MB bawat isa ay may kabuuang 24 MB, at umaalis ang mga mobile shopper bago pa ito matapos mag-load.

Mga laki ng larawan sa Shopify ayon sa paglalagyan

Dapat ay parisukat ang mga larawan ng produkto sa 2048 pixels, habang ang mga banner, collection tile, at logo ay nangangailangan ng kani-kanilang sariling sukat. Ang paggamit ng iisang laki sa lahat ng dako ay nagdudulot ng mga banat na banner at tabas na mga larawan ng koleksyon.

Iba-iba ang paraan ng pagtabas ng mga tema sa mga larawan, at ang isang banner na mukhang maayos sa desktop preview ay madalas na nahahati sa gitna kapag tiningnan sa telepono. Panatilihin ang mahalagang bahagi ng banner sa gitnang 60 porsyento upang walang temang makatabas nito.

Bakit 500 KB ang numerong mahalaga

Ang kabuuang bigat ng page ang nagtatakda kung gaano kabilis mag-load ang isang storefront, at ang mga larawan ang bumubuo sa karamihan ng bigat na iyon sa isang karaniwang page ng produkto. Ang isang page na mas mababa sa 2 MB sa kabuuan ay madaling naglo-load sa mobile data, habang ang isang 24 MB na page ay hindi.

Ang mga mamimili gamit ang telepono ang bumubuo sa karamihan ng trapiko para sa karamihan ng mga tindahan, at ang mga mobile connection ay higit na nagbabago kaysa sa office broadband. Bawat segundo ng oras ng pag-load ay nagpapababa ng benta, kaya ang bigat ng larawan ay usapin ng kita sa halip na teknikal lamang. Ang pagbawas ng 8 larawan ng produkto mula 3 MB patungong 300 KB ay nag-aalis ng 21 MB sa page nang walang anumang nakikitang pagbabago sa paningin ng mamimili.

Nagko-compress ba ang Shopify ng mga larawan para sa iyo

Naghahatid ang Shopify ng mga binagong laki ng bersyon sa pamamagitan ng content delivery network (CDN) nito at awtomatikong nagko-convert sa WebP para sa mga sumusuportang browser. Maayos ang ginagawa ng platform, at nagpoproseso ito mula sa anumang i-upload mo.

Ang huling punto na iyon ang limitasyon. Gumagawa ang Shopify ng mas maliliit na bersyon mula sa iyong orihinal, kaya ang isang hindi maayos na na-compress na 5 MB na upload ay lumilikha ng mas malalaking bersyon kumpara sa isang maayos na inihandang 400 KB na upload. Ang pag-compress bago mag-upload ay nagpapababa rin ng sarili mong konsumo sa imbakan at ginagawang mas mabilis ang maramihang pag-import, dahil ang pag-import ng 500 produkto ay naglilipat lamang ng 200 MB sa halip na 2.5 GB.

Paano maghanda ng mga larawan para sa Shopify

Upang makagawa ng mabilis na page ng produkto, sundin ang 6 na hakbang na ito.

1. Mag-export ng parisukat na master sa 2048 x 2048 pixels mula sa iyong photo editor.
2. Baguhin ang laki ng anumang banner o lifestyle na larawan sa aktwal nitong display width, na dinoble para sa mga high density screen.
3. I-convert ang mga litrato sa WebP, o panatilihin ang JPG kung kailangan sa iyong workflow, dahil nagko-convert pa rin ang Shopify sa alinmang paraan.
4. I-compress sa isang target na laki, gamit ang 300 KB para sa mga larawan ng produkto at 400 KB para sa mga banner.
5. Pangalanan ang mga file ayon sa product code at view upang maiugnay nang tama ng maramihang CSV import ang mga larawan sa mga tamang produkto.
6. I-upload at suriin ang page ng produkto sa isang telepono sa halip na sa desktop preview lamang.

WebP sa Shopify

Ilang taon nang katutubong naghahatid ang Shopify ng WebP at awtomatikong nagko-convert ng mga na-upload na JPG at PNG file para sa mga browser na sumusuporta rito. Tinatanggap ang direktang pag-upload ng WebP at nagbibigay ito sa iyo ng kontrol sa compression sa halip na ipaubaya ito sa platform.

Naaabot ng WebP ang parehong visual quality gaya ng JPG sa 25 hanggang 35 porsyentong mas maliliit na laki ng file, na napakahalaga para sa isang page na naglalaman ng 8 litrato. Ang tanging dapat iwasan ay ang pag-upload ng WebP kung saan ang file ay idada-download sa kalaunan ng isang supplier o ipapadala sa isang print shop, dahil umaasa pa rin ang mga iyon sa JPG.

Pag-aayos ng mabagal na page ng produkto

Magsimula sa pinakamalaking larawan sa page, dahil ang pinakamalaking solong file ang karaniwang may pananagutan sa karamihan ng pagkaantala. Sa isang Shopify storefront, karaniwan itong ang banner sa homepage o ang unang litrato ng produkto.

• Baguhin ang laki bago mag-compress. Ang isang 4000 pixel na banner sa isang 1920 pixel na puwang ay nag-aaksaya ng 75 porsyento ng data nito.
• Bawasan ang bilang ng mga larawan sa itaas ng fold. Ang isang gallery ng 12 larawan na sabay-sabay na naglo-load ay nagpapaantala sa lahat ng iba pa.
• Tiyaking naka-on ang lazy loading para sa mga larawang nasa ibaba ng fold, na pinangangasiwaan na bilang default ng karamihan ng mga modernong tema.
• Palitan ang mga animated na GIF file ng video, dahil ang isang maikling GIF ay madalas na mas mabigat kaysa sa buong natitirang bahagi ng page.
• Suriin ang mga app. Ang mga review widget, popup, at trust badge ay madalas na naglo-load ng sarili nilang mga larawan at script.

Alt text at mga pangalan ng image file

Sumulat ng alt text na naglalarawan sa produkto para sa mga mamimiling gumagamit ng mga screen reader, at pangalanan ang mga file ayon sa produkto sa halip na ayon sa camera. Ang isang file na may pangalang IMG_4821.jpg ay walang sinasabi sa mga search engine at mamimili.

Gumamit ng pattern tulad ng navy-linen-shirt-front.jpg, na nananatiling nababasa sa isang bulk import, maayos na napagbubukod-bukod sa isang folder, at naglalarawan sa imahe sa mga resulta ng paghahanap. Dapat sabihin ng alt text kung ano ang ipinapakita ng litrato, kabilang ang kulay, materyal, at anggulo, nang hindi inuulit ang pamagat ng produkto sa bawat salita. Ilang segundo lamang ang kailangan ng parehong field bawat produkto at pinapaganda nito ang hitsura ng tindahan sa paghahanap ng larawan.

Pagsubok sa mga pagbabago bago ilabas ang mga ito

Iproseso muna ang 5 produkto, i-publish ang mga ito, at suriin ang mga page sa isang totoong telepono bago patakbuhin ang buong katalogo. Ang isang pagkakamali sa setting na nailapat sa 500 produkto ay nangangailangan ng higit na maraming oras upang bawiin kaysa sa pigilan.

Suriin ang 3 bagay sa mga pansubok na produkto. Kumpirmahing mukhang matalas ang mga larawan sa buong zoom, dahil madalas gamitin ng mga mamimili ang zoom sa mga damit at alahas. Kumpirmahing pare-pareho ang pagkakagupit sa grid ng koleksyon. Kumpirmahing mabilis mag-load ang page sa mobile data sa halip na sa office broadband lamang. Saka lamang ilapat ang parehong mga setting sa lahat ng iba pa.

Mga image app laban sa paggawa nito bago mag-upload

Naniningil buwan-buwan ang mga compression app para lutasin ang isang problemang maaari mong lutasin nang isang beses bago mag-upload. Kapaki-pakinabang ang mga app kapag ang isang tindahan ay patuloy na tumatanggap ng mga bagong larawan mula sa maraming tao at walang namamahala sa kung ano ang nai-upload.

Ang isang tindahan na may matatag na katalogo at may isang taong namamahala sa mga larawan ay hindi nangangailangan ng paulit-ulit na bayarin. Ang pag-compress sa library nang isang beses at pag-compress ng mga bagong litrato habang dumarating ang mga ito ay nagbibigay ng parehong resulta. Pag-isipan itong muli kapag lumaki na ang katalogo nang higit sa kaya mong iproseso nang manu-mano, o kapag maraming tauhan ang nag-a-upload ng mga larawan nang hindi sumusunod sa isang detalye.

Mga karaniwang pagkakamali sa larawan sa Shopify

Ang pag-upload nang direkta mula sa camera ang pinakamagastos na pagkakamali, dahil ang isang 24 megapixel na litrato ay naglalaman ng 10 beses na mas maraming data kaysa sa kayang ipakita ng isang storefront. Tinatanggap ng platform ang file, at ang page ang nagbabayad para dito.

Dalawa pang pagkakamali ang regular na lumilitaw. Ang paghahalo-halo ng mga hugis ng larawan sa isang koleksyon ay nagdudulot ng hindi pantay na grid, dahil pinuputol ng mga tema ang mga ito bilang parisukat at nawawala ang itaas at ibaba ng isang portrait na litrato. Ang paggamit ng PNG para sa mga litrato ng produkto ay nagpapalaki sa laki ng file nang 3 hanggang 5 beses nang walang nakikitang pakinabang, dahil iniimbak ng PNG ang bawat pixel nang eksakto at ang isang litrato ay walang mga patag na bahagi upang pakinabangan.

Pagpapanatili ng pare-parehong katalogo

Iproseso ang buong katalogo sa isang batch upang ang bawat litrato ng produkto ay magkaroon ng parehong sukat, compression, at kuwadro. Napapansin ng mga mamimiling naghahambing ng mga produkto ang hindi pagkakatugma kahit na hindi nila ito mapangalanan.

Nakatutulong din ang pagiging pare-pareho sa grid ng koleksyon, kung saan ang mga larawang may magkakatugmang hugis at liwanag ay nababasa bilang isang maingat na idinisenyong page sa halip na basta pinagsama-sama. Itakda ang mga sukat at ang target na laki nang isang beses, pagkatapos ay ilapat ang mga ito sa bawat file sa halip na isa-isahing ayusin ang bawat produkto.

Pagproseso ng katalogo sa isang pasada

Maglagay ng hanggang 500 larawan nang sabay-sabay, o mag-drag ng ZIP archive nang direkta mula sa iyong photographer, at ang bawat file ay babalik nang nabago ang laki at na-compress sa parehong detalye. Ang isang katalogo na dating inaabot ng isang buong hapon sa desktop software ay natatapos na sa loob ng ilang minuto.

Lahat ay tumatakbo sa loob ng iyong browser sa sarili mong processor, kaya ang mga hindi pa nailalabas na produkto, mga pana-panahong campaign shot, at litrato mula sa supplier ay hindi kailanman umaabot sa isang server. Para sa isang tindahang naghahanda ng paglulunsad sa ilalim ng embargo, ang pagpapanatili sa mga file sa lokal na kagamitan ang nagiging pagkakaiba sa pagitan ng isang kontroladong anunsyo at ng isang pagtagas, at wala itong dagdag na bayad.