Tối ưu hóa và nén png và jpg, jpeg mà không làm giảm chất lượng. Tối ưu hóa hình ảnh như một phần quan trọng của quy trình CRO

Tối ưu hóa hình ảnh là một phần quan trọng trong việc quảng bá trang web. Hình ảnh được tối ưu hóa thích hợp góp phần làm cho tài nguyên được xếp hạng cao hơn trong kết quả tìm kiếm và đẩy nhanh tốc độ tải nội dung. Tối ưu hóa hình ảnh là gì và nó được thực hiện như thế nào?

Tối ưu hóa hình ảnh là việc giảm kích thước của hình ảnh được sử dụng trong thiết kế trang web và các bài báo mà không làm giảm chất lượng.

Trước khi bắt đầu quá trình "nén" hình ảnh, chúng tôi đánh giá tốc độ tải trang web và hiểu những chỉ số nào ngăn cản chúng tôi cải thiện kết quả. Dịch vụ PageSpeed ​​Insights sẽ giúp bạn điều này. Nếu trang được hơn 85 trong số 100 điểm, thì đây là kết quả tốt và đó chính xác là một con số như vậy mà bạn cần phải phấn đấu.

Ví dụ, bây giờ kết quả là:

Và sau khi tối ưu hóa:

Kết quả này có được nhờ vào việc sử dụng các đề xuất của Google:

Định dạng PNG

Làm thế nào để tối ưu hóa hình ảnh nếu định dạng PNG được sử dụng để lưu chúng? Để làm điều này, bạn có thể sử dụng các đề xuất của Google:

Nếu bạn chỉ lập kế hoạch tối ưu hóa hình ảnh cơ bản, bạn có thể sử dụng bất kỳ chương trình chỉnh sửa hình ảnh nào: GIMP, Photoshop, v.v. Nhưng cái nào thì tốt hơn? Một thử nghiệm nhỏ sẽ giúp bạn tìm ra. Chúng tôi chụp một hình ảnh chưa được tối ưu hóa trong Định dạng PNG nặng 293 KB:

Tạo hai thư mục: "GIMP" và "Photoshop" và đặt cùng một bức ảnh vào chúng.

Làm cách nào để nén ảnh mà không làm giảm chất lượng bằng trình chỉnh sửa GIMP và Photoshop?

Kết quả là như thế này:

Điểm mấu chốt: Photoshop thực hiện tối ưu hóa hình ảnh tốt hơn GIMP.

Nhưng điều này không có nghĩa là bạn chỉ có thể sử dụng các tùy chọn này. Có những tiện ích khác, hiệu quả không kém để nén hình ảnh ở định dạng PNG. Ví dụ: và PNGOUT. Kết quả của công việc của họ như sau:

Mặc dù OptiPNG thua Photoshop 1 KB, nhưng bản thân chương trình chỉ nặng 96 KB, đây là một điểm cộng lớn. Nhưng PNGOUT vượt qua các "đối thủ" về mọi mặt:

Làm việc với các chương trình

Trước hết, bạn cần tải xuống tiện ích OptiPNG hoặc PNGOUT (hoặc có thể cả hai) từ các trang web chính thức. Sau đó, sao chép các tệp .exe vào thư mục: C: \ Windows.

Để "đơn giản hóa" nhiệm vụ, chỉ cần sao chép các tệp này từ thư mục Windows và đặt các phím tắt của chúng trên màn hình nền. Để thuận tiện, phím tắt OptiPNG có thể được đặt tên ngay là opting-o7 (tham số nén tối đa tại đó chất lượng được duy trì). Tất cả những gì còn lại là chuyển những bức ảnh cần thiết sang phím tắt và đợi trong khi chương trình tối ưu hóa chúng.

Phương pháp này đơn giản, nhưng không thuận tiện cho lắm. Đôi khi, khi cố gắng tối ưu hóa một số lượng lớn hình ảnh, một lỗi có thể "bật lên". Ngoài ra, không phải ai cũng thích kéo và thả tệp mọi lúc.

Do đó, có một tùy chọn khác để làm việc với các tiện ích. Chúng tôi tạo một tài liệu thử nghiệm, mở và viết mã vào đó (nó chỉ hoạt động chính xác trên Hệ điều hành Windows):

Chúng tôi lưu tệp ở định dạng .reg và ở dạng mã hóa ANSI, hãy chạy tệp đó, đồng ý với tất cả các hành động và bạn đã hoàn tất. Các tiện ích được tích hợp vào Windows shell.

Hình ảnh được tối ưu hóa như thế nào? Quá trình thực hiện như sau: nhấp chuột phải vào thư mục chứa ảnh PNG chưa được tối ưu hóa (tiện ích không thay đổi tệp của phần mở rộng khác) và chọn chương trình mà chúng ta sẽ nén ảnh. Bạn có thể làm điều này lần lượt với hai tiện ích.

Sau đó, một dòng lệnh sẽ mở ra, minh họa quá trình tối ưu hóa:

Định dạng JPEG

Để nén ảnh JPEG, bạn cần các công cụ Jpegtran hoặc Jpegoptim. Tất nhiên người ta có thể sử dụng Trình chỉnh sửa GIMP và Photoshop. Tuy nhiên, Jpegtran hoặc Jpegoptim đối phó với nhiệm vụ tối ưu hóa hiệu quả hơn, vì vậy hãy tải xuống và cài đặt cả hai chương trình.

Định cấu hình Tiện ích Jpegtran

Kích hoạt Jpegtran với Windows Shell Embedding không phải là một lựa chọn tốt cho một tiện ích. Nó sẽ không hoạt động chính xác, vì mã (jpegtran -copynone -optimize -outfile min.image.jpg image.jpg) được thiết kế để nén trọng lượng của chỉ một hình ảnh, không phải tất cả các tệp trong thư mục.

Điều này có nghĩa là bạn cần sử dụng một cách khác để kích hoạt tiện ích. Jpegtran không cần phải được đặt trong thư mục C: \ Windows, nhưng bạn có thể lưu một bản sao của nó tại đây. Đặt chương trình jpegtran.exe vào bất kỳ thư mục nào và đổi tên (để thuận tiện) thành! Jpegtran.

Sau đó, sử dụng Notepad ++, tạo một tệp ở mã hóa UTF-8 (không có BOM) với phần mở rộng .bat và tên! Start. Chúng tôi đặt mã này trong đó:

Để tối ưu hóa hình ảnh, bạn cần đặt cả tệp jpegtran.exe và! Start.bat vào cùng một thư mục và bắt đầu quá trình nén bằng tệp! Start.bat:

Thiết lập chương trình Jpegoptim

Tiện ích Jpegoptim tích hợp hoàn toàn vào Windows shell. Để kích hoạt nó, bạn cần thêm mã vào cuối tệp PMGoptim.reg (nó đã được tạo trước đó cho các tiện ích cho hình ảnh PNG):

Quá trình tối ưu hóa hình ảnh bằng chương trình này rất đơn giản: nhấp chuột trái vào thư mục có hình ảnh và chọn "Run jpegoptim".

Kết quả của Jpegtran và Jpegoptim:

Dịch vụ trực tuyến

Có rất nhiều dịch vụ trên Internet cho phép bạn tối ưu hóa hình ảnh của mình một cách hiệu quả. Đôi khi kết quả công việc của họ tốt hơn những tiện ích được thảo luận ở trên.

Tuy nhiên, các dịch vụ trực tuyến làm giảm chất lượng khi nén hình ảnh. Đôi khi chỉ một vài pixel, nhưng sự biến dạng vẫn có thể nhận thấy. Có nghĩa là, kích thước của hình ảnh có thể phù hợp với chúng ta, nhưng chất lượng vẫn còn nhiều điều mong muốn.

Mô-đun của chúng tôi làm gì? Chức năng chính là tối ưu hóa hình ảnh nhiều nhất có thể, trong khi thực tế không làm giảm chất lượng. Nó dùng để làm gì? Có một số lý do: không gian trông trên máy chủ, bởi vì Theo quy luật, đó là những hình ảnh "ăn" nhất. Tuân thủ các yêu cầu của PageSpeed ​​Insights - các yêu cầu để tối ưu hóa trang web để có thứ hạng tối đa trong công cụ tìm kiếm. Tăng tốc độ tải trang bằng cách giảm tải xuống Lưu lượng truy cập Ngoài ra: Vào tháng 7, Google sẽ khởi chạy thuật toán Cập nhật tốc độ và sẽ cập nhật chỉ mục ưu tiên thiết bị di động. Với những cập nhật này, tốc độ tải và tính di động của trang web sẽ trở thành một yếu tố xếp hạng nghiêm trọng. Bạn có thể kiểm tra xem trang web của mình có vấn đề về kích thước hình ảnh hay không tại đây và tại đây. Mô-đun OptiImg của chúng tôi cho phép bạn giảm kích thước hình ảnh trên trang web của mình lên đến 99% mà không bất kỳ sự giảm chất lượng có thể nhìn thấy nào. hình ảnh sẽ giúp bạn không phải lưu lại nhiều lần và tẻ nhạt trong các ứng dụng của bên thứ ba. Không có hạn ngạch và hạn chế, hãy mua giấy phép và chuyển đổi bao nhiêu tệp tùy ý mà không cần nạp lại số dư và tất cả các loại phụ phí ! Kính gửi quý khách hàng, xin lưu ý rằng mã bản quyền giúp bạn có thể sử dụng dịch vụ của chúng tôi mà không bị hạn chế, sau khi khóa cấp phép hết hạn, bạn sẽ có thể truy cập vào dịch vụ, nhưng bạn sẽ không thể nhận được các bản cập nhật cho mô-đun của chúng tôi. Ngoài ra, xin lưu ý rằng khi mua một tiện ích mở rộng, bạn không cần phải thay đổi CLBCH trong cài đặt mô-đun. Mô-đun hoạt động trên nguyên tắc "đặt và quên". Mọi hình ảnh được tải lên infoblock sẽ được tự động nén! Tất cả hình ảnh được tối ưu hóa trong 1 cú nhấp chuột, tất cả hình ảnh tải lên infoblock, thư viện media hoặc khi trao đổi với 1C sẽ được nén tự động. khoảnh khắc này JPEG và PNG được hỗ trợ. HTTPS - giao thức được hỗ trợ. PHP7 - hỗ trợ. Giai đoạn demo cho phép bạn xử lý 1000 hình ảnh. Mỗi ngày sử dụng mô-đun của chúng tôi cho 1C - Bitrix, có tới 500 nghìn hình ảnh được xử lý! Bạn có thể kiểm tra mức nén trên trang web của mô-đun. rằng mô-đun gần như được viết hoàn toàn bằng D7, trên các phiên bản 1C - Bitrix dưới 16 - nó có thể hoạt động không chính xác. Để bắt đầu sử dụng như thế nào? Để đơn giản hóa cuộc sống của bạn, nhóm của chúng tôi luôn sẵn sàng cài đặt mô-đun chạy 1C - Bitrix trên trang web của bạn và tự thực hiện tối ưu hóa, vì điều này, sau khi mua hàng, hãy gửi yêu cầu đến e-mail của chúng tôi - [email được bảo vệ] Với chủ đề "Cài đặt", trong phần nội dung thư cho biết mã phiếu giảm giá và quyền truy cập vào trang web mà bạn muốn làm việc. Quý khách hàng thân mến! Đừng quên chia sẻ kinh nghiệm sử dụng sản phẩm của chúng tôi, để lại phản hồi, viết thư cho thảo luận và đến địa chỉ email của chúng tôi - [email được bảo vệ], chúng tôi luôn sẵn lòng giúp đỡ bạn và nhận được Phản hồi!

