[ad_1]
Trong Chi phí của Javascript Addy tạo ra một điểm thực sự tốt: 200kb của Javascript là "đắt" hơn 200kb hình ảnh, bởi vì trình duyệt cần thực hiện nhiều công việc hơn để sử dụng mã so với hình ảnh. Từ bài viết:
Một hình ảnh JPEG cần được giải mã, rasterized và vẽ trên màn hình. Một gói JavaScript cần được tải xuống và sau đó phân tích cú pháp, biên dịch, thực thi và có một số bước khác mà một công cụ cần phải hoàn thành. Chỉ cần lưu ý rằng những chi phí này không hoàn toàn tương đương.
Điều này vẫn rất đúng, nhưng nó ít quan trọng hơn vào thời điểm chính xác này trong lịch sử.
Với một đại dịch quét qua trên toàn cầu, tôi thấy rằng internet của tôi đã trở nên khá rắc rối. May mắn thay, bởi vì Kỹ sư Độ tin cậy của Trang web rất tuyệt vời và không mệt mỏi, hầu hết internet vẫn đang hoạt động, nhưng chắc chắn có điều gì đó xảy ra trên mạng Tôi có kết nối 100mbps, nhưng cảm giác giống như 3G vào lúc này.
Điều này thay đổi tính toán một chút. Các thiết bị của chúng tôi vẫn có thể phân tích cú pháp và biên dịch javascript với cùng tốc độ mà chúng có thể quay lại vài tuần, nhưng tốc độ mạng đã chậm hơn. Vì vậy, số lượng bit thô qua dây là cực kỳ quan trọng ngay bây giờ!
Và các trang web thường có cách hình ảnh trị giá hơn 200kb; không có gì lạ khi một trang có vài megabyte hình ảnh. Nhiều nhà phát triển (bao gồm cả tôi!) Có xu hướng không nghĩ nhiều về kích thước phương tiện.
Thật hạnh phúc, có một số trái cây treo khá thấp! Trong hướng dẫn này, chúng ta sẽ thấy cách chúng ta có thể tận dụng các định dạng hình ảnh "thế hệ tiếp theo" như WebP. Những hình ảnh này thường nhỏ hơn 2-3 lần so với các định dạng cũ mà chúng ta biết và yêu thích (jpg, png). Nó có thể tạo ra một sự khác biệt lớn.
Thích bài học của bạn ở định dạng video? Xem miễn phí trên egghead:
Có ba định dạng mà chúng tôi có thể sử dụng:
- ] JPEG 2000 – một cải tiến lặp lại trên jpg. Được phát triển vào năm 1997 chủ yếu để sử dụng trong phim ảnh và hình ảnh y tế. Cho phép hình ảnh được nén hơn nữa, với ít tạo tác hơn.
- JPEG XR – Một người anh em họ của jpeg2000 được phát triển bởi Microsoft vào năm 2009
] Webp – một định dạng được Google phát triển cho web vào năm 2010, tập trung vào việc sử dụng các kỹ thuật tối ưu hóa nâng cao để giảm kích thước tệp. Hỗ trợ tính minh bạch và thậm chí hoạt hình.
Chúng ta sẽ dành phần lớn thời gian của chúng ta ngày hôm nay để nói về webp nhưng chúng ta sẽ gặp lại anh em họ jpeg khi chúng ta thảo luận về khả năng tương thích trình duyệt .
Nó tạo ra sự khác biệt lớn như thế nào?
, Tôi đã sử dụng hình ảnh này trong một bài đăng:
Tôi đã thực hiện một số thí nghiệm, sử dụng cả jpg và png cho hình ảnh nguồn. Tôi đã tối ưu hóa chúng bằng cách sử dụng fantemin ] fantemin
Kết quả khá ấn tượng:
| Chi tiết | Bản gốc | WebP |
|---|---|---|
|
.png (từ Photoshop) ] 742 kb |
61 kb! 92 % nhỏ hơn | |
|
png (sử dụng hình ảnh) |
178 kb | 58 kb! 67! % nhỏ hơn |
|
.jpg (từ Photoshop) |
242 | 50 kb! 79 % nhỏ hơn |
|
Tối ưu hóa .jpg [19459] (sử dụng hình ảnh) ] |
Tôi đã thử nó trên rất nhiều hình ảnh và nó hầu như luôn tạo ra các tệp nhỏ hơn 30-70% so với các hình ảnh được tối ưu hóa!
Còn về SVG thì sao? Tôi chưa thử nghiệm điều này trên các SVG. SVG là một định dạng vector, có nghĩa là nó được tạo thành từ các hướng dẫn toán học thay vì các màu pixel riêng lẻ. Sẽ là một sự xấu hổ khi mất đi lợi ích mở rộng của định dạng vectơ và tôi nghi ngờ rằng nó thực sự sẽ làm tăng kích thước tệp trong hầu hết các trường hợp.
.webp hỗ trợ trong hầu hết các trình duyệt :
Quan trọng, chúng tôi đang thiếu Safari và Internet Explorer.
Làm thế nào về JPEG 2000?
được điền vào Safari, nhưng vẫn còn đó Internet Explorer đầy phiền phức
Chúng tôi đã đánh lô tô caniuse! Với 3 định dạng hình ảnh này, chúng tôi có phạm vi bao phủ hoàn hảo trên phổ trình duyệt.
Hãy xem cách chúng tôi chọn và chọn các định dạng khác nhau đối với các trình duyệt khác nhau
HTML có hai yếu tố truyền thông hình ảnh: ngôi sao nhạc pop quốc tế img và nghệ sĩ hipster thích hợp hình ảnh .
hình ảnh là một bổ sung mới hơn nhiều cho ngôn ngữ. Mục tiêu chính của nó là cho phép chúng tôi tải các nguồn khác nhau tùy thuộc vào độ phân giải hoặc hỗ trợ cho một định dạng hình ảnh nhất định.
Đây là những gì nó trông giống như:
Ảnh thẻ hỗ trợ một nhóm nguồn . Trình duyệt phân tích các phần tử theo trình tự, tìm kiếm phần tử đầu tiên mà nó có thể sử dụng dựa trên loại . Khi tìm thấy nó, nó tìm ra hình ảnh sống qua srcset và hoán đổi nó thành img src
] srcset có thể làm rất nhiều điều phức tạp, nhưng thật vui vì usecase của chúng tôi, chúng tôi có thể coi nó giống như src . Về cơ bản, nguồn là cấu hình và nó cắm giá trị khớp vào img .
Trong Chrome, chẳng hạn, chúng tôi kết thúc với một thứ gì đó ít nhiều tương đương với điều này:
Dòng nguồn này có nghĩa là một nguồn sẽ khớp với mọi trình duyệt: Hầu hết các trình duyệt sẽ sử dụng webp Safari sẽ sử dụng jp2 và IE sẽ sử dụng jxr .
Đoạn trích trên vượt trội về khả năng phù hợp với mọi trình duyệt có thể với định dạng hình ảnh "thế hệ tiếp theo" hiện đại. Nhưng nó giả định rằng những hình ảnh này tồn tại ở các định dạng này.
Nếu chúng ta tạo ra những hình ảnh này bằng tay, thì đó là rất nhiều lao động thủ công. Và nếu chúng ta tạo chúng tự động, nó có thể kéo dài đáng kể thời gian xây dựng của chúng ta; xử lý hình ảnh nổi tiếng là chậm khi được thực hiện ở quy mô.
Trên blog của riêng tôi, nơi nhận được rất ít lưu lượng truy cập Internet Explorer tôi ' đã chọn một giải pháp lười biếng hơn:
Tôi đang phục vụ webp đẹp và nhỏ cho các trình duyệt hỗ trợ nó (Chrome, Firefox, Edge) và quay trở lại di sản jpg cho các trình duyệt không (IE, Safari).
Đối với tôi, đây là một ví dụ về tăng cường tiến bộ . Mọi thứ vẫn hoạt động trên các trình duyệt cũ, nhưng hình ảnh sẽ tải chậm hơn một chút. Đây là một sự đánh đổi mà tôi ổn.
(Hy vọng rằng Apple sẽ sớm lên chuyến tàu này! 🤞🏻)
Các nhà phát triển trình duyệt sẽ luôn nghĩ rằng hình ảnh có bất cứ điều gì src ban đầu bạn đã cho nó. Nếu bạn kiểm tra nó trong khung phần tử, bạn sẽ thấy rằng nó sử dụng .jpg .
Để kiểm tra xem nó có thực sự hoạt động hay không, mẹo tốt nhất tôi tìm thấy là đúng nhấp và "Lưu dưới dạng". Trên Chrome, bạn sẽ nhận được định dạng tệp "Google WebP", trong khi trên Safari hoặc IE, bạn sẽ nhận được "JPEG".
Bạn cũng có thể kiểm tra tab mạng, để xem cái nào thực sự được tải xuống.
Google đã tạo ra một bộ công cụ trợ giúp chúng tôi làm việc với các tệp webp . Một trong những công cụ đó là cwebp cho phép chúng tôi chuyển đổi các định dạng hình ảnh khác sang webp.
Nếu bạn đang sử dụng MacOS, bạn có thể cài đặt bộ này với Homebrew :
Trên các nền tảng khác, tôi tin rằng bạn sẽ cần tải xuống gói libwebp thích hợp từ kho lưu trữ của họ. Sau khi cài đặt, bạn có thể sử dụng nó như thế này:
- -q 80 là cờ để đặt "chất lượng", từ 1 (tệ nhất) thành 100 (tốt nhất). Bạn có thể thử nghiệm với các giá trị khác nhau. Tôi đã thấy rằng 70-80 là điểm ngọt ngào.
- cereal.png là đường dẫn đến tệp đầu vào mà bạn muốn chuyển đổi.
- -o cereal.webp là đường dẫn đầu ra.
Nếu điều này làm bạn quan tâm, để đăng ký để bạn không bỏ lỡ nó.
Một thành phần là một cách tuyệt vời để trừu tượng hóa một số điều thú vị với
Chúng tôi có thể sử dụng ImgWithFallback rất giống với cách chúng tôi sử dụng thẻ img :
Cách sử dụng với các thành phần được tạo kiểu
các thành phần hoặc Cảm xúc, bạn có thể được sử dụng để bọc hình ảnh trong một trình bao bọc theo kiểu:
Rất may, điều này vẫn hoạt động với thành phần ImgWithFallback Chúng ta có thể bọc nó giống như bất kỳ thành phần nào khác:
Lý do hoạt động này là do cách thức hoạt động của trình trợ giúp [194590022] theo kiểu . Nó tạo ra một lớp và đưa nó vào biểu định kiểu của tài liệu, và sau đó chuyển tên lớp được tạo thành một chỗ dựa:
Chúng tôi đang ủy thác tất cả các thuộc tính cho đứa trẻ [19459022Thẻimgdo đó, các kiểu phù hợp vẫn làm cho hình ảnh. Rất vui, mọi thứ hoạt động như bạn mong đợi. chuyển đổi sang webp (mặc dù bạn cần chọn tham gia).
Hình ảnh Gatsby không có nghĩa là một sự thay thế thả xuống cho img ; nó có thể là một ma sát nhiều hơn để sử dụng, nhưng nó cũng đi kèm với rất nhiều các thủ thuật ma thuật bổ sung cho rắc rối của bạn.
Hãy xem các tài liệu để biết thêm thông tin.
Nhược điểm thực sự duy nhất tôi tìm thấy cho đến nay là webp là một định dạng khó chịu khi làm việc với người dùng.
]Hầu hết các phần mềm máy tính để bàn chưa hỗ trợ; Tôi không thể mở nó trong Bản xem trước trên MacOS. Điều này có nghĩa là nếu tôi nhấp chuột phải và "Lưu dưới dạng" một hình ảnh webp tôi sẽ không thể xem nó!
Chuyển đổi một webp thành một jpg tương đối không gây đau đớn và một tìm kiếm google xuất hiện nhiều nhà cung cấp trực tuyến sẽ làm điều đó miễn phí. Tuy nhiên, đó là một chút ma sát. Nếu trang web / ứng dụng của bạn khuyến khích người dùng tải xuống hình ảnh, bạn có thể không muốn thực hiện chuyển đổi này.
Tôi rất vui khi đã giảm kích thước hình ảnh trên blog của mình xuống ~ 50%. Ngoài những lợi ích cho trải nghiệm người dùng vào thời điểm quan trọng, tôi cũng hy vọng rằng điều này sẽ giúp tôi tiết kiệm một số tiền về mặt băng thông.
Tất nhiên, việc chuyển đổi thủ công dường như không thực tế hình ảnh tôi sử dụng để webp . Tôi đã nghiên cứu làm thế nào tôi có thể tự động tạo ra những hình ảnh này từ các nguồn jpg và png . Lý tưởng nhất, đây không phải là điều tôi nên nghĩ đến, nó sẽ tự động xảy ra khi tôi xây dựng trang web của mình. Hy vọng sẽ sớm thấy một cái gì đó trên đó =)
Source link: webdesignernews