iT邦幫忙

1

請問購物車網頁上的圖片大小要多少才行??解析度??

  • 分享至 

  • xImage

請問購物車網頁上的商品圖片尺寸大小要多少才行??
解析度??才能達到速度與美觀的平衡??
還是說一張圖要有大圖跟小圖

player iT邦大師 1 級 ‧ 2019-11-13 16:21:06 檢舉
如果圖檔與購物網站是在同一台上的話
通常是降解析度或是降低圖檔品質到瀏覽者可接受的範圍內
如果不是放在同一台上的話
可以考慮用CDN把圖檔放在外部的雲端上(流量大的話, 通常得花錢租用)

通常購物網站上的商品圖檔是上傳前
先統一固定Size的, 避免版面被破壞掉(圖檔忽大忽小, 造成瀏覽者感覺不愉快)
一種是讓USER去固定圖片尺寸,一種是靠CSS去自動調整,哪種方式好看有緣無緣另外,USER上傳一張高解析的照片,後台就應該自動去切不同解析度的照片來填入前台所需的位置,這樣才能提高頁面載入速度,這都要看網站開發者的功力
如果沒辦法寫出人性的設計,那就是教育USER去滿足系統的需求
thwu iT邦新手 4 級 ‧ 2019-11-14 09:03:36 檢舉
>USER上傳一張高解析的照片,後台就應該自動去切不同解析度的照片來填入前台所需的位置
小弟也認為這樣很棒,但目前接觸的EC平台都沒有這樣的功能....囧
不然很想去看一下它的 UI, UX 設計,偷學一下
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
阿展展展
iT邦好手 1 級 ‧ 2019-11-13 05:59:12

1.你懂什麼叫做購物車嗎
2.你懂什麼叫做縮圖嗎
3.你有辦法制定規範嗎
4.你會用CSS嗎
5.你有美感嗎
6.你還要我繼續問下去嗎

看更多先前的回應...收起先前的回應...
小魚 iT邦大師 1 級 ‧ 2019-11-13 08:01:39 檢舉

大人息怒.

/images/emoticon/emoticon40.gif

哈!!你是不是搞錯的問題方向

甲土豆 iT邦新手 5 級 ‧ 2019-11-14 09:37:45 檢舉

我同意 阿展展展 的回復
什麼叫
1.購物車網頁上的商品圖片尺寸大小要多少才行??
2.解析度??
3.才能達到速度與美觀的平衡??
請問一下你懂禮貌嗎?你問這些問題,是我指派你工作的嗎??

PPTaiwan iT邦好手 1 級 ‧ 2019-11-14 10:49:13 檢舉

阿展展展 >>> 網上回應別人可以針對問題去回應,你覺得這個問題很爛都不懂,那就可以別回答,免得被認為什麼人回了廢話...

2
小魚
iT邦大師 1 級 ‧ 2019-11-13 08:02:09

請先學四則運算,
再來考慮微積分.

不要還不會走就想飛了.
怕你跟某A一樣問了十年還在問同樣的問題...

3

認真來說,你光問這樣的問題。
你就已經不適合當開發者了。
不過我還是認真回答一下你的問題。

請問購物車網頁上的商品圖片尺寸大小要多少才行??
隨你高興,你要客戶能接受都行。我個人的經驗是大到4000x4000,小到50x50。都有過。
沒有一定的標準,只要客戶能接受就好。

解析度??才能達到速度與美觀的平衡??
這沒有標準答案。

還是說一張圖要有大圖跟小圖?
這也沒有標準答案。可以說要,也可以說不需要。


所以綜合以上給你的答案。你問這樣的問題只是來討罵的。

不雅的話,為免像要逃離責任。我就將其用刪除線處理
以下則說明一下。

一般來說得要依佈局及框架來論,依其性質不同其實會有不同的規劃標準。
一般會先依基本畫面原則取其顯示板型先優先規劃而定。
大多數來說。先決定橫式要一行幾格來判斷。大多數會選在4~6之間的數量。有極少的可能性會選在3以下。
再來才是決定依橫式排法居多還是直式排法居多。這部份就是我說的標準不一的原因。
正常直式顯示,會將其寬度列為小一點。所以大多數會選取顯示6格最大值。
但6格也並不是通用的。因為一般會選6格的原因是。大多數都不是全屏的表現。

