Làm cách nào để tối ưu hóa hình ảnh để cải thiện thời gian tải trang / trang web?

Đây gần như là một câu hỏi StackOverflow, tuy nhiên nó hoàn toàn liên quan đến Photoshop và các công cụ khác. Với mỗi thử nghiệm Pagespeed tôi làm cho tất cả trang web của mình, tôi nhận được nhận xét "Tối ưu hóa hình ảnh bằng cách nén hình ảnh X không mất dữ liệu" thường làm tăng thứ hạng trang của tôi rất nhiều.

Tôi đã lưu MỌI hình ảnh với 'lưu cho web' bằng Photoshop, nhưng tôi đã tự hỏi làm thế nào tôi có thể "Tối ưu hóa hình ảnh bằng cách nén lossless" hơn nữa. Theo như tôi biết thì tôi đã làm mọi thứ có thể.

Làm cách nào để tối ưu hóa hình ảnh để cải thiện tốc độ tải trang web của tôi?

Có lẽ bước đầu tiên là lập kế hoạch nhiều hơn so với Photoshop.

1) Tôi có cần một tập tin hình ảnh không? Hoặc tôi có thể sử dụng cái gì khác

• Màu nền.
• Một gradient css.

2) Tôi có cần kích thước tập tin đó không? hoặc tôi có thể sử dụng

• Một kích thước thấp hơn nâng cao.
• Mặt nạ độ phân giải thấp với cái gì? một mô hình trên nó, một vệt mờ, làm tối nó.
• Một mô hình.
• Là hình ảnh thực sự xứng đáng để có nó ở độ phân giải cao?

3) Định dạng tập tin có phù hợp không?

Nó không được khắc trên đá nhưng:

• Jpg để chụp ảnh.
• Png cho màu trơn hoặc độ dốc. Biểu trưng, ​​biểu đồ.
• Hình ảnh Svg cho hình ảnh có thể mở rộng, màu sắc đơn giản, độ dốc.

4) Tôi có thể sử dụng một thay thế cho hình ảnh động?

• Ảnh động hoạt hình với tối ưu hóa và phối màu.
• Css hoạt hình.

5) Tôi đã chuẩn bị truy vấn phương tiện phù hợp tôi cần cho thiết bị màn hình chưa?

• Tôi có cần kích thước đó trên thiết bị đó không?

6) Đây là nén jpg cụ thể được đưa ra

Để chụp ảnh. Đã quyết định kích thước thực tôi cần:

• Có thực sự quan trọng nếu tôi có thể nhìn thấy một số tạo tác nén. Tôi có thể đẩy thêm một chút không? Nó có đáng không?
• Tôi có cần bao gồm hồ sơ màu trên mỗi ảnh không?

Đây là một vấn đề "psicological". Khi lưu vào web, bạn có tránh sử dụng chất lượng 25 chỉ vì nó nói "Thấp" và bạn muốn trang web của bạn có chất lượng cao?

7) Và một số chi tiết cụ thể

• Jpg lũy ​​tiến sử dụng không gian nhiều hơn một chút so với không tiến bộ.
• Bật tối ưu hóa jpg.
• Tắt bất kỳ tùy chọn Blur.
• Các thuật toán 4: 4: 4 cho bạn chất lượng tốt hơn nhưng nén ít hơn với chất lượng cao hơn. 4: 2: 2 nén tốt hơn.
• Hãy chắc chắn để sử dụng các tập tin rgb, không phải cmyk.
• Chuẩn bị các tệp của bạn với các cài đặt màu trên "web". Bằng cách này bạn có thể thả hồ sơ màu.

Một công cụ tối ưu hóa luôn luôn, sẽ luôn cho bạn làm điều đó tốt hơn.

Những gì tham số có thể sử dụng một thuật toán để nói. Oh bức chân dung bạn đang hiển thị trên trang web của bạn có đúng mức độ nén "lossles" không?

Lần nữa. "Mất mát" không có ý nghĩa ở đây.

Trước khi cung cấp thiết kế trang web cuối cùng của bạn, bạn thực sự nên tối ưu hóa hình ảnh với các công cụ tập trung hơn và dành riêng để tối ưu hóa hình ảnh. Photoshop không sao, nhưng tôi đã thấy nhiều người nhận xét rằng các công cụ khác làm việc tốt hơn.