Của AlphaGroup

Mua: 2.000 1.800 rúp.

Ảnh chụp màn hình

Sự miêu tả

Chi tiết kỹ thuật

Sự miêu tả

Mô-đun của chúng tôi làm gì?

Chức năng chính là tối ưu hóa hình ảnh nhiều nhất có thể, trong khi thực tế không làm giảm chất lượng.

Nó dùng để làm gì?

Có một số lý do:

1. Tiết kiệm dung lượng trống trên lưu trữ, bởi vì như một quy luật, đó là những hình ảnh "ăn theo" nó nhất.
2. Tuân thủ các yêu cầu Thông tin chi tiết về tốc độ trang - các yêu cầu để tối ưu hóa trang web, để có thứ hạng tối đa trong công cụ tìm kiếm.
3. Tăng tốc độ tải trang bằng cách giảm lưu lượng tải xuống

Mô-đun của chúng tôi OptiImg cho phép bạn giảm kích thước hình ảnh trên trang web lên đến 99% mà không làm giảm chất lượng.

Nén hình ảnh tự động sẽ giúp bạn tiết kiệm bạn từ việc lưu lại lâu và tẻ nhạt trong các ứng dụng của bên thứ ba.

Không có hạn ngạch hoặc hạn chế, hãy mua giấy phép và chuyển đổi bao nhiêu tệp bạn cần mà không cần nạp tiền và bất kỳ khoản thanh toán bổ sung nào!

Khách hàng thân mến, chúng tôi thu hút sự chú ý của bạn đến thực tế là khóa cấp phép cho phép bạn sử dụng dịch vụ của chúng tôi mà không có hạn chế, sau khi khóa cấp phép hết hạn, bạn sẽ có thể truy cập vào dịch vụ, nhưng bạn sẽ không thể nhận được các bản cập nhật cho mô-đun.

Ngoài ra, xin lưu ý rằng khi mua một phần mở rộng, CLBCH trong cài đặt mô-đun không cần phải thay đổi.

Mô-đun hoạt động trên nguyên tắc "đặt và quên". Mọi hình ảnh được tải lên infoblock sẽ được nén tự động!

Tất cả các hình ảnh được tối ưu hóa trong 1 cú nhấp chuột, tất cả các hình ảnh được tải lên infoblocks, thư viện media hoặc trao đổi với 1C sẽ được nén tự động.

Hiện tại, định dạng JPEG và PNG được hỗ trợ.

HTTPS - giao thức được hỗ trợ.

PHP7 - Được hỗ trợ.

Demo - kỳ cho phép xử lý 1000 hình ảnh.

Mỗi ngày với sự giúp đỡ của chúng tôi mô-đun cho 1C - Bitrix, đã xử lý lên đến 500 nghìn hình ảnh!

Bạn có thể kiểm tra mức độ nén trên trang web của mô-đun.

Xin lưu ý rằng mô-đun gần như hoàn toàn viết bằng D7, trên các phiên bản của 1C - Bitrix dưới 16 - có thể không hoạt động chính xác.

Làm thế nào để bắt đầu sử dụng?

Để đơn giản hóa cuộc sống của bạn, nhóm của chúng tôi luôn sẵn sàng cài đặt mô-đun chạy 1C - Bitrix trên trang web của bạn và tự thực hiện tối ưu hóa, vì điều này, sau khi mua hàng, hãy gửi yêu cầu đến e-mail của chúng tôi - [email được bảo vệ] với chủ đề "Cài đặt", trong phần nội dung của bức thư chỉ ra mã phiếu giảm giá và quyền truy cập vào trang web mà bạn muốn làm việc.

Kính gửi Quý khách hàng!

Đừng quên chia sẻ kinh nghiệm của bạn khi sử dụng sản phẩm của chúng tôi, để lại phản hồi, viết trong các cuộc thảo luận và gửi đến địa chỉ email của chúng tôi - [email được bảo vệ], chúng tôi luôn sẵn lòng trợ giúp bạn và nhận phản hồi!

Nhận xét (10)

Tổng điểm: Tổng số đánh giá: 10

Một giải pháp tốt để tối ưu hóa hình ảnh

Tại thời điểm ngày 25 tháng 2 năm 2019, giải pháp hoàn toàn không hoạt động, ngay cả trên trang web của họ http://www.optiimg.ru/ bạn không thể nén trực tiếp hình ảnh, nó bị đóng băng sau khi tải.

Chúng tôi xin lỗi, giải pháp đang hoạt động, nhưng nó không hoạt động trên máy chủ của chúng tôi, vấn đề không nằm ở giải pháp, mà như người hỗ trợ kỹ thuật đã làm rõ, "vấn đề nằm ở mức độ truyền thông mạng của các trung tâm lưu trữ." Bản thân bộ phận hỗ trợ kỹ thuật đã rất tích cực trong việc giải quyết vấn đề của chúng tôi và tự mình thương lượng với việc lưu trữ trang web của chúng tôi.

Mô-đun là tuyệt vời !!!

Như họ đã viết dưới đây, tôi tham gia, nhưng đây là quyết định duy nhất mà tôi không hối hận! Module hoạt động thông minh, không bị đóng băng. Tôi đã làm sạch trang web với 3 GB. Nó là 5 GB nó trở thành 2GB.
Siêu mô-đun, được thực hiện tốt!) Tôi khuyên bạn nên)

Hỗ trợ kỹ thuật tuyệt vời và mô-đun mát mẻ

Ngay lập tức hỗ trợ kỹ thuật ngạc nhiên, tối chủ nhật họ trả lời ngay lập tức.
Mô-đun rất tuyệt, tôi đã tìm kiếm một giải pháp tương tự trong một thời gian dài. Giới thiệu!

xin chào

Hỗ trợ kỹ thuật hoạt động ngay lập tức, sau 10 giây, họ đã trả lời trò chuyện trực tuyến và trả lời các câu hỏi! Chương trình cháy, đặc biệt là khi có rất nhiều hình ảnh! Tôi giới thiệu cho tất cả mọi người!

Hỗ trợ công nghệ tuyệt vời

Có vấn đề trong hoạt động của mô-đun, tôi đã liên hệ với những người đó. Chúng tôi đã giải quyết vấn đề rất nhanh chóng, cảm ơn bạn.

Quyết định tốt

Giải pháp hoàn hảo! Những người này đã tự cài đặt mọi thứ và nén hình ảnh xuống 40%. Cảm ơn!

Cho đến nay, quyết định mua duy nhất mà chúng tôi không hối tiếc

Cho đến nay, quyết định mua duy nhất mà chúng tôi không hối tiếc. Đã xóa 5 GB.

Một mô-đun rất hữu ích và hỗ trợ kỹ thuật tuyệt vời!

Nhờ có mô-đun, nó có thể tăng gấp đôi tốc độ của trang web, điều này rất quan trọng đối với một cửa hàng trực tuyến với số lượng lớn hình ảnh. Hỗ trợ kỹ thuật đã giúp nhanh chóng giải quyết các vấn đề phát sinh, kiên nhẫn giải thích tất cả những điều tế nhị.

Mô-đun tuyệt vời, hỗ trợ tuyệt vời.

Chúng tôi đã mua một mô-đun, hỗ trợ ngay lập tức được kết nối và thiết lập mọi thứ. Nhờ tối ưu hóa hình ảnh, Google PageSpeed ​​mang lại cho trang web hơn 80 điểm trên hầu hết các trang. Tôi giới thiệu giải pháp này cho tất cả mọi người.

Mô-đun tuyệt vời

Tôi đã kiểm tra trang web trên google, có những hình ảnh lớn. Tôi đã nghĩ về cách thực hiện việc tối ưu hóa. Một giải pháp đơn giản và rẻ tiền đã được tìm thấy. Những người từ bộ phận hỗ trợ đó đã tự cài đặt, quy định mọi thứ, giờ đây khi tải ảnh, nó hoạt động tự động và nén mọi thứ thành kích thước tối ưu... Tôi đặt nó trên trang web thứ hai ngay lập tức, tôi rất hài lòng. Giới thiệu.

Phản hồi (76)

Phản hồi (76)

Tôi đã mua, trả tiền, tối ưu hóa các bức tranh. Mọi thứ đều ổn, ngoại trừ một trục trặc mà mô-đun này gọi. Cụ thể, khi tôi cố gắng chỉnh sửa sản phẩm từ giao diện của trang web, một lỗi nghiêm trọng xuất hiện

