Định dạng link hình ảnh của Blogspot

Trong Blogspot có chức năng chuyển đổi các dạng hình ảnh khác nhau (như dạng hình ảnh jpeg, png, webp,...), tự động đổi size hình ảnh hoặc hiệu ứng cho hình ảnh rất hay. Sau đây mình sẽ viết 01 bài viết chi tiết để cho các bạn hiểu hơn về các dạng link hình ảnh của Blogspot nhằm tối ưu website hơn.

Ví dụ, sau khi ta upload hình lên Blogspot qua trình soạn thảo của Blogger, thì link hình ảnh có dạng như sau :

https://1.bp.blogspot.com/xxxxxxxx/xxxxxxxx/xxxxxxxx/s0/[file].[extension]

Cụ thể là => https://1.bp.blogspot.com/-e2HrRRpBl4o/X2nCm12SC-I/AAAAAAAAEe0/PWujV-S3GoYtL9-98PjC8s8OUmPNaqyiACLcBGAsYHQ/s0/toyota-fortuner-so-huu-thiet-ke-ben-dang-manh-me-nhung-thanh-thoat.jpg

Với link hình ảnh bên trên, ta chỉ cần chú ý đến vị trí s0 (số 0 chứ không phải chữ nhé), tại vị trí này ta có thể thể tùy biến được nhiều định dạng, hiệu ứng, thay đổi kích thước hình ảnh một cách linh động.

Click vào link để xem hình ảnh sau khi thay đổi.

Thay đổi kích thước và cắt ảnh

• s0 : kích thước hình ảnh ban đầu khi bạn upload lên Blogspot
• s[số nguyên dương] - ví dụ bạn nhập s350 thì hình ảnh sẽ thay đổi ảnh có pixel là 350
• w[số nguyên dương] - ví dụ bạn nhập w500 thì hình ảnh sẽ thay đổi ảnh có width là 350
• h[số nguyên dương] - ví dụ bạn nhập h150 thì hình ảnh sẽ thay đổi ảnh có height là 150

Đặc biệt, nếu bạn kết hợp giữa w và h thì bạn sẽ có kích thước hình ảnh như mong muốn, ví dụ w500-h350

Chú ý: Nếu dùng tham số w hoặc h thì kích thước thay đổi sẽ không lớn hơn kích thước ban đầu của hình ảnh

Sau đây, ta dùng các tham số bên dưới để tùy biến hình ảnh như yêu cầu của mình, các tham số cách nhau bằng dấu -

• c (cắt hình ảnh theo kích thước có sẵn) - Tham số này sẽ cắt hình ảnh theo w và h đã có (w500-h350-c). Nếu không có w hoặc h thì hình được cắt ra là hình vuông theo w hoặc h đã có (w500-c).
• n (cắt từ tâm hình ra ngoải) - tương tự như tham số c nhưng hình sẽ được cắt từ tâm ra ngoài và phải có đầy đủ tham số w và h (w500-h150-n).
• p (cắt hình vuông thông minh) - Tham số này cố gắng cắt phần quan trọng của hình ảnh bắt đầu từ trung tâm. Tỷ lệ co không được giữ nguyên. Một ví dụ là, w500-h150-p.
• pp (một cách khác cắt hình vuông thông minh) - giống như tham số p (w500-h150-pp)
• pa (giữ lại tỷ lệ co của hình ảnh) - Tham số cắt ảnh thông minh này (w500-h150-pa) tương tự như tham số p. Sự khác biệt duy nhất là nó giữ nguyên tỷ lệ khung hình. Đương nhiên, tham số chiều cao cũng được ưu tiên trong trường hợp này.
• pf (xén thông minh với nhận dạng khuôn mặt) - Cái này cũng cố gắng xén thông minh với nhận diện khuôn mặt. Tỷ lệ co không được giữ nguyên và quá trình cắt bắt đầu từ trung tâm. Một ví dụ là w500-h150-pf.
• cc (xén hình tròn) - Và, nếu bạn quan tâm đến xén hình tròn (w500-h150-cc), hãy sử dụng tham số này. Nếu các thông số chiều rộng và chiều cao cũng được cung cấp, thì thông số sau sẽ được ưu tiên khi nói đến phần được cắt.
• ci (xén hình ảnh vuông đơn giản) - Tham số này (ví dụ: w700-h150-ci) trả về một hình ảnh được cắt hình vuông hoàn hảo với kích thước nhỏ nhất có thể gần thông số chiều rộng hoặc chiều cao được chỉ định thấp nhất.
• lf (xén mặt rời) - Sau khi thử nghiệm rộng rãi, tham số này (w700-h150-lf) chỉ trả về một hình ảnh có chiều cao được chỉ định giữ nguyên tỷ lệ khung hình.
• nu (ngăn thay đổi kích thước vượt quá kích thước ban đầu) - Tham số hữu ích này có thể được sử dụng để tắt thay đổi kích thước của hình ảnh lớn hơn kích thước ban đầu của nó.
  Ví dụ: nếu chiều rộng hình ảnh gốc là 600 pixel, thì mặc dù chỉ định chiều rộng lớn hơn w1600-nu, hình ảnh sẽ không mở rộng quy mô lớn hơn chiều rộng ban đầu do sự hiện diện của tham số nu.

