請問購物車網頁上的商品圖片尺寸大小要多少才行??
解析度??才能達到速度與美觀的平衡??
還是說一張圖要有大圖跟小圖
1.你懂什麼叫做購物車嗎
2.你懂什麼叫做縮圖嗎
3.你有辦法制定規範嗎
4.你會用CSS嗎
5.你有美感嗎
6.你還要我繼續問下去嗎
認真來說,你光問這樣的問題。你就已經不適合當開發者了。不過我還是認真回答一下你的問題。
請問購物車網頁上的商品圖片尺寸大小要多少才行??
隨你高興,你要客戶能接受都行。我個人的經驗是大到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張以上的情況下。我才會考量增加縮圖來處理。
但實際上我現在會使用一些用戶體驗感的方式。讓圖片不需要再額外建立一張縮圖來展示。
現在我會建立縮圖,已經不是為了頁面載入優化才做縮圖了。
而是為了不想被人盜用原圖才會做縮圖。這是我目前唯一會建立縮圖的目的之一了。
沒看到是你家的事。
真要說標準。我的標準就是依客人的標準為標準。
不會有所謂一定的標準規範。
真要說的話。我只有固定幾套的佈局標準。
另外,你說對了。我的確沒有標準規範。看不到是正常的。
覺得這樣問很正常,你就去正常吧。
浩瀚星空,說得好
我真的覺得樓主是來問問題,還是來吵架,會不會太離譜了
問問題該有的態度,基本上沒有
補上道歉的話。
其實我為何會突然這樣火大,是因為之前看到很多這樣問請求意見的人。
給了一些建議之後。但也有說了並不是絕對性。
之後就被借用了名義說這是高手說的。絕對要這樣幹的話。
然後就突然指名道姓的。說誰誰誰說的。然後又補上一句「原來也不過是爾爾」之類的話。
所以從那段時間開始,只要是這個主觀意識不明確及沒明確規範的請教。一般我都直接會先直接開罵。自已無主觀意識等等等巴拉巴拉的。
其實我今天有重看了一下,有發現我確實說的有點太過了。所以補上你沒看到的所謂的規範。
等等我會編輯一下我的回答。
視覺的東西蠻主觀專業的
最好交給專業的設計來決定
如果沒有專業的設計人員
建議你
找幾家你自己覺得不錯的購物車網站
看他們的解析度都用多少
然後就照著做就 OK 了
選我正解
建議100kb以下,大小看你版面可以用語法調整,不失真就好
大小圖如果有手機板的話就要準備小圖
但也是要看你網頁怎麼寫跟想要優化的程度也不是必要
另外除了限制user上傳照片大小外
正常網頁都會準備一個壓縮或調整的程式
避免user上傳後跑板或是照片被切到
總不可能user上傳一個50mb的高清圖片你照搬吧
照片影片這種東西要從上傳到前台呈現考慮的角度滿多的
尤其是這種要常變動的網頁
建議你先打好網頁基礎架構再來試試看
一般都是
大不限制 空間能承受為主
小約400X400 600X600 會比較恰當
上面圖片商品圖width
建議你要寫死px 不要用100%;
寧願讓它大到看不出來也別留白
不然很難調
假設樓主用的程式語言是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測試,
最簡單的就是看現有的購物車系統上傳圖片怎麼處理。
我會這麼建議...
從這些方向去做去學應該就可以了解很多..
嗨你好,雖然我只是隻剛轉職的程式菜鳥但剛好自己刻過一個購物網站含購物車。
你的問題跟你的照片看起來有點讓人模糊,因為你的頁面看起來不太像購物車裡面的樣子?
我的作品中是購物首頁有一張圖,大概像您提供的這樣,點進去之後每個商品有四張圖片輪播。
我的做法是我去把版切好之後,我會告訴我的客戶他的照片大概多大,比例多少,也順便提醒他太小會糊掉,然後程式碼內做resize避免客戶塞了一張智障大的圖。之後就讓客戶按照這樣的模式去新增商品上傳圖片,比較不會有問題。當然size也可以是由客戶偏好,你再按這比例去切版配版面等等。
上面這一部分是購物頁面看到的首圖是這樣做的。
至於購物車內就是小小的一張商品首圖的縮圖,配上該商品的敘述。
基本上購物車點進去應該是要可以看到我到底選購了哪些東西,建議是小圖即可,反正還有一些像是商品名稱、格式名稱等等的可以輔助消費者知道自己到底買了什麼。
供您參考
這問題的變數很多,每頁的商品數、以手機或桌機效果優先,都可能會影響最佳的選擇。
建議多嘗試幾種不同的做法,然後到 Google PageSpeed Insights 去測試,讓 Google 告訴你哪一種比較好。
Google PageSpeed Insights :
https://developers.google.com/speed/pagespeed/insights/?hl=zh-TW