iT邦幫忙

1

電商商品照的建議做法?

我這邊的功能是
會有個前端後台可以上傳商品及多張照片 (一個商品綁定多個照片)
前端會顯示商品列表
於是我參考 zara 的作法
https://www.zara.com/tw/en/kids-boy-tshirts-l286.html?v1=1310655
仔細研究後發現真的是另一門學問....

他列表照片會根據螢幕放大縮小
所以他並沒有鎖定照片的"高度"?
因此必須在上傳照片時就必須先聲明寬度多少高度多少? (他列表每張照片"原始圖"都是一樣寬高的)
要不就是裁切,要不就是直接檢查照片寬高?
我不清楚這是不是它們的真正作法...強制裁切這應該有點困難?

一張照片應該至少會有多種SIZE?
給手機看的、前端後台看的、電腦版看的、列表看的....這應該是必須要做的事?

  1. 我是使用PHP GD庫將照片按照比例裁切成我要的寬度,例如假設照片超過1000寬,則都以1000寬為主,把照片直接縮圖成1000寬,高度就自行依照比例,JPG壓縮品質是100,PNG則是(0, 不壓縮) 但好像還是會有一點模糊?
    或是一開始GD庫拿原圖前就要先將原圖壓縮? 用webp?

主要還是沒辦法控制客戶怎麼上傳,上傳的照片是否符合比例...假設照zara作法前端不鎖定照片高度然後直接排列,這可能是場災難?
懇請電商大師指教....感謝

froce iT邦大師 1 級 ‧ 2019-07-08 08:10:00 檢舉
1.你在上傳時就該先檢查圖片大小,太小告訴他解析度太小無法上傳,太大就自己resize。
2.如果是yahoo拍賣這樣的開放給人上傳的,你可以用前端去做crop的動作。
火爆浪子 iT邦研究生 1 級 ‧ 2019-07-09 11:45:58 檢舉
第一步本身就有做,跟你敘述的一樣
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
3
dragonH
iT邦超人 5 級 ‧ 2019-07-08 10:27:04
最佳解答

1 .

不過稍微提一下

在圖片 request url 中的 .../w/(value)/...

修改此處的 vaule

會回傳不同解析度的圖片

e.g.

https://static.zara.net/photos///2019/I/0/3/p/3860/782/400/2/w/1920/3860782400_1_1_1.jpg?ts=1559719973394

1920

https://static.zara.net/photos///2019/I/0/3/p/3860/782/400/2/w/720/3860782400_1_1_1.jpg?ts=1559719973394

720

2 .

一般情況

基本的 bootstrap grid rwd 就有不錯的效果

codepen

3 .

沒用過這 module

不過基本上你的問題應該跟圖片格式沒啥關係


我是覺得你要參考的話

也應該拿 shopee 這種 C2C 的網站來參考

ZARA 看起來是屬於 B2C

搞不好你想破頭的圖片裁切問題

zara 其實是靠他們的美術來產出不同解析度的商品圖片

根本不是靠程式裁切

看更多先前的回應...收起先前的回應...
froce iT邦大師 1 級 ‧ 2019-07-08 11:16:28 檢舉

嗯,通常這種大公司都有專門商攝。
拍出來、後製什麼都有一定的規範。

上傳的相片解析度太小比較難搞,太大上傳後自己用後端resize應該不難。
甚至你可以在前端crop、resize,剩下就是RWD而已。

dragonH iT邦超人 5 級 ‧ 2019-07-08 11:57:22 檢舉

對呀

與其這樣還不如去參考真正的 C2C 平台

看他們對 User 所上傳的商品圖片

是否有什麼限制/images/emoticon/emoticon33.gif

froce iT邦大師 1 級 ‧ 2019-07-08 13:28:11 檢舉

然後不同解析度通常是用程式作啦,應該都是拍好照裁切好,到後端的時候編號,產生不同解析度的縮圖,然後進資料庫記錄。

bootstrap真的太方便了

1
小魚
iT邦大師 1 級 ‧ 2019-07-08 07:49:22

既然原圖都是一樣"大小",
那也許在上傳的時候就有限制了,
或是用一些方法把所有圖片轉成一樣大小,
(但若比例不對會變形, 通常應該是規定上傳的大小)

另外大小會變並不是"不設定寬高",
RWD本身就可以做到這件事.

看更多先前的回應...收起先前的回應...
froce iT邦大師 1 級 ‧ 2019-07-08 08:34:01 檢舉

我真的覺得原PO應該去充實一下基礎。
只會做後端不要接案,除非你有配合的前端。
問題是看他問的問題...感覺後端也不到位。

小魚 iT邦大師 1 級 ‧ 2019-07-08 10:13:57 檢舉

不過比之前進步多了,
不像某位A開頭的仁兄,
好幾年了還在原地打轉,
不過建議如果要做這個還是要先去業界上班,
你現在的程度大概就是比入門好一些些,
但還是沒辦法獨立做一個專案的程度吧,
算是初學者的程度,
如果單純自學應該很多年以後還是會停在初學者的程度.

火爆浪子 iT邦研究生 1 級 ‧ 2019-07-09 11:44:42 檢舉

不瞞大家說我倒是做了不少專案,但都不是接案,都是跟友人一起搞的產品,發想和實現。真的學了不少耶XD

小魚 iT邦大師 1 級 ‧ 2019-07-09 18:05:53 檢舉

自己免費玩的,
和要跟人家收費的,
那是完全不同的概念.

邏輯嚴謹是一個,
光是前端UI都挑三揀四的,
很多細節都要注意,
然後還要注意使用者體驗等等,
現在還很多無障礙的規章.
(無障礙我倒是還沒機會做)

1
andy99
iT邦新手 5 級 ‧ 2019-07-09 09:54:17

其實主要這種圖片都是使用套件來作處理,本身是使用c#, php需要另外找
如open source 的imageprocessor
https://imageprocessor.org/
https://imageprocessor.org/imageprocessor-web/imageprocessingmodule/resize/
原則上原圖上傳可以不限制尺寸大小甚至於圖片規格jpg, png ...常見都可以
前端在顯示時,只要於圖片後面加上參數即可達到即時的調整尺寸,甚至可以加上各式效果濾鏡
https://imageprocessor.org/imageprocessor-web/imageprocessingmodule/resize/
https://imageprocessor.org/imageprocessor-web/imageprocessingmodule/pixelate/
再搭配css的srcset , 就可以自適應不同的尺寸大小來動態處理圖片。

這種也可以單獨架為一個圖床,獨立一個服務器,前端需要時圖片都向他取得顯示即可。
所有圖片都是直接即時動態後端裁切至最適大小,不會浪費流量,且後端有cache機制,相同圖片相同尺寸參數不會重覆裁切,性能也不受影響。

火爆浪子 iT邦研究生 1 級 ‧ 2019-07-09 11:45:13 檢舉

有看過 srcset ,原來是CSS的

andy99 iT邦新手 5 級 ‧ 2019-07-12 15:38:33 檢舉

srcset 並不是css的內容,應該是html img tag的新屬性,這幾年主流瀏覽器才都有支援。

我要發表回答

立即登入回答