Nén hình ảnh trong html

Khi làm nội dung sản phẩm, bài viết hay trang nội dung bạn sẽ thường sử dụng các bài viết dạng văn bản, có đôi khi trong bài viết cần đưa vào bảng biểu, hình ảnh hoặc nội dung cần chỉnh sửa lại màu sắc

Bài viết khi có nhiều nội dung như vậy thường gây ra tình trạng dung lượng của bài viết khá lớn, khi bạn lưu bài viết hệ thống sẽ hiển thị thông báo bài viết đã vượt qua 30k ký tự, điều này cũng ảnh hưởng đến ảnh

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn những bước dung lượng tối ưu để đảm bảo chất lượng của bài viết, từ đó cũng sẽ đảm bảo tốc độ tải bài viết, tải trang được cải thiện tốt hơn, có một điểm bạn cần lưu lại

Tối ưu nội dung với bài viết có nhiều bảng biểu

Tối ưu nội dung bài viết có chứa ảnh base64

HTML đoạn mã tối ưu

Tối ưu nội dung với bài viết có nhiều bảng biểu (bảng)

Bài viết có nhiều bảng biểu thông thường là các thông tin liên quan đến báo giá, lịch trình, chi phí của một dịch vụ. , ngoài ra còn có nhiều bài viết sử dụng bảng biểu với các mục đích khác nhau, tuy nhiên về nội dung thì cấu trúc bảng biểu thông thường khá phức tạp và sẽ sinh ra nhiều đoạn mã trùng lặp để làm tăng dung lượng bài viết

Bảng trạng thái sử dụng biểu khi xem bài viết trong Mã HTMl sẽ xuất hiện những đoạn mã có quá nhiều kiểu lặp lại, gây ra dung lượng bài viết lớn và ảnh hưởng đến tốc độ tải trang, bạn xem thêm ảnh minh họa dưới đây

Để bài viết tối ưu có nhiều bảng biểu, bạn thực hiện theo các bước sau

• Bước 1. Tại trang quản trị website, truy cập vào trang sản phẩm, blog hoặc trang nội dung và chọn bài viết cần tối ưu
• Bước 2. Trong trang chỉnh sửa bài viết, chọn mã HTML

• Bước 3. Tối ưu lại kiểu bài viết bằng cách tạo kiểu thẻ chung cho bài viết như ảnh bên dưới để thay thế cho các đoạn mã phát sinh khi tạo bảng biểu

• Bước 4. Thực hiện thay đổi xong các đoạn mã kiểu trong bài viết thì dung lượng sẽ bị giảm đi khá nhiều

Tối ưu nội dung với bài viết có chứa ảnh base64

Bài viết xuất hiện các hình ảnh chứa ảnh base64 là do người dùng có thể sao chép bài viết có hình ảnh từ một trang web khác sang hoặc sao chép nội dung từ tệp word lên trình soạn thảo của hệ thống

Trạng thái khi sao chép ảnh từ một nơi khác sang Sapo Web thì ảnh trong bài viết có thể đã sử dụng định dạng Base64 Image sẽ gây ra một số vấn đề

• Làm tăng dung lượng của tệp ảnh gốc, ảnh có thể tăng từ 3 - 20% dung lượng (tùy thuộc vào độ lớn của hình ảnh)
• Ngoài dung lượng được tăng lên đáng kể do các ký tự được mã hóa nhiều, hình ảnh được tạo ra khi sử dụng Base64 Hình ảnh sẽ không được lưu vào bộ đệm trong trình duyệt sẽ dẫn đến khi tải lại trang sẽ tải lại toàn bộ cấu hình ảnh, từ đó sẽ
• Việc sử dụng chuỗi ký tự hình ảnh Base64 cũng sẽ làm mã HTML rắc rối và khi thay đổi một số điểm trên hình ảnh thì phải chuyển đổi lại ảnh và thay đổi chuỗi mã hóa đã được mã hóa

Bạn xem thêm ảnh minh họa dưới đây để thấy được ảnh chứa Base64 có số lượng ký tự dẫn đến bài viết có dung lượng lớn

Hôm nay mình viết chương trình giảm dung lượng, chất lượng của hình ảnh, ví dụ. bạn có tệp hình 3MB bạn muốn nén nó xuống vài phần trăm KB để tải lên trang web hoặc chạy ứng dụng để giảm tải băng thông

Chương trình có giao diện như mình demo bên dưới

Chương trình giảm dung lượng của mình sử dụng hàm EncoderParameter trong thư viện  System. Đang vẽ. Hình ảnh của VB. MẠNG LƯỚI

+ Đầu bạn nhập hệ thống thư viện. đang vẽ. hình ảnh vào

Imports System.Drawing.Imaging

+ Tiếp theo , mình viết hàm GetEncoderInfo() để lấy mime của hình ảnh

Private Function GetEncoderInfo(ByVal mimeType As String) As ImageCodecInfo
        Dim j As Integer
        Dim encoders As ImageCodecInfo()
        encoders = ImageCodecInfo.GetImageEncoders()
        For j = 0 To encoders.Length
            If encoders(j).MimeType = mimeType Then
                Return encoders(j)
            End If
        Next j
        Return Nothing
    End Function

+ Tiếp theo, mình viêt hàm SaveJPGWithCompressionSetting() thành tệp hình khác, sau khi đã tinh chỉnh các thông số cho cấu hình ảnh.  

Private Sub SaveJPGWithCompressionSetting(ByVal image As Image, ByVal szFileName As String, ByVal lCompression As Long)
        On Error GoTo chkErr
        Dim eps As EncoderParameters = New EncoderParameters(1)
        eps.Param(0) = New EncoderParameter(Encoder.Quality, lCompression)
        Dim ici As ImageCodecInfo = GetEncoderInfo("image/jpeg")
        image.Save(szFileName, ici, eps)
        Exit Sub
chkErr: MsgBox("Error: " & Err.Number & " " & Err.Description & vbCrLf & "Choose a different name for file.")
        errOcr = True
        Resume Next

    End Sub

+ Viết sự kiện, khi cuộn thanh cuộn để lấy giá trị chất lượng của hình ảnh mình muốn thay đổi, và lấy kích thước dung lượng của hình ảnh