所以直接常用的比例會抓1:2或2:3之間。也就是寬200px高就會400px(1:2)或是寬200px高就是300px不等的比例分配。

再來圖片其實有個特性,你小張圖展開大張圖。一般都會失真。
所以大多數來說會先決定用大張圖來縮成小張圖的處理方式。

也就是說,當決定顯示框是200x400的情況下。一般會抓在寬1.5~2倍的處理原圖。也就是可能會使用400x800的解析圖。再來縮小。

而圖片的選用,我大多數喜歡用png格式。雖然jpg格式生成出來的圖片容量會小很多。
但站在美感的考量下。jpg一般多多少少都會有失真的情況發生。
遇到比較龜毛的客戶就很討厭。所以大多數來說。會選用png除了考量jpg的失真問題。
在png的輸出圖方面也可以選擇多層及的色盤生成應用。
也就是說,當圖片的輸出,色塊使用不多的情況下。還可以選用較低的色盤。來去降低容量

說那麼多也好像沒說到重點。
其實一般來說,圖片容量一般可以的話,盡量抓在100k。整頁圖片容量也盡量打到5mb左右。
但實際情況下,有些情況是很難達到這樣的條件。
這時候就是再使用其它方式來優化。
畢竟圖片才是網頁的美感來源之一。為了載入優化而犧牲美感也是怪怪的。
但圖片解析度跟容量並非是一個網頁需要列為優先考量的唯一目的。
畢竟現在有太多其它技術可以達到高容量又可以完美展現出及體驗感極隹的表現方式。

所以你問的問題,說真的真的沒有標準答案。但可以給你參考用的值。

大多數規劃依商品來說。一般抓在200x150 300x200 或100x200等等的解析劇理。
處理盡量選比原框解析度大點的比例。再來應用over原理處理。

再來就是小圖縮圖生成的必要性。大多數而言。如果客戶沒很硬性要求美感的情況下。且一頁圖片有機會高達20張以上的情況下。我才會考量增加縮圖來處理。
但實際上我現在會使用一些用戶體驗感的方式。讓圖片不需要再額外建立一張縮圖來展示。
現在我會建立縮圖,已經不是為了頁面載入優化才做縮圖了。
而是為了不想被人盜用原圖才會做縮圖。這是我目前唯一會建立縮圖的目的之一了。

看更多先前的回應...收起先前的回應...

大大人真好/images/emoticon/emoticon02.gif

沒有問??沒有做怎麼進步!!
怕就不要做

你自己的標準規範在哪邊???我還沒看到

沒看到是你家的事。
真要說標準。我的標準就是依客人的標準為標準。
不會有所謂一定的標準規範。
真要說的話。我只有固定幾套的佈局標準。

另外,你說對了。我的確沒有標準規範。看不到是正常的。
覺得這樣問很正常,你就去正常吧。

甲土豆 iT邦新手 5 級 ‧ 2019-11-14 09:42:45 檢舉

浩瀚星空,說得好
我真的覺得樓主是來問問題,還是來吵架,會不會太離譜了
問問題該有的態度,基本上沒有

補上道歉的話。

其實我為何會突然這樣火大,是因為之前看到很多這樣問請求意見的人。
給了一些建議之後。但也有說了並不是絕對性。
之後就被借用了名義說這是高手說的。絕對要這樣幹的話。
然後就突然指名道姓的。說誰誰誰說的。然後又補上一句「原來也不過是爾爾」之類的話。
所以從那段時間開始,只要是這個主觀意識不明確及沒明確規範的請教。一般我都直接會先直接開罵。自已無主觀意識等等等巴拉巴拉的。

其實我今天有重看了一下,有發現我確實說的有點太過了。所以補上你沒看到的所謂的規範。

等等我會編輯一下我的回答。

6
海綿寶寶
iT邦大神 1 級 ‧ 2019-11-13 09:13:36

視覺的東西蠻主觀專業的
最好交給專業的設計來決定

如果沒有專業的設計人員
建議你
找幾家你自己覺得不錯的購物車網站
看他們的解析度都用多少
然後就照著做就 OK 了

選我正解

