Hướng dẫn chi tiết sử dụng URL hình ảnh trên blogspot

Bài viết này mình sẽ hướng dẫn anh em cách sử dụng URL hình ảnh của blogspot sao cho tối ưu nhất

Ảnh gốc

Sau khi bạn post hình lên bài viết của blogspot link hình ảnh sẽ có dạng

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSbs7uBkfwdlqIvHzFx7jUuf4iHZtOzlj4UAKUo7L9CoUzsFB98QtU4Ad7gm6RzbhmM6rHcWi9tefSocQr2pJX4FoXZyOXVSjhyjIeyweuP_MSG_qQ53YbYwI5lSORrsmOJoMUsqwCfx87/s1600/BMW.jpg

s1600 là thông số của hình ảnh với kích thước ban đâu của hình ảnh
LƯU Ý: nếu như kích thước hình ảnh của bạn rất lớn, chiều cao lên đến 3000 pixels chẳng hạn thì bạn phải thay s1600 thành s3000 mới hiển thị đầy đủ kích thước ảnh này

Tối đa chiều rộng

Ví dụ trong một số trường hợp bạn chỉ có nhu cầu sử dụng ảnh có chiều rộng tối đa là 200 pixels thì bạn chỉ việc thay s1600 thành w200 như sau:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSbs7uBkfwdlqIvHzFx7jUuf4iHZtOzlj4UAKUo7L9CoUzsFB98QtU4Ad7gm6RzbhmM6rHcWi9tefSocQr2pJX4FoXZyOXVSjhyjIeyweuP_MSG_qQ53YbYwI5lSORrsmOJoMUsqwCfx87/w200/BMW.jpg

LƯU Ý: nếu chiều rộng bạn đặt lớn hơn hình ảnh ban đầu thì sẽ cho ra chiều rộng tối đa ban đầu, đây cũng là lý do vì sao gọi là "Max Width"

Tối đa chiều cao

Tương tự nếu muốn chiều cao tối đa là 50 pixels ta chỉ việc thay s1600 thành h50:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSbs7uBkfwdlqIvHzFx7jUuf4iHZtOzlj4UAKUo7L9CoUzsFB98QtU4Ad7gm6RzbhmM6rHcWi9tefSocQr2pJX4FoXZyOXVSjhyjIeyweuP_MSG_qQ53YbYwI5lSORrsmOJoMUsqwCfx87/h50/BMW.jpg

Tất nhiên nếu bạn đặt chiều cao hơn so với ảnh ban đầu nó cũng sẽ cho ta kích thước ảnh gốc

Tối đa chiều rộng và chiều cao

Bạn cũng có thể cố định tối đa chiều rộng và chiều cao cùng một lúc ví dụ chiều rộng không lớn hơn 200 pixels và chiều cao không cao hơn 100 pixels ta sẽ thay thế s1600 thành w200-h100, ta sẽ có

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSbs7uBkfwdlqIvHzFx7jUuf4iHZtOzlj4UAKUo7L9CoUzsFB98QtU4Ad7gm6RzbhmM6rHcWi9tefSocQr2pJX4FoXZyOXVSjhyjIeyweuP_MSG_qQ53YbYwI5lSORrsmOJoMUsqwCfx87/w200-h100/BMW.jpg

Và kết quả sẽ trả về hình ảnh có kích thước chiều rộng tối đa không lớn hơn 200 pixels và chiều cao không lớn hơn 100 pixels với tỷ lệ ảnh ban đầu

Cắt ảnh ở giữa

Nếu bạn muốn cố định chiều rộng và chiều cao của hình ảnh và cắt từ giữa tấm ảnh ra bạn sẽ thay thế s1600 thành w350-h200-c trong trường hợp bạn muốn chiều rộng ảnh là 300 pixcels và chiều cao là 250 pixcels

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSbs7uBkfwdlqIvHzFx7jUuf4iHZtOzlj4UAKUo7L9CoUzsFB98QtU4Ad7gm6RzbhmM6rHcWi9tefSocQr2pJX4FoXZyOXVSjhyjIeyweuP_MSG_qQ53YbYwI5lSORrsmOJoMUsqwCfx87/w300-h250-c/BMW.jpg