Hình ảnh chi tiết:
Quyền truy cập vào thuộc tính tĩnh chưa khai báo: Alfa1c \ Optiimg \ OptiImg :: $ _ 1260989302 (0)
/home/bitrix/www/bitrix/modules/alfa1c.optiimg/include.php:1
# 0: OptiImgEvents :: CompressOnResize (mảng, mảng, NULL, chuỗi, chuỗi, boolean)
/home/bitrix/www/bitrix/modules/main/classes/general/module.php:490
# 1: ExecuteModuleEventEx (mảng, mảng)
/home/bitrix/www/bitrix/modules/main/classes/general/file.php:1705
# 2: CAllFile :: ResizeImageGet (mảng, mảng, số nguyên, boolean)
/home/bitrix/www/bitrix/modules/main/lib/ui/fileinputunclouder.php:40
# 3: Bitrix \ Main \ UI \ FileInputUnclouder :: getSrcWithResize (mảng, mảng)
/home/bitrix/www/bitrix/modules/main/lib/ui/fileinput.php:477
# 4: Bitrix \ Main \ UI \ FileInput-> getFile (string, string, boolean)
/home/bitrix/www/bitrix/modules/main/lib/ui/fileinput.php:283
# 5: Bitrix \ Main \ UI \ FileInput-> hiển thị (mảng, boolean)
/home/bitrix/www/bitrix/modules/iblock/admin/iblock_element_edit.php:2539
# 6: bao gồm (chuỗi)
/home/bitrix/www/bitrix/admin/cat_product_edit.php:3

Nó không phải lúc nào cũng xuất hiện, nhưng rất thường xuyên. Đồng thời, đôi khi cùng một sản phẩm lúc đầu có trục trặc nhưng đến lần thứ hai hoặc thứ ba thì không có trục trặc nào.

Sergey Zabotin, đánh giá thực tế là tên của hàm bị nhầm lẫn - bạn tiếp tục sử dụng phiên bản demo, gỡ cài đặt hoàn toàn mô-đun và cài đặt lại, nếu lỗi vẫn tiếp diễn - hãy viết thư cho chúng tôi theo địa chỉ [email được bảo vệ] chúng tôi sẽ giúp bạn.

Các khả năng của mô-đun là gì nếu hình ảnh được lưu trữ trong "đám mây"? Ví dụ, nếu đó là Selectel?
Theo tôi hiểu, mô-đun nén cả khi tải và khi thay đổi kích thước, nhưng không nén nếu hình ảnh đã ở trên "đám mây"?
Bạn có dự định gì theo hướng này?

Gavril Scriabin, CMS tải tệp trực tiếp vào các đám mây của bên thứ ba, trên nền đám mây, mô-đun của chúng tôi sẽ không thể hoạt động vì những lý do rõ ràng, tương ứng, chỉ khi bạn xử lý tệp trước rồi chuyển chúng lên đám mây.

Nó sẽ hoạt động với đám mây bitrix, bởi vì Các tệp Bitrix trên đám mây được cập nhật theo thời gian.

ngày tốt
Khóa cấp phép có giá trị trong bao lâu? (cập nhật)

Ivan Prilepin, Bản cập nhật có sẵn trong 1 năm, quyền truy cập vào máy chủ không giới hạn về thời gian.

Phiên bản 1.2.8.

Roman Petrov, Viết thư cho chúng tôi qua email, chúng tôi sẽ tìm ra.

Tôi mua bộ tối ưu cách đây một năm, sau đó tôi sử dụng rất ít, bây giờ tôi muốn sử dụng lại nhưng lại bị lỗi phân quyền ?! Tôi có nên mua lại không?
Tại sao tôi nên mua nó mỗi năm cho 100 bức ảnh?

Roman Petrov, Bạn có thể mua một phần mở rộng, nếu bạn muốn cập nhật mô-đun, nếu phiên bản của mô-đun cũ hơn 1.2.2, thì việc cập nhật sẽ phải được thực hiện, bởi vì trong phiên bản này, có một cuộc tái cấu trúc lớn; trong đó, máy chủ mà mô-đun của chúng tôi truy cập đã bị thay đổi. Nếu phiên bản hiện tại của bạn mới hơn, hãy viết thư cho chúng tôi theo địa chỉ email, [email được bảo vệ]- hãy tìm ra lý do tại sao lỗi xảy ra.

Có gì mới

Cài đặt

Việc cài đặt là tiêu chuẩn từ Marketplace.

Mô-đun được truy cập thông qua phần

Dịch vụ -> Trình tối ưu hóa hình ảnh hoặc theo liên kết:
/bitrix/admin/optiimg_admin.php

Cài đặt mô-đun:
/bitrix/admin/settings.php?lang=ru&mid=alfa1c.optiimg&mid_menu=1

Xin lưu ý rằng để mô-đun hoạt động, bạn phải nhập khóa nhận được qua email sau khi mua vào trường "Khóa".

Giải pháp sử dụng thư viện cURL, theo quy tắc, nó được bao gồm theo mặc định, nếu không, hãy liên hệ với nhà cung cấp dịch vụ lưu trữ hoặc quản trị viên hệ thống của bạn để được trợ giúp.

Chúng tôi cũng thu hút sự chú ý của bạn đến thực tế là tốc độ làm việc trực tiếp phụ thuộc vào tốc độ của hệ thống con tệp máy chủ và kênh giao tiếp.

Ngoài ra, mô-đun có thể nén hình ảnh một cách nhanh chóng, chẳng hạn như được thêm vào phần tử infoblock. Để làm điều này, trong cài đặt mô-đun, hãy chọn hộp đối diện và Nén hình ảnh khi thay đổi kích thước.

Ủng hộ

Cách sử dụng mô-đun của chúng tôi một cách chính xác:

1. Cài đặt mô-đun từ thị trường.
2. Truy cập /bitrix/admin/settings.php?lang=ru&mid=alfa1c.optiimg&mid_menu=1
3. Đặt chất lượng nén, chọn hộp Nén hình ảnh khi tải lên và Nén hình ảnh khi thay đổi kích thước, nếu trang web của bạn đang chạy trên giao thức https sau đó nhập 443 vào trường cổng hoặc để trống.
4. Đi tới trình quản lý tệp và xóa thư mục / upload / resize_cache /
5. Chuyển đến giao diện làm việc với mô-đun /bitrix/admin/optiimg_admin.php
6. Nhấn nút Tối ưu hóa

Mỗi năm, các công cụ tìm kiếm ngày càng thắt chặt các ốc vít về tối ưu hóa bên ngoài. Và ngày càng được nhiều người chú ý đến các yếu tố nội bộĐịa điểm. Ví dụ: tốc độ tải trang web của bạn cũng ảnh hưởng đến sự phát triển của các vị trí trong SERP.

Tất nhiên, có nhiều cách để tăng tốc trang web của bạn, nhưng hôm nay chúng ta sẽ chỉ nói về một trong số đó - đây là tối ưu hóa hình ảnh cho trang web. Không, đây không phải là các thẻ meta khét tiếng - ALT và TITLE, chúng ta sẽ nói về các vấn đề kỹ thuật.

Đã có lúc, tôi thậm chí không nghĩ đến việc bạn có thể tối ưu hóa hình ảnh bằng cách nào đó. Và tại sao? Rốt cuộc, băng thông rộng, không giới hạn, hình ảnh từ các trang web được tải ngay lập tức. Điều gì sẽ làm giảm kích thước của hình ảnh đi 20 kilobyte? Đừng bận tâm!

Nhưng xu hướng lưu lượng truy cập di động khiến tôi suy nghĩ về tối ưu hóa. Nếu nhìn vào biểu đồ tăng trưởng lưu lượng truy cập di động, thì theo thống kê, năm 2014 cứ 3 người đăng nhập Internet từ thiết bị di động. Điều này có nghĩa là ngày càng có nhiều người truy cập các trang web và blog từ các tiện ích.

Và như bạn đã biết, tốc độ của Internet di động là một câu chuyện cổ tích. Và nếu trang web của bạn có nhiều hình ảnh, thì người dùng có thể không đợi trang web của bạn tải. Vì vậy, hiện nay, chủ đề tối ưu hóa hình ảnh cho trang web là rất phù hợp.

Trước mỗi ấn phẩm của mình, tôi tối ưu hóa và tin tôi đi, tổng trọng lượng của tất cả các hình ảnh được giảm xuống 60% mà không làm giảm chất lượng của chúng. Vì vậy, chúng ta hãy xem xét các công cụ tôi sử dụng.

Các công cụ để tối ưu hóa hình ảnh trên trang web.

Phổ biến nhất và dễ tiếp cận nhất đối với nhiều người là Photoshop. Rất có thể, nếu bạn là một blogger, quản trị viên web hoặc một người có liên quan chặt chẽ đến việc xuất bản các bài báo trên trang web của bạn, thì bạn đã cài đặt phần mềm này.

Để tối ưu hóa hình ảnh trong Photoshop, bạn cần thực hiện một số thao tác đơn giản. Đi tới Tệp -> Lưu cho Web.

Sau đó, chúng tôi thấy một cửa sổ với hai tùy chọn cho hình ảnh.

Trên cùng là ảnh gốc, dưới cùng là những gì chúng ta nhận được sau khi xử lý.

Bây giờ tôi sẽ chỉ cho bạn thủ thuật. Nhìn vào các hình ảnh và các mũi tên trên đó.

Hình ảnh đầu tiên được lưu ở chất lượng 100%. Trọng lượng của nó đã giảm 85%.

Hình thứ hai đang lưu ở chất lượng 70%. Trọng lượng của nó giảm 95%, trong khi hình ảnh trông giống hệt nhau.

Bây giờ, hãy tưởng tượng người dùng sẽ phải bỏ ra bao nhiêu thời gian để tải xuống một hình ảnh 2 megabyte trên thiết bị di động. Và nếu có 5-10 hình ảnh như vậy trong một bài báo? Đây là lý do tại sao điều quan trọng là phải tối ưu hóa hình ảnh cho trang web của bạn.

Nhưng Photoshop không lý tưởng để tối ưu hóa hình ảnh hàng loạt. Vì vậy, chúng ta hãy chuyển sang phần mềm chuyên dụng hơn.

PictureBeaver là một người bạn của người dùng windows.

Tôi đã chuyển sang macOS từ lâu và sử dụng Windows trong những trường hợp hiếm... Điều này chủ yếu là để thu thập lõi ngữ nghĩa bằng cách sử dụng KeyCollector. Vì vậy, tôi đã phải làm việc một chút để tìm chương trình đáng giáđể tối ưu hóa hình ảnh. Và để làm cho nó hoạt động trên Windows.

