如何製作與優化網頁圖片?

進行網頁設計時,網頁所使用的圖片尺寸應該如何設定?網頁圖片要如何優化且不會破壞畫質?

Irving Chen
Feb 25 · 5 min read

網路上國內外有很多篇文章在講解網頁圖片該如何製作、應該注意哪些事項等,數年來我自己也迭代過很多作法,不斷優化自己如何進行高效率製作大量的網頁圖片(更新時間: 2021.02.28)

「實戰經驗分享,非只是網路資料整理」

嗨我是爾文(Irving Chen),資深網頁設計師,先快速介紹一下自己的架站經驗,本人有多年使用 WordPress 架站與網頁設計接案的經驗,近期也開始專精 Shopify 建置電商網站,對於這類平台的限制與可塑性有一定的了解,希望藉由實戰分享讓更多人了解這個領域的眉眉角角,透過經驗交流讓彼此成長更快速!

我製作網頁圖片的方法主要有兩大目標:超高效率能大量製作

影片講解

如何製作與優化網頁圖片:網頁圖片尺寸設定到圖片優化— Irving Lab 爾文實驗室
如何製作與優化網頁圖片:網頁圖片尺寸設定到圖片優化

因為事情真的太多了!需要相當非常非常「有效率」去製作「大量」網頁圖片,而且還要優化過,免得增加網站主機的負擔、拖累使用者的瀏覽速度。

如何設定網頁圖片尺寸、大量輸出到圖片優化 — Irving Lab 爾文實驗室
如何設定網頁圖片尺寸、大量輸出到圖片優化

說明主題

1. 如何設定網頁圖片尺寸?

2. 如何超快速大量輸出網頁圖片(而不是用 Photoshop 一張一張輸出)

3. 如何優化網頁圖片?

備註:平面設計師和網頁設計師真的還是屬於不同領域,有很多網站執行細節需要注意!

製作網頁圖片的使用工具:Figma + TinyPNG — Irving Lab 爾文實驗室
製作網頁圖片的使用工具:Figma + TinyPNG

使用工具

  1. TinyPNG:https://tinypng.com
TinyPNG 的外掛,名稱為 TinyImage Compressor
TinyPNG 的外掛,名稱為 TinyImage Compressor
TinyPNG 的外掛,名稱為 TinyImage Compressor

高效率小訣竅

使用方式:在 Figma 中,先選取圖片,設定 Export 格式,再選取該圖片按右鍵,選取 Plugins > TinyImageCompressor,確認要輸出的圖片列表按下按鈕「Compress Images」即可。

網站設計文章訂閱

有任何想問的問題,歡迎留言或寄信給我 irving520@gmail.comFB 粉絲團,我們一起交流、成長!附上我的網頁設計作品,可以來逛逛喔!歡迎加入 Shopify 網站設計與架站學習交流:Line 社群 一起交流與學習!但在美國的用戶無法加入 Line 社群,所以我也另外建立了 Telegram 社群,兩邊珍貴的經驗會同步分享與整理。

爾文讀書中,跟我一起讀書去!精選書單:http://bit.ly/irving-is-reading

IrvingLab 爾文實驗室

爾文實驗室為數位而生!

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store