Hoặc nếu muốn cố định hình vuông với các cạnh là 300 pixcels thì có thể thay thành s300-c

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSbs7uBkfwdlqIvHzFx7jUuf4iHZtOzlj4UAKUo7L9CoUzsFB98QtU4Ad7gm6RzbhmM6rHcWi9tefSocQr2pJX4FoXZyOXVSjhyjIeyweuP_MSG_qQ53YbYwI5lSORrsmOJoMUsqwCfx87/s300-c/BMW.jpg

Cắt ảnh ở giữa với viền bo tròn

Trong trường hợp này ta chỉ việc thay -c ở bên trên thành -cc

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSbs7uBkfwdlqIvHzFx7jUuf4iHZtOzlj4UAKUo7L9CoUzsFB98QtU4Ad7gm6RzbhmM6rHcWi9tefSocQr2pJX4FoXZyOXVSjhyjIeyweuP_MSG_qQ53YbYwI5lSORrsmOJoMUsqwCfx87/s300-cc/BMW.jpg

Chế độ cắt ảnh thông minh

Trong một số trường hợp tâm điểm của bức ảnh không nằm ở chính giữa, khi bạn cắt hình ảnh ở vị trí trung tâm như những trường hợp phía trên sẽ ra kết quả không như ta mong muốn, vì thế ta sẽ thay -c thành -p

Khi ta thay -c thành -p thuật toán thông minh của Google Photos sẽ kiểm tra hình ảnh và chọn khu vực có giá trị nhất trong hình ảnh để cắt như ví dụ bên dưới

Hình ảnh với màu nền cụ thể

Đối với những hình ảnh có màu nền trong suốt mà bạn muốn có màu nền cụ thể ta sẽ thêm -rj-c0xHEX_COLOR vào cuối kích thước, ví dụ:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPn__Y6giJUCG25JTAc1PwmJg6Y22qUUMz1VfGXYHeN16P9ny7WAO029WNcN0ghq_1XGHGKerfWSAQ1ZH4c2BVBTWYb9N6wwxvzkbPIxxEYAKh9P5OFooyV6ZD6T1818fFzgxnoPrio-Vu/rj-c0x333333/valentines.png

Và dưới đây là ảnh khi ta không thay s1600 thành rj-c0x333333

LƯU Ý: Nếu bạn chỉ thêm -rj mà không có -c0xHEX_COLOR màu nền sẽ chuyển sang màu đen

Liên kết download cho hình ảnh

Nếu bạn muốn cung cấp 1 link để download cho hình ảnh thì thêm -d vào sau kích thước như bên dưới

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSbs7uBkfwdlqIvHzFx7jUuf4iHZtOzlj4UAKUo7L9CoUzsFB98QtU4Ad7gm6RzbhmM6rHcWi9tefSocQr2pJX4FoXZyOXVSjhyjIeyweuP_MSG_qQ53YbYwI5lSORrsmOJoMUsqwCfx87/w200-h100-d/BMW.jpg

Click vào đây để thử download hình ảnh từ link trên

Kết hợp các tham số trên

Bạn có thể kết hợp như ví dụ bên dưới, tối đa chiều rộng ảnh là 300 pixels, bo khung hình tròn với màu nền là màu vàng

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSbs7uBkfwdlqIvHzFx7jUuf4iHZtOzlj4UAKUo7L9CoUzsFB98QtU4Ad7gm6RzbhmM6rHcWi9tefSocQr2pJX4FoXZyOXVSjhyjIeyweuP_MSG_qQ53YbYwI5lSORrsmOJoMUsqwCfx87/s300-cc-rj-c0xfff000/BMW.jpg

Bài viết này mình xin kết thúc tại đây, hi vọng với tips này sẽ giúp cho các bạn rất nhiều trong việc tối ưu hóa hình ảnh khi viết blog