Hóa ra, có một chương trình PictureBeaver tuyệt vời, không tốn tài nguyên và hoạt động nhanh đáng kinh ngạc.

Nó rất dễ dàng để làm việc với chương trình. Mở thư mục có tập lệnh đã tải xuống và kéo tất cả các hình ảnh bạn định tối ưu hóa vào tệp Opti.wsf

Sau khi xử lý hình ảnh, một thư mục với các hình ảnh được tối ưu hóa và một tệp báo cáo cho mỗi hình ảnh trong số họ sẽ xuất hiện.

ImageOptim là một người bạn của những người trồng táo.

Với phần mềm này cho Sự cố MacOS không. Điều này chủ yếu là do kỹ thuật quả táo được các nhà thiết kế yêu thích và ưa chuộng nhất. Và họ thực sự thích chơi với hình ảnh. Vì vậy, tìm phần mềm cần thiết sẽ không làm khó được bạn.

Tôi đã dừng sự lựa chọn của mình vào tiện ích miễn phí ImageOptim, vì nó đối phó với nhiệm vụ chính với một tiếng nổ. Và đây là tối ưu hóa hình ảnh hàng loạt cho trang web.

Nó hoạt động khác với PictureBeaver. Nó không tạo bất kỳ thư mục mới nào với hình ảnh tạo sẵn. Nó chỉ đơn giản là thay thế các bản gốc bằng các hình ảnh được tối ưu hóa.

Nó trông như thế này:

Cửa sổ mà bạn muốn kéo hình ảnh.

Cửa sổ sau khi tối ưu hóa.

Như bạn có thể thấy, chương trình đã có thể giảm tổng trọng lượng xuống 24,8%.

Hình ảnh đầu tiên đã được tối ưu hóa trong Photoshop. Thứ hai là không.

P.S. Internet di động ngày càng phát triển, vì vậy hãy nghĩ đến sự tiện lợi cho người dùng của bạn.

Trong thế kỷ hiện tại công nghệ di động tối ưu hóa hình ảnh ở định dạng PNG và JPG, JPEG đã trở nên phù hợp trở lại, giống như những ngày mà Internet mới bước vào cuộc sống của chúng ta và ở khắp mọi nơi đều chậm và quay số. Tất nhiên, Internet di động không hoàn toàn chính xác khi so sánh với quay số, nhưng ở những nơi kết nối kém, ở đó tốc độ truy cập khá thấp. Ngay cả trong những ngày đó, người dùng không có nơi nào để đi và phải đợi trang tải. Bây giờ Internet đã phát triển, sự lựa chọn của các trang web là lớn. Người dùng trở nên ủ rũ và thiếu kiên nhẫn, và thời gian chờ tải trang trung bình giảm đáng kể. Người dùng dễ dàng tìm thấy một trang web khác nhanh hơn.
Và những gã khổng lồ về tìm kiếm như Google hay Yandex đã bắt đầu chú ý đến tốc độ tải của các trang web, ưu tiên những trang có kết quả nhanh hơn. Trọng lượng trang không đóng vai trò quan trọng nhất trong việc này, do đó, trọng lượng của trang phụ thuộc nhiều vào trọng lượng của các hình ảnh nằm trên đó. Rõ ràng là có hình ảnh nén có lợi cho mọi người. Do đó, ở đây tôi muốn nói về cách chuẩn bị các tệp PNG và JPG, JPEG để tải lên lưu trữ.

Tối ưu hóa hình ảnh cơ bản

Điều này có nghĩa là cắt bỏ các lề không cần thiết, giảm độ sâu của màu sắc, loại bỏ các chú thích và lưu hình ảnh ở một định dạng phù hợp. Để làm điều này, bạn có thể sử dụng Adobe photoshop hoặc nếu bạn không có, MS Paint hoặc GIMP.
Ngay cả việc cắt xén hình ảnh đơn giản cũng sẽ làm giảm trọng lượng của nó khá tốt.

Cách thu nhỏ hình ảnh trong MS Paint

Sử dụng MS Paint làm ví dụ, tôi sẽ chỉ cho bạn cách giảm hình ảnh xuống kích thước mong muốn.
Ví dụ: hãy lấy biểu tượng NGINX và hình ảnh nginx.png của nó với kích thước 2000 × 417 pixel, cần được cắt theo chiều rộng thành 1024, vì đây là chiều rộng của bố cục trang và không có ích gì khi làm điều đó nữa.

Ở đầu ra, chúng tôi nhận được một hình ảnh đã vượt qua mức tối ưu hóa cơ bản tối thiểu. Đã đến lúc chuyển sang việc giảm trọng lượng của cô ấy.

Trình tối ưu hóa tệp cho PNG & JPG, JPEG Compression

Cách dễ nhất và nhanh nhất để đạt được độ nén hình ảnh tối ưu mà không làm giảm chất lượng là sử dụng Trình tối ưu hóa tệp.

Trang web chính thức và mô tả của chương trình :

Tải xuống Trình tối ưu hóa tệp bạn có thể với

Sự miêu tả ... Nó là một trình tối ưu hóa hiệu quả không chỉ cho hình ảnh mà còn cho .pdf, .docx, txt và các tệp văn bản, âm thanh và video khác, cũng như các tệp lưu trữ. Danh sách đầy đủ Các tiện ích mở rộng được hỗ trợ có thể được tìm thấy tại Trang chính thức dự án.
Dưới đây là một số tiện ích được sử dụng trong công việc: AdvanceCOMP, APNG Optimizer, CSSTidy, DeflOpt, defluff, Gifsicle, Ghostcript, jhead, jpegoptim, jpegtran, Leanify, mozjpeg, MP3packer, mp4v2, OptiPNG, PngOptimizer, PNGOUT, pngquant, pngrewriteng, png twolf5... Tôi nghĩ ngay cả danh sách không đầy đủ này cũng khá ấn tượng.

Cài đặt và sử dụng Trình tối ưu hóa tệp

Tải xuống trước phiên bản mới nhất chương trình dưới dạng trình cài đặt hoặc kho lưu trữ với các tệp. Nhân tiện, kho lưu trữ có phiên bản dành cho các phiên bản Windows 32 bit và 64 bit.

Giao diện khá đơn giản và trực quan.
Nó không cần phải được cấu hình, nhưng bạn có thể tùy chỉnh một số định dạng cho mình bằng cách sử dụng nút Options ...
Sử dụng ... Bạn kéo các tập tin cần thiết và thậm chí cả các thư mục (thư mục) trong cửa sổ chương trình, hoặc chọn những cái bạn cần thông qua menu Thêm tệp ...
Để tối ưu hóa các tệp, hãy nhấp vào Tối ưu hóa tất cả các tệp

Các tệp được tối ưu hóa sẽ thay thế các tệp nguồn, hệ thống phân cấp của các danh mục cũng sẽ được giữ nguyên. Trước mỗi tệp, số liệu thống kê sẽ được hiển thị, tỷ lệ phần trăm của kích thước tệp gốc mà phiên bản được tối ưu hóa.
Sau khi hoàn thành công việc, thống kê về số lượng tệp đã xử lý, cũng như số lượng tệp bạn đã lưu, sẽ được hiển thị ở cuối dòng trạng thái.

Theo tôi, File Optimizer làm rất tốt công việc của mình.
Hạn chế duy nhất là nếu danh sách các tập tin lớn, bạn có thể chờ đợi kết quả trong một thời gian dài, nhưng nó rất đáng giá.

Nếu bạn quan tâm đến chi tiết của các phương pháp tối ưu hóa mà bạn có thể tùy chỉnh theo cách riêng của mình, thì chúng ta sẽ nói về việc thiết lập và sử dụng các tiện ích để nén hình ảnh.

Nén PNG không mất dữ liệu

Hãy xem xét 3 chương trình cho Tối ưu hóa PNG:

• Adobe photoshop
• OptiPNG
• GIỚI THIỆU

Hãy so sánh chúng về chất lượng nén hình ảnh. Chúng tôi sẽ nén nginx.png từ phần trước. Trọng lượng ban đầu 27,5 Kb.

Nén PNG bằng Adobe Photoshop

Đầu tiên trong danh sách là Photoshop nổi tiếng. Một máy thu hoạch đa chức năng dành cho một nhà thiết kế có thể làm hầu hết mọi thứ, bao gồm cả nén hình ảnh.
Mở trong Photoshop Tệp-Lưu cho Web hoặc sử dụng kết hợp Alt + Shift + Ctrl + S

Kết quả là chúng tôi nhận được 22,7 KB, tức là tăng 17,5%

Thật không may, hầu hết các chương trình đồ họa không phát huy hết tiềm năng của các thuật toán được sử dụng để nén PNG. Lý do chính thực tế là để xác định chiến lược nén tối ưu, họ sử dụng các thuật toán heuristic cho phép, không cần nén, ước tính hiệu quả của các thông số nhất định, do đó, tỷ lệ phần trăm lớn những sai lầm. Do đó, để nén PNG, chúng tôi sử dụng các tiện ích được tạo đặc biệt cho việc này, đó là OptiPNG và PNGOUT.

Sử dụng OptiPNG để nén PNG

Cách cài đặt và sử dụng OptiPNG

Downloaded.exe, tải nó lên C: \ Windows, lấy tệp PNG cần thiết, đặt nó vào một thư mục nào đó. Bây giờ, bằng cách sử dụng FAR Manager hoặc một trình quản lý tệp khác có hỗ trợ bảng điều khiển, chúng tôi đã nhập thư mục này và nhập lệnh vào bảng điều khiển

Optipng -o7 nginx.png

Lệnh buộc bạn nén PNG trong thư mục. Sau đó, chúng tôi sẽ xem xét một tùy chọn đơn giản, cách thực hiện nén bằng một cú nhấp chuột.
Nhưng trước tiên, chúng ta hãy nhìn vào kết quả.

18,8 KB, tức là tăng 31,6%, gần một phần ba. Khá không tồi, phải không? Photoshop đã tệ hơn rất nhiều.

Sử dụng PNGOUT để nén PNG

Cách cài đặt và sử dụng PNGOUT

Mọi thứ hoàn toàn giống với OptiPNG. Tải xuống PNGOUT.exe, thả nó vào C: \ Windows, mở nó trong quản lý tập tin, Ví dụ, Quản lý xa thư mục với PNG và trong dòng lệnh viết