Với các tham số ở trên thì bạn có thể tùy biến rất nhiều kích thước từ một link hình ảnh có sẵn. Bạn thấy ghê không ? Nếu với những tham số bên trên chưa đủ để bạn hài lòng thì xem tiếp các tham số bên dưới.

Các hiệu ứng, bộ lọc và chỉnh sửa khác

Sau khi làm quen với những điều cơ bản, hãy chuyển sang các kỹ thuật tùy chỉnh hình ảnh nâng cao để chỉnh sửa thêm hoặc ghép các hình ảnh đã tải lên. Một số tùy chọn này hiếm khi hoặc không bao giờ được sử dụng trong khi những tùy chọn khác có thể được sử dụng hàng ngày.

• • fv - Lật hình ảnh — theo chiều dọc - Để lật hình ảnh theo chiều dọc, hãy sử dụng tùy chọn fv. Ví dụ: s0-fv sẽ lật hình ảnh với kích thước ban đầu — theo chiều dọc.
  • fh - Lật ảnh — theo chiều ngang - Để lật ngang, hãy sử dụng tùy chọn fh. Một ví dụ đơn giản một lần nữa là s0-fh.
  • rj - Tìm nạp định dạng JPG - Sử dụng tùy chọn rj để lấy hình ảnh ở định dạng JPG. Ví dụ: một hình ảnh PNG với các tham số s0-rj sẽ cung cấp cho bạn cùng một hình ảnh ở định dạng JPG.
  • rp - Tìm nạp định dạng PNG - Để truy xuất hình ảnh ở định dạng PNG, hãy sử dụng tùy chọn s0-rp.
  • rw - Tìm nạp định dạng WebP - Để có được hình ảnh ở định dạng WebP của Google, hãy sử dụng tùy chọn s0-rw.
  • rg - Tìm nạp định dạng GIF - Để chuyển đổi hình ảnh ở định dạng GIF, hãy sử dụng tùy chọn s0-rg.
  • Áp dụng các tùy chọn định dạng - Nói chung, hình ảnh JPEG có 3 loại viz., Tiêu chuẩn cơ bản, Tối ưu hóa đường cơ sở và Tiến bộ. Chúng ta có thể sử dụng các loại này thông qua tùy chọn v với các số 0, 1, 2 và 3.
    Ví dụ: s0-v0 hoặc s0-v1. Khi chúng tôi tăng số lượng lên 2 và 3, chất lượng giảm đáng kể và không được khuyến khích sử dụng trên trang web.
  • rh - Nhận MP4 từ GIF động - Nếu bạn muốn nhúng GIF động dưới dạng tệp video MP4, hãy sử dụng tùy chọn rh. Đây là một ví dụ:

    <video width="480" controls>
    <source src="https://xxxx/s0-rh/image.gif" type="video/mp4">
    </video>

  • k - Hủy hoạt ảnh GIF - Và, nếu bạn muốn hủy hoạt ảnh của ảnh GIF và muốn có phiên bản tĩnh giống nhau, hãy sử dụng tùy chọn k. Ví dụ: s0-k trả về dạng tĩnh của ảnh GIF động.
  • b10-c0xffeeeeee - Đặt đường viền / khung tùy chỉnh (s0-b10-c0xffeeeeee) - Nói chung, để áp dụng đường viền tùy chỉnh hoặc khung xung quanh hình ảnh, chúng tôi sử dụng quy tắc CSS. Nhưng, điều gì sẽ xảy ra nếu chúng ta có thể làm điều đó mà không sử dụng bất kỳ mã CSS nào?
  • Nén hình ảnh JPEG - Nếu bạn quan tâm đến tốc độ trang web, việc cung cấp hình ảnh cồng kềnh cho khách truy cập là điều không nên làm. Nén hình ảnh có thể làm giảm kích thước tệp, do đó làm giảm kích thước tổng thể của trang web.Tham số nén hình ảnh l có sẵn để giảm dung lượng của tệp nhưng đồng thời ảnh hưởng đến chất lượng hình ảnh. Một ví dụ tương tự là s0-rj-l85 nén tệp 15%.
  • e365 (365 là số ngày hết hạn cache - s0-365) Hình ảnh bộ nhớ đệm - Bộ nhớ đệm của trình duyệt đối với nội dung ở cuối của khách truy cập là một trong những tính năng quan trọng để mang lại trải nghiệm duyệt nhanh cho người đọc. Để làm điều đó, người ta phải chỉ định thời gian hết hạn của nội dung.
  • fSoften=1,5,0 - Làm mờ hình ảnh (s0-fSoften=1,5,0) - Nói chung, chúng tôi không làm mờ hình ảnh khi sử dụng chúng cho nội dung web. Tuy nhiên, trong một số trường hợp được chọn, chúng tôi có thể cần phải làm như vậy. Rất may, có một thông số để làm mờ hình ảnh.
    

    

  • fVignette - Thêm gradient và bóng đường viền (s0-fVignette=1,100,1.5,0,aaaaaa) - Và bây giờ là hiệu ứng chuyển màu kết hợp với màu bóng đường viền tùy chỉnh. Vâng, bạn cũng có thể làm điều đó!