小魚 iT邦大師 1 級 ‧ 2019-11-13 09:49:44 檢舉

前提是做的出來.

找專業的人來視覺設計
再找 找專業的人來刻頁面
/images/emoticon/emoticon46.gif

0
gameboxer
iT邦新手 4 級 ‧ 2019-11-13 10:25:13

建議100kb以下,大小看你版面可以用語法調整,不失真就好
大小圖如果有手機板的話就要準備小圖
但也是要看你網頁怎麼寫跟想要優化的程度也不是必要
另外除了限制user上傳照片大小外
正常網頁都會準備一個壓縮或調整的程式
避免user上傳後跑板或是照片被切到
總不可能user上傳一個50mb的高清圖片你照搬吧
照片影片這種東西要從上傳到前台呈現考慮的角度滿多的
尤其是這種要常變動的網頁
建議你先打好網頁基礎架構再來試試看

0
咖咖拉
iT邦好手 1 級 ‧ 2019-11-13 10:52:16

一般都是
大不限制 空間能承受為主
小約400X400 600X600 會比較恰當

上面圖片商品圖width
建議你要寫死px 不要用100%;
寧願讓它大到看不出來也別留白

不然很難調

0
ccutmis
iT邦高手 2 級 ‧ 2019-11-13 11:48:42

假設樓主用的程式語言是PHP,可以透過GOOGLE搜尋一些開源的PHP購物車系統來研究,
例如在google搜"open source cart php" 找到
10+ Best PHP Opensource Ecommerce Platforms to Build Online Store in 2019
https://www.cloudways.com/blog/opensource-ecommerce-platforms/
再點進去看介紹,我看到一個還不錯的
https://www.opencart.com/
裡面有demo前後台,覺得不錯就下載源碼安裝在本機XAMPP測試,
最簡單的就是看現有的購物車系統上傳圖片怎麼處理。

0
PPTaiwan
iT邦好手 1 級 ‧ 2019-11-14 10:59:52

我會這麼建議...

  1. 先確定你的網頁排版顯示上有一個統一規格與方式,規定上傳的圖是寬高是多少來制定好,先以這規則去做...
  2. CSS 等相關的如果太難,那可以去找網路上優秀的版型網站 https://wrapbootstrap.com/ 裡面有很多電商相關的..
  3. 通常建議一張顯示圖在 150k ~ 200k 以內,製作完的網站要用 F12 去看看你一頁下載完要花多少分鐘與多少 k 來實際再看看要如何調整。

從這些方向去做去學應該就可以了解很多..

0
Enzo
iT邦新手 5 級 ‧ 2019-11-14 11:06:34

嗨你好,雖然我只是隻剛轉職的程式菜鳥但剛好自己刻過一個購物網站含購物車。
你的問題跟你的照片看起來有點讓人模糊,因為你的頁面看起來不太像購物車裡面的樣子?
我的作品中是購物首頁有一張圖,大概像您提供的這樣,點進去之後每個商品有四張圖片輪播。

我的做法是我去把版切好之後,我會告訴我的客戶他的照片大概多大,比例多少,也順便提醒他太小會糊掉,然後程式碼內做resize避免客戶塞了一張智障大的圖。之後就讓客戶按照這樣的模式去新增商品上傳圖片,比較不會有問題。當然size也可以是由客戶偏好,你再按這比例去切版配版面等等。

上面這一部分是購物頁面看到的首圖是這樣做的。
至於購物車內就是小小的一張商品首圖的縮圖,配上該商品的敘述。
基本上購物車點進去應該是要可以看到我到底選購了哪些東西,建議是小圖即可,反正還有一些像是商品名稱、格式名稱等等的可以輔助消費者知道自己到底買了什麼。

供您參考

0

這問題的變數很多,每頁的商品數、以手機或桌機效果優先,都可能會影響最佳的選擇。
建議多嘗試幾種不同的做法,然後到 Google PageSpeed Insights 去測試,讓 Google 告訴你哪一種比較好。

Google PageSpeed Insights :
https://developers.google.com/speed/pagespeed/insights/?hl=zh-TW

0
Neo
iT邦新手 5 級 ‧ 2019-11-18 11:08:23

多看看別人家的電商系統
看他css怎麼寫就知道拉

我要發表回答

立即登入回答