Pngout nginx.png

Kết quả bên dưới

Kết quả là 23,4 KB, tức là quản lý để nén 15%. Rất tốt.

Nói chung, tôi sẽ nói ngay rằng tôi đã có các kết quả khác nhau với các tệp khác nhau, một nơi nào đó PNGOUT hoạt động hiệu quả hơn, một nơi nào đó OptiPNG, vì vậy tôi khuyên bạn nên chạy các hình ảnh lần lượt qua cả hai tiện ích.

Cách nhanh chóng nén PNG thành OptiPNG và PNGOUT

Tạo tệp png.reg và ghi dữ liệu cho sổ đăng ký ở đó

các cửa sổ Trình chỉnh sửa sổ đăng ký Phiên bản 5.00 @ = "Chạy OptiPNG trên Thư mục" @ = "cmd.exe / c \" TITLE Chạy OptiPNG trên% 1 && FOR / r \ "% 1 \" %% f IN (* .png) DO optipng -o7 \ "%% f \" \ "" @ = "Chạy PNGOUT trên thư mục" @ = "cmd.exe / c \" TITLE Chạy PNGOUT trên% 1 && FOR / r \ "% 1 \" %% f IN (*. png) LÀM pngout \ "%% f \" \ ""

Sau đó, bạn chạy tệp này và ghi dữ liệu vào sổ đăng ký Windows.
Bây giờ, khi bạn nhấp vào thư mục có tệp PNG mà bạn muốn nén, chọn lệnh bạn cần, quá trình nén sẽ diễn ra tự động và cho tất cả các hình ảnh cùng một lúc.

Để xóa mọi thứ khỏi danh mục, viết mã dưới đây trong png.reg và chạy nó

Windows Registry Editor phiên bản 5.00 [-HKEY_LOCAL_MACHINE \ SOFTWARE \ Classes \ Folder \ shell \ OptiPNG] [-HKEY_LOCAL_MACHINE \ SOFTWARE \ Classes \ Folder \ shell \ OptiPNG \ command] [-HKEY_LOCAL_MACHINE \ SOFTWARE \ shell PNG] -HKEY_Les \ Folder \ shell \ PNGOUT \ command]

Nén JPG, JPEG mà không làm giảm chất lượng

Để tối ưu hóa JPG, JPEG, bằng cách tương tự với PNG, có các tiện ích: jpegtran và jpegoptim. Tất nhiên, bạn có thể sử dụng Photoshop, nhưng để nén JPG, JPEG, tôi thực sự khuyên bạn nên sử dụng chúng.

Cách cài đặt, cấu hình và sử dụng jpegtran

jpegtran là một tiện ích mạnh mẽ cho phép bạn thực hiện cả nén JPG đơn giản mà không làm giảm chất lượng và nén với một mức khử răng cưa nhất định, và thậm chí chuyển đổi sang Progressive JPEG.
Bạn có thể tải jpegtran tại đây http://jpegclub.org/jpegtran/ (tìm kiếm và tải xuống jpegtran.exe).

Cách nén JPG, JPEG bằng jpegtran

Điền jpegtran.exe vào C: \ Windows
Sau đó, mở thư mục có JPEG mong muốn trong Far Manager và nhập

Jpegtran -copy none -optimize -outfile min.1.jpg 1.jpg # Tối ưu hóa cơ bản 1.jpg # -copy none xóa siêu dữ liệu khỏi JPG # -optimize tối ưu hóa hình ảnh

JPG liên tục, JPEG

Đây là một loại JPG, khi trang được tải, đầu tiên sẽ hiển thị các đường nét chung, sau đó nó được tải và đưa chất lượng hình ảnh lên mức tối đa. Rất tiện dụng cho internet di động chậm và do đó cần được sử dụng.

Jpegtran -progressive -outfile 1.jpg 1.jpg # Chuyển định dạng 1.jpg thành Progressive

Cách kiểm tra xem hình ảnh có phải là JPEG liên tục hay không

Các tính năng jpegtran nâng cao

Tất cả đều có ở đây các lựa chọn khả thi sử dụng jpegtran

Jpegtran - cách sử dụng phần mềm trợ giúp: jpegtran inputfile outputfile Công tắc (tên có thể viết tắt): -copy none Sao chép không có dấu bổ sung từ tệp nguồn-bản ghi chú thích Chỉ sao chép các dấu nhận xét (mặc định)-sao chép tất cả Sao chép tất cả các dấu phụ-tối ưu hóa Bảng Optimize Huffman ( tệp nhỏ hơn, nhưng nén chậm) -sản xuất Tạo tệp JPEG liên tục Công tắc để sửa đổi hình ảnh: -crop WxH + X + Y Cắt thành một vùng phụ hình chữ nhật -flip Hình ảnh phản chiếu (trái-phải hoặc trên-dưới) -grayscale Giảm thành thang độ xám ( bỏ qua dữ liệu màu) -Không hoàn hảo nếu có các khối cạnh không thể biến đổi-xoay Xoay hình ảnh (độ theo chiều kim đồng hồ) -tốc độ M / N Hình ảnh đầu ra theo tỷ lệ M / N, ví dụ: 1/8-Hình ảnh chuyển đổi mục đích-chuyển ngang Chuyển vị ngang image -trim Thả các khối cạnh không thể biến đổi -với WxH + X + Y Xóa (màu xám) một vùng phụ hình chữ nhật Công tắc dành cho người dùng nâng cao: -arithmetic Sử dụng mã số học-phần đầu N Đặt khoảng thời gian khởi động lại theo hàng hoặc theo khối với B -m nhớ N Bộ nhớ tối đa để sử dụng (tính bằng kbyte) -outfile name Chỉ định tên cho tệp đầu ra -verbose hoặc -debug Phát ra đầu ra gỡ lỗi Công tắc cho wizards: -scans tệp Tạo JPEG đa quét cho mỗi tệp script

Cách nhanh chóng tự động nén JPEG bằng jpegtran trên Windows

Sẽ không thể nén thông qua menu ngữ cảnh do đặc thù của tiện ích, tuy nhiên, bạn có thể tự động định cấu hình nén nhiều ảnh JPEG cùng một lúc trên máy.
Để thực hiện việc này, chúng ta cần tạo một tệp có phần mở rộng .bat (để được trợ giúp) và viết vào đó

Cd / d. for %% j in (* .jpg) do call: sheensay "%% ~ nxj" "%% ~ nj.jpg" goto: eof: sheensay jpegtran -copy none -optimize -progressive "% ~ 1" "% ~ 2 "

Cách cài đặt, cấu hình và sử dụng jpegoptim

Cách nén JPG, JPEG bằng jpegoptim

Điền jpegoptim.exe trong C: \ Windows. Sau đó, chúng tôi mở thư mục với Hình ảnh jpg sử dụng Far Manager và truy cập vào bảng điều khiển

Jpegoptim * .jpg --strip-all - all-progressive

Cách tối ưu hóa nhiều JPG, JPEG cùng một lúc bằng jpegoptim

Không giống như jpegtran, tiện ích jpegoptim khá độc đáo cho phép bạn làm việc với nó từ menu ngữ cảnh.
Ví dụ: hãy tạo một tệp jpegoptim.reg bằng cách sử dụng Far Manager và viết vào đó

Windows Registry Editor phiên bản 5.00 @ = "Chạy jpegoptim trên thư mục" @ = "cmd.exe / c \" TITLE Chạy jpegoptim trên% 1 && FOR / r \ "% 1 \" %% f IN (* .jpg) DO jpegoptim * .jpg --strip-all --all-progressive \ "%% f \" \ ""

Khởi chạy, nhập dữ liệu vào sổ đăng ký. Giờ đây, bạn có thể nén nhiều tệp JPEG bằng menu ngữ cảnh, chỉ cần đặt các hình ảnh mong muốn vào một thư mục, RMB và "Chạy jpegoptim trên Thư mục".

Nếu bạn muốn xóa jpegoptim khỏi sổ đăng ký và menu ngữ cảnh, hãy viết jpegoptim.reg

Windows Registry Editor phiên bản 5.00 [-HKEY_LOCAL_MACHINE \ SOFTWARE \ Classes \ Folder \ shell \ jpegoptim] [-HKEY_LOCAL_MACHINE \ SOFTWARE \ Classes \ Folder \ shell \ jpegoptim \ command]

Lưu, chạy, thực hiện các thay đổi đối với sổ đăng ký.

Jpegtran và jpegoptim nén jpg, jpeg tốt như thế nào

Hãy chuyển sang phần thử nghiệm. Lấy tệp caching.jpg làm ví dụ. Trong bản gốc, nó nặng 29,5 KB

Kiểm tra chất lượng nén JPG, JPEG jpegtran

Đầu ra là 29,1 KB, nén tiết kiệm được 1,36%

Kiểm tra jpegoptim về chất lượng nén JPG, JPEG

V Windows Explorerđiều này không hiển thị, nén là vài trăm byte.

Tốt, tập tin gốcđã được chuẩn bị kỹ lưỡng, vì vậy việc nén không có hiệu quả rõ ràng, nhưng khi bạn xử lý các hình ảnh chưa được tối ưu hóa của mình, đôi khi bạn sẽ tự hỏi mức độ tiết kiệm kích thước có thể tốt như thế nào.

Cách định cấu hình tự động nén png và jpg, jpeg

Nếu bạn đã đọc đến phần này, nhưng vẫn không hài lòng với các tùy chọn được đề xuất, tôi khuyên bạn nên tự lắp ráp một máy gặt cầm tay - một dịch vụ nén ảnh, ảnh, hình ảnh sẽ hoạt động như bạn cần ngay trên máy tính để bàn của bạn.

Phải được cài đặt trước jpegtran, jpegoptim, optipng, pngout NS
Hướng dẫn cài đặt ở trên.

Vì vậy, đối với điều này, chúng ta cần phải lắp ráp chính xác kiến ​​trúc thư mục. Giả sử bạn có một thư mục hình ảnh với hệ thống phân cấp các thư mục PNG và JPG riêng mà bạn cần xử lý.
Tạo thư mục tối ưu, thả thư mục hình ảnh với tất cả các thư mục con và tệp vào đó.
Mở nó, mở Optimus trong đó, tạo tệp go.bat ở đó và ghi vào đó