Từ những gì tôi nghe được, ImageMagick khá tốt cho mục đích này. Tuy nhiên, là một dòng lệnh-noob, tôi cần dành một chút thời gian để làm chủ nó một cách cá nhân. Nếu bạn quen thuộc với dòng lệnh thì có lẽ nó hoàn hảo cho bạn.

Vì tôi không có thời gian để thành thạo ImageMagick ngay bây giờ, tôi chọn tìm kiếm các công cụ tối ưu hóa trực tuyến miễn phí nơi tôi có thể nhập hình ảnh và nó sẽ tạo ra một phiên bản tối ưu hóa.

Một số công cụ tôi tìm thấy bao gồm:

• Compressor.io - rất ít tùy chọn có thể điều chỉnh, nhưng kết quả khá tuyệt vời (giảm trung bình 60% - giảm 80% kích thước tệp cho tôi)
• ImageOptimizer.net - trông chuẩn
• tinyPNG - cá nhân được sử dụng với kết quả tốt (có thể chuyển đổi PNG 24/32 bit với kênh alpha thành PNG 8 bit trong khi vẫn giữ được độ trong suốt)

Cá nhân tôi không có bất kỳ lý do nào để trả tiền cho một công cụ bổ sung với tất cả các tùy chọn miễn phí có sẵn, trừ khi tôi nghe về một công cụ thay đổi trò chơi.

Bạn có lẽ có thể tìm thấy nhiều công cụ trực tuyến và offline miễn phí hơn bằng cách kết hợp các từ khóa như reduce image file size, image compression, PNG / JPEG / GIF optimisation tools.

Theo kinh nghiệm của tôi, nếu bạn thực hiện thói quen 'Saving for Web' từ Photoshop, điều này sẽ tối ưu hóa hình ảnh cho web. Mặc dù vậy, bạn vẫn sẽ thấy cảnh báo tối ưu hóa khi kiểm tra tốc độ trang, nhưng chỉ cần nhìn vào kb tối ưu hóa bạn sẽ đạt được. Trong hầu hết các trường hợp, nó là khoảng 1 ~ 5kb. Tôi đồng ý với Scott rằng bạn không nên bị ám ảnh bởi tốc độ trang.

Nếu bạn làm việc với WordPress, bạn có thể cài đặt các plugin tối ưu hóa như trình tối ưu hóa hình ảnh EWWW, sẽ xử lý từng hình ảnh bạn tải lên và giảm phần trăm. Thật hữu ích nếu khách hàng tự tải nó lên.

Một tùy chọn khác là sử dụng một phần mềm tối ưu hóa máy tính để bàn như http://www.jpegmini.com/ có tỷ lệ nén tốt với chất lượng và có xử lý hàng loạt.

Trong trường hợp của bạn, tôi nghĩ rằng nó đã được thực hiện. Từ thời điểm này, bạn phải kiểm tra phía máy chủ, sử dụng các máy chủ lưu trữ mạnh mẽ như Amazon S3 hoặc một cái gì đó tương tự và phục vụ các tệp từ đó để đạt được hiệu suất tốt nhất.

Nếu bạn là người dùng Wordpress, bạn cũng có thể xem Optimus Image Tối ưu hóa (từ chối trách nhiệm: Tôi làm việc cho công ty đã tạo plugin) để nén hình ảnh không mất dữ liệu. Tuy nhiên, một điểm khác biệt lớn với plugin này so với các plugin khác là khả năng chuyển đổi hình ảnh sang định dạng WebP, được biết là giảm kích thước tệp tới 26% khi so sánh với PNG.

Điều này sẽ giúp cải thiện hơn nữa thời gian tải tốc độ trang của bạn vì hình ảnh nhỏ hơn nhiều, do đó khách hàng dành ít thời gian hơn để tải chúng xuống.

Điều này cũng có thể đáng xem ...

https://developers.google.com/speed/pagespeed/

Tôi đã sử dụng PageSpeed ​​trong quá khứ.

Nó sẽ kiểm tra các trang tải từ trang web của bạn và thường đưa ra các đề xuất hữu ích để tăng tốc thời gian tải.

Như những người khác đã chỉ ra - tối ưu hóa hình ảnh cũng có thể giúp rất nhiều.

Trên máy Mac - Tôi sử dụng ImageOptim ... thực sự thích kết quả.

https://imageoptim.com

PS: Tôi không cố spam. : -D