Posts

《 Akamai + S3 與 CloudFront + Imgproxy + S3 使用分析二：壓縮圖片設計流程：檔案大小 vs 載入時間的權衡》

Image
要透過 Imgproxy 客製化每種圖檔要被壓縮的方法，真的超難啦！ 目標 將圖片壓縮到 50 KB、250 KB、500 KB、1 MB 等不同檔案大小。 對於已小於目標大小的圖片，不進行壓縮以避免檔案變大。 支援多種圖片格式（PNG、JPG、AVIF 等），依據需求選擇最佳壓縮格式。 提供不同解析度的圖片給前端，讓前端可以根據用戶網速自動切換合適檔案大小。 壓縮設計 目的 利用 Imgproxy 壓縮圖檔下載是否可以有效增加下載圖片效率 步驟 1：判斷檔案大小與格式 從 Akamai_S3 下載原始圖片後，先檢查檔案大小與格式。 如果檔案小於欲壓縮格式目標大小 （例如欲壓縮至 250 KB，但檔案只有 70 KB），則該格式 不做處理 ，繼續跳往下一級 (50 KB)。 如果檔案大於目標大小，進行壓縮或格式轉換。 步驟 2：選擇壓縮策略與格式 優先順序： JPG (JPEG) ：適合照片、色彩豐富的圖片。壓縮率高但會有損失。 AVIF / WEBP ：壓縮率更高，幾乎無損，適合支持新格式的瀏覽器。 PNG ：適合需要透明背景的圖片。壓縮率較低但無損壓縮。 選擇策略： PNG → JPG ：如果 PNG 沒有透明背景且圖片過大，轉成 JPG 可以大幅減少檔案大小。 AVIF → AVIF ：AVIF 檔案通常已經很小，不需要轉換，僅調整品質。 JPG → JPG ：降低品質進行壓縮。 GIF → WEBP ：動態 GIF 可轉成 WEBP，通常能縮小 30-50%。 步驟 3：壓縮參數設定 JPG： quality=70-80 是較理想的平衡點， 70 可顯著減少檔案大小，畫質影響有限。 PNG： 使用無損壓縮，或轉換成 JPG 若透明度不重要。 WEBP / AVIF： quality=60-70 仍能保持優異畫質，檔案非常小。 根據以上制定規則，以下為測試參數搭配在不同檔案類型下有最佳效果的測試 png: > 1MB: q:80/rs:fit:1920:1080 500 KB - 1 MB: q:70/rs:fit:1280:720 250 KB - 500 KB: q:60/rs:fit:800:600 50 KB - 250KB: q:50/rs:fit:400:300 jpeg or jpg > 1MB: q:80/mb:1000000...
Post a Comment
Read more

《 Imgproxy 使用分析一：圖片下載速度優化分析：Akamai CDN vs Imgproxy 效能比較》

Image
前言 打造了一顆社群 App ，內有一堆圖片在 load 的時候會黑黑的，過一陣子才 load 得出來 目標 解決這個會讓用戶體驗不佳的問題，很快滑過去也不能看到黑黑的！ 方法 網上 Survey (Chat GPT) 了一下， 決定試試壓縮圖片，看能不能讓下載速度更快。 壓縮的方式選用 Imgproxy 架在 AWS Loadbalancer 層級，人如其名，就是把它當成 proxy 使用。 Source Origin 為 S3，前面也加了一層 CDN。 因此拿圖的流程會長這樣 圖1. cdn imgproxy s3 plantUML 接著就是看這樣的設計流程可不可以讓我們拿圖變快囉！ 在開始之前，需要先知道 從 S3 拉圖跟透過 imgproxy 從 S3 拉圖的速度差 才有比較的基準值，畢竟如果 imgproxy 本身就存在下載速度限制的話，再怎麼壓縮，拉圖就是會慢啊！ 實驗設計 假設 Imgroxy 可以幫我加速圖片下載速度！ 方法 比較各種情境的下載速度是否有差異： S3 vs Imgproxy  →  S3 Akamai CDN  →  S3 vs Imgproxy  →  S3 Akamai CDN  →  S3 vs CloudFront CDN  →  Imgproxy  →  S3 第一次緩存建立 CloudFront  CDN  →  Imgproxy  →  S3 與第二三次 緩存建立後 CloudFront  CDN  →  Imgproxy  →  S3，下載速度差 Akamai CDN  →  S3 vs 緩存建立後的 CloudFront  CDN  →  Imgproxy  →  S3 測試環境 星巴克 wifi, AWS S3,  AWS  Loadbalancer (Imgproxy),  AWS  CloudFront,  Akamai CDN 後面的 S3 前面的 CDN...
Post a Comment
Read more

PostgreSQL 具有的 NoSQL 特性

Image
了解了 RDBMS 與 NoSQL 的差異之後，我們來了解 PostgreSQL 除了本是 RDBMS 之外，還包含了哪些 NoSQL 的特性： PS: 可依下列步驟先在地端用 docker 啟一個 postgreSQL database 1. pull posgres image and run docker run -d \ --name postgres-db \ -e POSTGRES_USER=postgres \ -e POSTGRES_PASSWORD=password \ -e POSTGRES_DB=postgres \ -p 5432:5432 \ postgres 2. 建立一個 demo database psql -h localhost -p 5432 -U postgres -c "CREATE DATABASE nosql_demo;" 3. 連線 psql -h localhost -p 5432 -U postgres -W -d nosql_demo 4. 輸入密碼 password Password: Document types 1. XML documents 是一種 Hierarchical structured 1. 用 xml text 建立資料 Examples: // create xmltest table CREATE TABLE xmltest ( data xml NOT NULL ); // 插入一筆 xmltest 資料 INSERT INTO xmltest (data) VALUES ( '<attendee><bio> <name>John Doe</name> <birthYear> 1986 </birthYear></bio><languages> <lang level = "5" >php</lang><lang level = "4" >python</lang> <lang level = "2" ...
Post a Comment
Read more