@ECHO OFF CLS SetLocal EnableExtensions EnableDelayedExpansion set home_path =% ~ dp0 :: Tên thư mục chứa ảnh thô đặt folder = images echo Xử lý tệp * .JPG qua jpegtran :: Tạo thư mục để lưu trữ nén jpg... Trong trường hợp của chúng tôi, đây là jpeg_images xcopy / y / t / c / i "% folder%" "jpg_% folder%" :: Đối với mỗi .jpg, chúng tôi thực hiện tối ưu hóa bằng cách sử dụng jpegtran. Output.jpg sẽ được ghi vào jpeg_images cho / r% thư mục% %% a trong (* .jpg) do (set fn = %% a & jpegtran -copy none -optimize -progressive -outfile% home_path% jpg_! Fn: % ~ dp0 =!% home_path%! fn:% ~ dp0 =!) echo Xử lý tệp * .JPG qua jpegtran đã hoàn tất :: Cho biết bây giờ bạn cần chạy nó trong một thư mục mới jpeg_images set folder = jpg_% folder% echo Xử lý tệp * .JPG qua jpegoptim cho / r% thư mục% %% a trong (* .jpg) do (set fn = %% a & jpegoptim %% ~ a --strip-all) echo Xử lý tệp * .JPG qua jpegoptim Hoàn thành xử lý tiếng vang *. Tệp PNG qua optipng xcopy / y / t / c / i "% folder%" "png_% folder%" cho / r% folder% %% a in (* .png) do (set fn = %% a & optipng -o7% % ~ a -out% home_path% png_! fn:% ~ dp0 =!) echo Xử lý tệp * .PNG qua optipng đã hoàn thành bộ thư mục = png_% thư mục% echo Xử lý tệp * .PNG qua pngout cho / r% thư mục% %% a in (* .png) do (set fn = %% a & pngout %% ~ a) echo Xử lý tệp * .PNG qua pngout đã hoàn tất tạm dừng

Mã được nhận xét trong bộ phận quan trọng... Trên thực tế, không có gì phức tạp, hãy tìm hiểu nó nếu bạn cần.

Bây giờ lưu go.bat và chạy nó.

Nếu có nhiều tệp, việc nén ảnh sẽ mất một khoảng thời gian. Chờ cho đến khi bảng điều khiển thông báo về việc kết thúc quá trình.

Nén được thực hiện với việc tách các tệp riêng biệt JPG, hiện được đặt trong jpg_images và PNG riêng biệt, được đặt trong png_images.

Nếu bạn cần thay đổi chất lượng hoặc các thông số khác, hãy xem mô tả các tiện ích ở trên và thay đổi mã cho phù hợp với nhu cầu của bạn.

Cách tối ưu hóa và nén ảnh GIF

Cuối cùng

Trong bài viết này, tôi đã cố gắng trình bày càng rộng càng tốt các cách tối ưu hóa PNG và JPG. Nếu có thắc mắc, bổ sung, hãy ghi vào phần bình luận, chúng ta sẽ cùng thảo luận

Ilya là Người ủng hộ nhà phát triển và Chuyên gia về web hoàn thiện

Hình ảnh là tài nguyên thường chiếm nhiều dung lượng trên trang và nặng nề nhất. Bằng cách tối ưu hóa chúng, chúng tôi có thể giảm đáng kể lượng dữ liệu tải xuống và cải thiện hiệu suất của trang web. Hình ảnh được nén càng nhiều thì càng ít băng thông kênh tải xuống và trình duyệt nhanh hơn sẽ có thể hiển thị trang cho người dùng.

Tối ưu hóa hình ảnh vừa là một khoa học vừa là một nghệ thuật. Chúng ta có thể gọi nó là nghệ thuật vì không ai có thể đưa ra câu trả lời chắc chắn về cách tốt nhất để nén một hình ảnh cụ thể. Tuy nhiên, đây cũng là một khoa học, bởi vì chúng tôi đã phát triển các kỹ thuật và thuật toán theo ý của mình có thể giảm đáng kể kích thước của tài nguyên. Có nhiều yếu tố cần xem xét khi chọn cài đặt tối ưu cho hình ảnh: khả năng định dạng, dữ liệu được mã hóa, chất lượng, số lượng pixel, v.v.

Xóa và thay thế hình ảnh

TL; DR

• Xóa những hình ảnh không cần thiết.
• Áp dụng các hiệu ứng CSS3 bất cứ khi nào có thể.
• Sử dụng phông chữ web thay vì mã hóa văn bản trong hình ảnh.

Trước hết, hãy tự đặt câu hỏi: hình ảnh này có thực sự cần thiết? Thiết kế đẹp phải đơn giản và không làm giảm hiệu suất. Đặt cược tốt nhất của bạn là chỉ cần xóa hình ảnh không cần thiết vì nó có kích thước lớn hơn nhiều byte so với HTML, CSS, JavaScript và các tài nguyên khác trên trang. Đồng thời, một hình ảnh ở đúng vị trí có thể thay thế văn bản dài, vì vậy bạn cần tự tìm sự cân bằng và đưa ra quyết định đúng đắn.

Sau đó, bạn nên kiểm tra xem bạn có thể đạt được kết quả mong muốn theo cách hiệu quả hơn hay không:

• Nhờ vào Hiệu ứng CSS(gradient, bóng đổ, v.v.) và hoạt ảnh CSS, bạn có thể tạo nội dung trông sắc nét ở bất kỳ độ phân giải và tỷ lệ nào và có trọng lượng nhẹ hơn nhiều so với hình ảnh.
• Phông chữ web Cho phép bạn sử dụng các hộp văn bản đẹp mắt trong khi vẫn giữ được khả năng chọn, tìm kiếm và thay đổi kích thước văn bản. Nhờ đó, làm việc với tài nguyên của bạn sẽ trở nên thuận tiện hơn.

Tránh mã hóa văn bản trong hình ảnh. Chữ đẹp là điều cần thiết để thiết kế chất lượng, quảng bá thương hiệu và làm việc thoải mái với một tài nguyên, nhưng văn bản trong hình ảnh chỉ cản trở tất cả những điều này. Nó không thể được chọn, tìm thấy, phóng to, sao chép và trông không đẹp trên các thiết bị có độ phân giải cao. Tất nhiên, phông chữ web cũng cần tối ưu hóa, nhưng chúng có thể giúp tránh các vấn đề trên. Luôn chọn chúng để hiển thị văn bản.

Vectơ và bitmap

TL; DR

• Định dạng vectơ là tuyệt vời cho hình ảnh của các hình dạng hình học.
• Chất lượng của hình ảnh vector không phụ thuộc vào tỷ lệ và độ phân giải.
• Sử dụng định dạng raster cho những hình ảnh phức tạp với nhiều hình thức không chuẩn và chi tiết.

Nếu bạn quyết định rằng bạn nên sử dụng một hình ảnh để đạt được kết quả, hãy chọn định dạng thích hợp cho nó:

Hình ảnh vector

Bản đồ bit

• Đồ họa vector sử dụng các đường, điểm và đa giác để hiển thị hình ảnh.
• Trong đồ họa raster, các giá trị riêng lẻ của từng pixel trong lưới hình chữ nhật được mã hóa và hình ảnh được hiển thị dựa trên chúng.

Mỗi định dạng đều có ưu và nhược điểm riêng. Định dạng vectơ lý tưởng cho hình ảnh được tạo từ các hình dạng hình học đơn giản (chẳng hạn như biểu trưng, ​​văn bản, biểu tượng, v.v.). Chúng vẫn sắc nét ở bất kỳ độ phân giải và tỷ lệ nào, vì vậy hãy sử dụng định dạng này cho màn hình lớn và các tài nguyên sẽ được hiển thị ở các kích thước khác nhau.

Tuy nhiên, các định dạng vectơ không phù hợp với các hình ảnh phức tạp (chẳng hạn như ảnh chụp). Có thể có quá nhiều đánh dấu SVG để mô tả tất cả các hình dạng, nhưng hình ảnh thu được sẽ trông không thực tế. Trong trường hợp này, bạn nên sử dụng định dạng ảnh bitmap như GIF, PNG, JPEG hoặc các định dạng JPEG-XR và WebP mới hơn.

Chất lượng của ảnh bitmap phụ thuộc vào độ phân giải và tỷ lệ: khi được phóng to, nó sẽ bị mờ và phân rã thành các pixel. Do đó, bạn có thể cần lưu nhiều phiên bản bitmap ở các độ phân giải khác nhau.

Tối ưu hóa cho màn hình có độ phân giải cao

TL; DR

• Trên màn hình có độ phân giải cao, một pixel CSS duy nhất được tạo thành từ nhiều pixel màn hình.
• Hình ảnh độ phân giải cao có nhiều pixel và byte hơn nhiều so với hình ảnh bình thường.
• Các kỹ thuật tối ưu hóa có thể được áp dụng cho hình ảnh ở bất kỳ độ phân giải nào.

Khi nói về pixel, bạn nên phân biệt giữa pixel màn hình và pixel CSS. Một pixel CSS có thể khớp với một hoặc nhiều pixel màn hình. Điều này được thực hiện để trên các thiết bị có số lượng pixel màn hình lớn, hình ảnh rõ ràng và chi tiết hơn.

Tất nhiên, trên màn hình có DPI cao(HiDPI) đồ họa trông rất đẹp. Tuy nhiên, để trông đẹp ở độ nét cao, hình ảnh của chúng ta cần phải chi tiết hơn. Nhưng chúng tôi có một giải pháp: các định dạng vectơ là hoàn hảo cho nhiệm vụ này. Chúng vẫn sắc nét ở bất kỳ độ phân giải nào. Ngay cả khi chi phí hiển thị các chi tiết đẹp tăng lên, chúng tôi vẫn sử dụng một tài nguyên độc lập với màn hình.

Mặt khác, bitmap phức tạp hơn nhiều vì chúng mã hóa dữ liệu hình ảnh trong mỗi pixel. Do đó, số lượng pixel càng cao thì kích thước của tài nguyên đó càng lớn. Ví dụ: hãy xem xét sự khác biệt giữa ảnh 100x100 pixel CSS:

Khi chúng tôi tăng gấp đôi độ phân giải màn hình, tổng số điểm ảnh tăng gấp bốn lần cùng một lúc: hai lần theo chiều dọc và hai lần theo chiều ngang.

Tổng kết. Đồ họa trông rất hấp dẫn trên màn hình có độ phân giải cao, vì vậy bạn có thể tạo ấn tượng tốt về trang web của bạn. Tuy nhiên, những màn hình này yêu cầu hình ảnh có độ phân giải cao. Chọn các định dạng vectơ vì chúng trông sắc nét trên mọi thiết bị. Nếu bạn cần sử dụng bitmap, hãy thêm một số biến thể tài nguyên được tối ưu hóa (xem bên dưới).

Tối ưu hóa hình ảnh vector

TL; DR

• SVG là một định dạng hình ảnh trên Dựa trên XML
• Các tệp SVG cần được thu nhỏ để giảm kích thước của chúng.
• Nén tệp SVG với GZIP.

Tất cả các trình duyệt hiện đại đều hỗ trợ Định dạng SVG(Đồ họa Vectơ có thể mở rộng). Nó là một định dạng hình ảnh dựa trên XML cho đồ họa 2D. Đánh dấu SVG có thể được nhúng trực tiếp vào một trang hoặc tài nguyên bên ngoài. Đổi lại, tệp SVG có thể được tạo bằng bất kỳ phần mềm vẽ vector nào hoặc theo cách thủ công trong trình soạn thảo văn bản.

Ví dụ trên cho thấy một hình tròn với viền đen và nền đỏ. Nó được xuất từ ​​Adobe Illustrator. Như bạn có thể đoán, nó chứa rất nhiều siêu dữ liệu, chẳng hạn như thông tin lớp, nhận xét và không gian tên XML, thường không cần thiết để hiển thị tài nguyên trong trình duyệt. Do đó, các tệp SVG sẽ được giảm thiểu bằng cách sử dụng công cụ svgo.

Ví dụ: svgo giảm kích thước của tệp SVG ở trên 58% từ 470 xuống 199 B. Ngoài ra, vì SVG là định dạng dựa trên XML, chúng tôi có thể áp dụng nén GZIP để giảm kích thước của tệp khi truyền. Đảm bảo máy chủ của bạn được định cấu hình để nén nội dung SVG.

Tối ưu hóa bitmap

TL; DR

• Một bitmap là một lưới các pixel.
• Mỗi pixel được mã hóa thông tin về màu sắc và độ trong suốt.
• Để giảm kích thước của hình ảnh, máy nén sử dụng các kỹ thuật khác nhau để giảm số bit trên mỗi pixel.

Một bitmap chỉ đơn giản là một lưới hai chiều gồm các pixel riêng lẻ. Ví dụ: hình ảnh 100x100 pixel liên tiếp là 10.000 pixel. Mỗi pixel chứa các giá trị RGBA của kênh đỏ (R), xanh lục (G) và xanh lam (B), cũng như kênh alpha hoặc trong suốt (A).

Trình duyệt đặt 256 giá trị (sắc thái) cho mỗi kênh, là 8 bit trên mỗi kênh (2 ^ 8 = 256) và 4 byte trên mỗi pixel (4 kênh x 8 bit = 32 bit = 4 byte). Do đó, khi biết kích thước của lưới, chúng ta có thể dễ dàng tính toán kích thước tệp:

• Hình ảnh 100 x 100 px bao gồm 10.000 pixel
• 10.000 px x 4 B = 40.000 B
• 40.000 B / 1024 = 39 KB

Có vẻ như 39KB là không nhiều đối với hình ảnh 100x100 pixel. Tuy nhiên, khi kích thước tập tin tăng lên, dung lượng tập tin sẽ lớn hơn rất nhiều, và bạn sẽ phải tốn nhiều thời gian và tài nguyên để tải xuống. Hình ảnh này hiện không được nén. Có thể làm gì để giảm kích thước của nó?

Một cách dễ dàng để tối ưu hóa hình ảnh là giảm độ sâu màu từ 8 bit trên mỗi kênh bằng cách chọn bảng màu nhỏ hơn... Bằng cách đặt độ sâu thành 8 bit cho mỗi kênh, chúng tôi nhận được 256 giá trị cho kênh và 16,777,216 (2563) màu. Có lẽ bạn nên giảm bảng màu xuống 256 màu? Sau đó, chúng ta sẽ chỉ cần 8 bit cho tất cả các kênh RGB và chỉ 2 byte cho mỗi pixel chứ không phải 4 như trước đây. Chúng tôi đã nén các hình ảnh xuống một nửa!

Sau khi tối ưu hóa dữ liệu theo từng pixel riêng lẻ, chúng ta hãy chú ý đến các pixel lân cận. Nó chỉ ra rằng màu sắc của các pixel như vậy trong nhiều hình ảnh, đặc biệt là trong các bức ảnh, thường tương tự nhau. Điều này cho phép máy nén áp dụng mã hóa delta. Thay vì tiết kiệm giá trị cá nhânđối với mỗi pixel, chỉ có thể xác định sự khác biệt giữa các pixel liền kề. Nếu chúng giống nhau, thì delta bằng 0 và chúng ta chỉ cần lưu trữ một bit. Nhưng đó không phải là tất cả!

Chúng tôi thường không nhận thấy sự khác biệt trong một số sắc thái, vì vậy chúng tôi có thể tối ưu hóa hình ảnh bằng cách giảm hoặc tăng bảng màu cho những màu đó. Mỗi pixel trong lưới 2D có một số lân cận, vì vậy chúng tôi có thể cải thiện mã hóa delta. Không tập trung vào các vùng lân cận trực tiếp của một pixel, mà tập trung vào toàn bộ các khối màu tương tự và mã hóa chúng bằng các cài đặt khác nhau.

Như bạn có thể thấy, việc tối ưu hóa hình ảnh ngày càng trở nên khó khăn hơn. Có nghiên cứu khoa học và thương mại về chủ đề này vì hình ảnh có nhiều byte và việc phát triển các kỹ thuật nén mới sẽ có lợi. Nếu bạn muốn tìm hiểu thêm, hãy đọc hoặc xem các ví dụ cụ thể trong.

Vậy làm cách nào để tất cả những thứ phức tạp này giúp chúng ta tối ưu hóa hình ảnh của mình? Một lần nữa, chúng ta không cần phải phát minh ra các phương pháp nén mới. Tuy nhiên, chúng ta cần biết các khía cạnh chính của câu hỏi: pixel RGBA, độ sâu màu và các kỹ thuật khác nhau tối ưu hóa. Điều này là cần thiết để tiếp tục cuộc trò chuyện về các định dạng bitmap.

Nén dữ liệu mất dữ liệu và không mất dữ liệu

TL; DR

• Đưa ra các tính năng tầm nhìn của con người, nén dữ liệu bị mất có thể được áp dụng cho hình ảnh.
• Nén dữ liệu mất dữ liệu và không mất dữ liệu được sử dụng để tối ưu hóa hình ảnh.
• Sự khác biệt trong các định dạng hình ảnh là sự khác biệt về cách thức và thuật toán của các nén này được áp dụng để giảm kích thước của tài nguyên.
• Không có định dạng hoặc cài đặt chất lượng tốt nhất phù hợp với tất cả các hình ảnh. Khi kết hợp các máy nén và tài nguyên khác nhau, chúng ta sẽ không bao giờ nhận được cùng một kết quả.

Đối với một số loại dữ liệu nhất định, chẳng hạn như mã nguồn trang hoặc tập tin thực thi, bắt buộc máy nén không được xóa hoặc thay đổi thông tin ban đầu. Một bit dữ liệu bị thiếu hoặc không chính xác có thể làm sai lệch hoặc phá hủy hoàn toàn giá trị nội dung của tệp. Tuy nhiên, các loại dữ liệu khác có thể được truyền đạt một cách gần đúng.

Do đặc thù của thị giác con người, chúng tôi có thể không nhận thấy sự vắng mặt của bất kỳ thông tin nào về mỗi pixel, ví dụ, chúng tôi sẽ không thấy sự khác biệt giữa một số sắc thái của màu sắc. Do đó, chúng ta có thể sử dụng ít bit hơn để mã hóa một số màu và do đó giảm kích thước tài nguyên. Do đó, tối ưu hóa hình ảnh tiêu chuẩn có hai bước chính:

1. Nén hình ảnh [lossy] (http://ru.wikipedia.org/wiki/Lossy_data_compression), loại bỏ một số dữ liệu pixel.
2. [Lossless] Nén hình ảnh (http://en.wikipedia.org/wiki/Lossless_compression), trong đó dữ liệu pixel được nén.

Bước đầu tiên là tùy chọn. Thuật toán chính xác phụ thuộc vào tỷ lệ khung hình cụ thể, nhưng xin lưu ý rằng mỗi hình ảnh có thể được nén nếu mất dữ liệu. Trên thực tế, sự khác biệt giữa các định dạng hình ảnh như GIF, PNG, JPEG, v.v. chính là sự kết hợp các thuật toán khác nhau nén dữ liệu mất dữ liệu và không mất dữ liệu.

Cách tốt nhất để kết hợp nén mất dữ liệu và không mất dữ liệu là gì? Nó phụ thuộc vào bản thân hình ảnh và các điều kiện khác như sự cân bằng giữa kích thước tệp và độ nhiễu. Để có được hình ảnh chi tiết, sắc nét, bạn không cần phải áp dụng tính năng nén mất dữ liệu. Nếu kích thước tệp quan trọng hơn đối với bạn, hãy sử dụng phương pháp tối ưu hóa này. Không có cài đặt duy nhất cho tất cả các hình ảnh. Bản thân bạn phải xác định kết quả mong muốn và đưa ra quyết định.

Khi sử dụng tính năng nén mất dữ liệu như JPEG, bạn có thể chọn cài đặt chất lượng (như thanh trượt Lưu cho Web trong Adobe Photoshop). Thông thường, đây là một giá trị từ 1 đến 100, xác định xem có nên sử dụng thuật toán nén mất dữ liệu hay không. Đừng ngại giảm chất lượng: thường thì hình ảnh trông vẫn đẹp và kích thước tệp nhỏ đi đáng kể.

Chọn tỷ lệ khung hình

TL; DR

• Chọn định dạng tiêu chuẩn thích hợp: GIF, PNG hoặc JPEG.
• Hãy thử các cài đặt khác nhau cho từng định dạng (chất lượng, kích thước bảng màu, v.v.) và chọn cách thích hợp nhất.
• Đối với các ứng dụng khách hiện đại, hãy thêm nội dung ở định dạng WebP và JPEG XR vào hình ảnh được chia tỷ lệ:
• Chia tỷ lệ hình ảnh là một trong những kỹ thuật tối ưu hóa đơn giản và hiệu quả nhất.
• Nếu bạn sử dụng hình ảnh lớn, người dùng có thể tải xuống dữ liệu không cần thiết.
• Giảm số lượng pixel không cần thiết bằng cách chia tỷ lệ hình ảnh của bạn theo kích thước hiển thị của chúng. Giảm số lượng pixel không cần thiết bằng cách giảm hình ảnh xuống kích thước hiển thị.

Ngoài các thuật toán nén mất dữ liệu và không mất dữ liệu, các định dạng hình ảnh hỗ trợ các tính năng khác như hoạt ảnh và kênh trong suốt (kênh alpha). Vì vậy, khi lựa chọn một định dạng phù hợp, bạn cần phải xem xét mong muốn hiệu ứng hình ảnh và các yêu cầu đối với trang web hoặc ứng dụng.

Có ba định dạng tiêu chuẩn hình ảnh: GIF, PNG và JPEG. Ngoài ra, một số trình duyệt hỗ trợ các định dạng WebP và JPEG XR mới, có nhiều tính năng nén hơn và bổ sung. Vậy bạn nên chọn định dạng nào?

1. Hình ảnh có nên được hoạt hình không? Sau đó chọn định dạng GIF.
2. Bảng màu GIF chỉ bao gồm 256 màu. Điều này là không đủ cho hầu hết các hình ảnh. Ngoài ra, PNG-8 nén hình ảnh tốt hơn với một bảng màu nhỏ. Do đó, chỉ chọn GIF nếu bạn cần hoạt ảnh.
3. Bạn cần chụp tất cả các chi tiết nhỏ ở độ phân giải cao nhất có thể? Sử dụng PNG.
4. Định dạng PNG không sử dụng tính năng nén mất dữ liệu, ngoài việc chọn kích thước bảng màu. Nhờ đó, hình ảnh được lưu trữ trong chất lượng cao, nhưng nặng hơn nhiều so với các định dạng tệp khác. Chỉ sử dụng định dạng này khi cần thiết.
5. Nếu hình ảnh có các hình dạng hình học, hãy chuyển đổi nó sang định dạng vectơ (SVG-)!
6. Tránh văn bản trong hình ảnh. Nó không thể được chọn, tìm thấy hoặc phóng to. Nếu cần văn bản để tạo thiết kế, hãy sử dụng phông chữ web.
7. Bạn có đang tối ưu hóa ảnh chụp, ảnh chụp màn hình hoặc loại ảnh tương tự không? Sử dụng JPEG.
8. JPEG sử dụng kết hợp nén mất dữ liệu và không mất dữ liệu để giảm kích thước tệp. Để tìm ra sự kết hợp tốt nhất giữa chất lượng hình ảnh và kích thước hình ảnh, hãy thử đặt nhiều mức chất lượng JPEG.

Khi bạn đã xác định được định dạng và cài đặt thích hợp cho tất cả nội dung, hãy thêm một tùy chọn bổ sung vào WebP và JPEG XR. Đây là những định dạng mới chưa được hỗ trợ trong tất cả các trình duyệt. Tuy nhiên, việc sử dụng chúng có thể làm giảm đáng kể kích thước tệp. Ví dụ: WebP nén hình ảnh nhiều hơn JPEG.

Vì WebP và JPEG XR không được hỗ trợ trong tất cả các trình duyệt, bạn cần thêm logic bổ sung vào các ứng dụng hoặc máy chủ để gửi tài nguyên thích hợp cho người dùng.

• Một số mạng phân phối nội dung cung cấp các dịch vụ tối ưu hóa hình ảnh, bao gồm cả việc cung cấp các tệp JPEG XR và WebP.
• Một số công cụ nguồn mở, chẳng hạn như Tốc độ trang cho Apache và Nginx, tự động tối ưu hóa, chuyển đổi và cung cấp các tài nguyên thích hợp.
• Bạn có thể thêm logic ứng dụng bổ sung để xác định ứng dụng khách và các định dạng được hỗ trợ, sau đó gửi sự lựa chọn tốt nhất nguồn.

Xin lưu ý rằng nếu bạn đang sử dụng Webview để hiển thị nội dung trong một ứng dụng gốc, thì bạn có thể kiểm soát hoàn toàn ứng dụng khách và chỉ sử dụng WebP. V Ứng dụng Facebook, Google+, v.v., WebP được sử dụng vì nó thực sự cải thiện hiệu suất. Để tìm hiểu thêm về định dạng này, hãy xem bản trình bày WebP: Triển khai hình ảnh nhanh hơn, nhỏ hơn và đẹp hơn từ Google I / O 2013.

Các công cụ và tùy chọn

Không có một định dạng, công cụ hoặc thuật toán tối ưu hóa hoàn hảo nào hoạt động cho tất cả các hình ảnh. Để có được kết quả tốt nhất, bạn nên chọn định dạng và cài đặt của nó tùy thuộc vào nội dung, cũng như các yêu cầu về hình ảnh và kỹ thuật.

Hãy thử nghiệm với các cài đặt máy nén. Đặt các cài đặt chất lượng khác nhau, chọn tùy chọn thích hợp và áp dụng nó cho các hình ảnh tương tự khác trên trang web. Nhưng hãy nhớ rằng: không phải tất cả nội dung đồ họa đều cần được nén bằng cùng một phương pháp!

Chia tỷ lệ của hình ảnh đã truyền

TL; DR

Kích thước hình ảnh là tổng số pixel nhân với số byte được sử dụng để mã hóa mỗi pixel. Tối ưu hóa hình ảnh tóm lại là giảm hai thành phần này.

Do đó, một trong những kỹ thuật tối ưu hóa đơn giản và hiệu quả nhất là đảm bảo rằng kích thước của hình ảnh tải lên không lớn hơn kích thước hiển thị của nó trong trình duyệt. Không có gì lạ mắt, nhưng nhiều trang web làm sai lầm nghiêm trọng... Chúng lưu trữ các tài nguyên lớn và bản thân trình duyệt phải mở rộng quy mô và hiển thị chúng ở độ phân giải thấp hơn. Trong số những thứ khác, điều này làm tăng tải cho bộ xử lý của người dùng.

Bằng cách gửi thêm pixel và để trình duyệt tự mở rộng tài nguyên, chúng tôi đang bỏ lỡ cơ hội tối ưu hóa số byte cần thiết để hiển thị trang. Lưu ý rằng việc chia tỷ lệ không chỉ làm giảm số lượng pixel mà còn thay đổi kích thước hình ảnh gốc.

Lưu ý rằng trong cả ba trường hợp, kích thước hiển thị chỉ nhỏ hơn 10 pixel so với kích thước ban đầu. Tuy nhiên, kích thước gốc của hình ảnh càng lớn thì càng phải mã hóa và gửi nhiều dữ liệu không cần thiết. Ngay cả khi bạn không thể thiết lập sự khớp hoàn toàn giữa kích thước gốc và kích thước hiển thị, bạn phải giảm số lượng pixel không cần thiết càng nhiều càng tốt.

Danh sách các phương pháp tối ưu hóa

Tối ưu hóa hình ảnh vừa là một khoa học vừa là một nghệ thuật. Chúng ta có thể gọi nó là nghệ thuật vì không ai có thể đưa ra câu trả lời chắc chắn về cách tốt nhất để nén một hình ảnh cụ thể. Tuy nhiên, đây cũng là một khoa học, bởi vì chúng tôi đã phát triển các kỹ thuật và thuật toán theo ý của mình có thể giảm đáng kể kích thước của tài nguyên.

Hãy ghi nhớ một số mẹo và kỹ thuật để giúp bạn tối ưu hóa hình ảnh của mình:

• Chọn hình ảnh ở định dạng vectơ. Chất lượng của chúng không phụ thuộc vào độ phân giải và tỷ lệ, vì vậy chúng phù hợp với màn hình lớn và các loại thiết bị khác nhau.
• Giảm thiểu và nén nội dung SVG. Nhiều ứng dụng đồ họa thêm đánh dấu XML thường chứa siêu dữ liệu không cần thiết. Bạn có thể xóa nó. Đảm bảo máy chủ của bạn được định cấu hình với tính năng nén GZIP cho nội dung SVG.
• Chọn các định dạng bitmap phù hợp nhất. Xác định các yêu cầu hình ảnh bắt buộc và chọn định dạng mong muốn cho mỗi tài nguyên.
• Thử các cài đặt chất lượng khác nhau cho các định dạng bitmap.Đừng ngại giảm chất lượng: thường thì hình ảnh trông vẫn đẹp và kích thước tệp nhỏ đi đáng kể.
• Loại bỏ siêu dữ liệu không cần thiết. Nhiều ảnh bitmap Lưu trữ thông tin bổ sung thông tin tài nguyên: dữ liệu địa lý, thông tin máy ảnh, v.v. Để xóa chúng, hãy sử dụng các công cụ thích hợp.
• Quy mô hình ảnh. Thu nhỏ các tệp trên máy chủ để kích thước gốc và kích thước hiển thị gần giống nhau. Đặc biệt chú ý đến hình ảnh lớn... Nếu trình duyệt mở rộng quy mô, hiệu suất trang web của bạn sẽ bị giảm đáng kể.
• Tự động hóa. Sử dụng các công cụ và phần mềm đáng tin cậy sẽ tự động tối ưu hóa hình ảnh trên trang web của bạn.

Trừ khi có lưu ý khác, nội dung của trang này được cấp phép theo Giấy phép Creative Commons Attribution 3.0 và các mẫu mã được cấp phép theo Giấy phép Apache 2.0. Để biết chi tiết, hãy xem của chúng tôi. Java là nhãn hiệu đã đăng ký của Oracle và / hoặc các chi nhánh của Oracle.

Cập nhật vào ngày 8 tháng 8 năm 2018