Simple Knowledge About Blogger Image HTML Code
When we upload a picture on blogger and switch to HTML tab, you'll see a series of codes.
A common thing for a beginner, is that we just left it as it is. The problem is, we or the reader will have download the whole actual size picture.
Sure we can re-size the look, but not the size, which has no effects on the page loading time.
Actually we can do something about it to make your post that contains lots of pictures, load a whole lot faster, by adapting the thumbnails style (something that I couldn't find on Blogger Tools)
A common thing for a beginner, is that we just left it as it is. The problem is, we or the reader will have download the whole actual size picture.
Sure we can re-size the look, but not the size, which has no effects on the page loading time.
Actually we can do something about it to make your post that contains lots of pictures, load a whole lot faster, by adapting the thumbnails style (something that I couldn't find on Blogger Tools)
The codes looks something like this.
We'll put colors to it for easier explanations.
1. The codes in Blue, is the container
2. The codes in Red, is the link (url) to your actual size image.
3. The codes in Green is the same link (url) to your actual size image (This is the string that we can change using a smaller image or a thumbnail)
So if we want to make a faster load on an image post, we simply upload a smaller image/thumbnail and replace the Green url with the url from the uploaded smaller image/thumbnail.
Exp :
I've uploaded 2 images on blogger, My-Icon-Black-Wallpaper.jpg and tn-my-icon-black-wallpaper.jpg
The actual size image (My-Icon-Black-Wallpaper.jpg)
This is the small image/thumbnail (tn-my-icon-black-wallpaper.jpg)
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJlTiughlPQk9-YY7h557oC4SlpElbuxf52R-U3CUJ2fYDkvLZT_MiS2b4qzlnxgWLjDJ26BsOcsUoRMbHVXLVM5zLN98M-QlStqC71fcFhg337JnWz6hPBQmgXhntTtj2PqiyjExzW_Fi/s1600/tn-my-icon-black-wallpaper.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJlTiughlPQk9-YY7h557oC4SlpElbuxf52R-U3CUJ2fYDkvLZT_MiS2b4qzlnxgWLjDJ26BsOcsUoRMbHVXLVM5zLN98M-QlStqC71fcFhg337JnWz6hPBQmgXhntTtj2PqiyjExzW_Fi/s1600/tn-my-icon-black-wallpaper.jpg" /></a></div>
Simply replace the Green url with the Purple url
It's twice the work, but it was worthed if you're using a slow connection or giving your readers a faster page load.
Unless you're using huge sized pictures, we shouldn't worried about running out of space which is provided by Google for "free" at about 15G on Picasa web album.
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOhyZEh5b0_0R7StxlJwfHyQvdqfdjtwNI8eMyYs-m6n5CnGVcS5l5dKZtAX6jhCj5JU9c3_VtVx-TROZUmYJVZv1jdR7Z2YnkLQ49U1W527lSFZDZcxE9iG4bIYgcPsgsPTyH0SXgGuTo/s1600/My-Icon-Black-Wallpaper.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOhyZEh5b0_0R7StxlJwfHyQvdqfdjtwNI8eMyYs-m6n5CnGVcS5l5dKZtAX6jhCj5JU9c3_VtVx-TROZUmYJVZv1jdR7Z2YnkLQ49U1W527lSFZDZcxE9iG4bIYgcPsgsPTyH0SXgGuTo/s1600/My-Icon-Black-Wallpaper.jpg" /></a></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOhyZEh5b0_0R7StxlJwfHyQvdqfdjtwNI8eMyYs-m6n5CnGVcS5l5dKZtAX6jhCj5JU9c3_VtVx-TROZUmYJVZv1jdR7Z2YnkLQ49U1W527lSFZDZcxE9iG4bIYgcPsgsPTyH0SXgGuTo/s1600/My-Icon-Black-Wallpaper.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOhyZEh5b0_0R7StxlJwfHyQvdqfdjtwNI8eMyYs-m6n5CnGVcS5l5dKZtAX6jhCj5JU9c3_VtVx-TROZUmYJVZv1jdR7Z2YnkLQ49U1W527lSFZDZcxE9iG4bIYgcPsgsPTyH0SXgGuTo/s1600/My-Icon-Black-Wallpaper.jpg" /></a></div>
We'll put colors to it for easier explanations.
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOhyZEh5b0_0R7StxlJwfHyQvdqfdjtwNI8eMyYs-m6n5CnGVcS5l5dKZtAX6jhCj5JU9c3_VtVx-TROZUmYJVZv1jdR7Z2YnkLQ49U1W527lSFZDZcxE9iG4bIYgcPsgsPTyH0SXgGuTo/s1600/My-Icon-Black-Wallpaper.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOhyZEh5b0_0R7StxlJwfHyQvdqfdjtwNI8eMyYs-m6n5CnGVcS5l5dKZtAX6jhCj5JU9c3_VtVx-TROZUmYJVZv1jdR7Z2YnkLQ49U1W527lSFZDZcxE9iG4bIYgcPsgsPTyH0SXgGuTo/s1600/My-Icon-Black-Wallpaper.jpg" /></a></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOhyZEh5b0_0R7StxlJwfHyQvdqfdjtwNI8eMyYs-m6n5CnGVcS5l5dKZtAX6jhCj5JU9c3_VtVx-TROZUmYJVZv1jdR7Z2YnkLQ49U1W527lSFZDZcxE9iG4bIYgcPsgsPTyH0SXgGuTo/s1600/My-Icon-Black-Wallpaper.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOhyZEh5b0_0R7StxlJwfHyQvdqfdjtwNI8eMyYs-m6n5CnGVcS5l5dKZtAX6jhCj5JU9c3_VtVx-TROZUmYJVZv1jdR7Z2YnkLQ49U1W527lSFZDZcxE9iG4bIYgcPsgsPTyH0SXgGuTo/s1600/My-Icon-Black-Wallpaper.jpg" /></a></div>
1. The codes in Blue, is the container
2. The codes in Red, is the link (url) to your actual size image.
3. The codes in Green is the same link (url) to your actual size image (This is the string that we can change using a smaller image or a thumbnail)
So if we want to make a faster load on an image post, we simply upload a smaller image/thumbnail and replace the Green url with the url from the uploaded smaller image/thumbnail.
Exp :
I've uploaded 2 images on blogger, My-Icon-Black-Wallpaper.jpg and tn-my-icon-black-wallpaper.jpg
The actual size image (My-Icon-Black-Wallpaper.jpg)
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOhyZEh5b0_0R7StxlJwfHyQvdqfdjtwNI8eMyYs-m6n5CnGVcS5l5dKZtAX6jhCj5JU9c3_VtVx-TROZUmYJVZv1jdR7Z2YnkLQ49U1W527lSFZDZcxE9iG4bIYgcPsgsPTyH0SXgGuTo/s1600/My-Icon-Black-Wallpaper.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOhyZEh5b0_0R7StxlJwfHyQvdqfdjtwNI8eMyYs-m6n5CnGVcS5l5dKZtAX6jhCj5JU9c3_VtVx-TROZUmYJVZv1jdR7Z2YnkLQ49U1W527lSFZDZcxE9iG4bIYgcPsgsPTyH0SXgGuTo/s1600/My-Icon-Black-Wallpaper.jpg" /></a></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOhyZEh5b0_0R7StxlJwfHyQvdqfdjtwNI8eMyYs-m6n5CnGVcS5l5dKZtAX6jhCj5JU9c3_VtVx-TROZUmYJVZv1jdR7Z2YnkLQ49U1W527lSFZDZcxE9iG4bIYgcPsgsPTyH0SXgGuTo/s1600/My-Icon-Black-Wallpaper.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOhyZEh5b0_0R7StxlJwfHyQvdqfdjtwNI8eMyYs-m6n5CnGVcS5l5dKZtAX6jhCj5JU9c3_VtVx-TROZUmYJVZv1jdR7Z2YnkLQ49U1W527lSFZDZcxE9iG4bIYgcPsgsPTyH0SXgGuTo/s1600/My-Icon-Black-Wallpaper.jpg" /></a></div>
This is the small image/thumbnail (tn-my-icon-black-wallpaper.jpg)
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJlTiughlPQk9-YY7h557oC4SlpElbuxf52R-U3CUJ2fYDkvLZT_MiS2b4qzlnxgWLjDJ26BsOcsUoRMbHVXLVM5zLN98M-QlStqC71fcFhg337JnWz6hPBQmgXhntTtj2PqiyjExzW_Fi/s1600/tn-my-icon-black-wallpaper.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJlTiughlPQk9-YY7h557oC4SlpElbuxf52R-U3CUJ2fYDkvLZT_MiS2b4qzlnxgWLjDJ26BsOcsUoRMbHVXLVM5zLN98M-QlStqC71fcFhg337JnWz6hPBQmgXhntTtj2PqiyjExzW_Fi/s1600/tn-my-icon-black-wallpaper.jpg" /></a></div>
Simply replace the Green url with the Purple url
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOhyZEh5b0_0R7StxlJwfHyQvdqfdjtwNI8eMyYs-m6n5CnGVcS5l5dKZtAX6jhCj5JU9c3_VtVx-TROZUmYJVZv1jdR7Z2YnkLQ49U1W527lSFZDZcxE9iG4bIYgcPsgsPTyH0SXgGuTo/s1600/My-Icon-Black-Wallpaper.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJlTiughlPQk9-YY7h557oC4SlpElbuxf52R-U3CUJ2fYDkvLZT_MiS2b4qzlnxgWLjDJ26BsOcsUoRMbHVXLVM5zLN98M-QlStqC71fcFhg337JnWz6hPBQmgXhntTtj2PqiyjExzW_Fi/s1600/tn-my-icon-black-wallpaper.jpg" /></a></div>
Result of the image, just click on it to view the actual size.
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOhyZEh5b0_0R7StxlJwfHyQvdqfdjtwNI8eMyYs-m6n5CnGVcS5l5dKZtAX6jhCj5JU9c3_VtVx-TROZUmYJVZv1jdR7Z2YnkLQ49U1W527lSFZDZcxE9iG4bIYgcPsgsPTyH0SXgGuTo/s1600/My-Icon-Black-Wallpaper.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJlTiughlPQk9-YY7h557oC4SlpElbuxf52R-U3CUJ2fYDkvLZT_MiS2b4qzlnxgWLjDJ26BsOcsUoRMbHVXLVM5zLN98M-QlStqC71fcFhg337JnWz6hPBQmgXhntTtj2PqiyjExzW_Fi/s1600/tn-my-icon-black-wallpaper.jpg" /></a></div>
Result of the image, just click on it to view the actual size.
It's twice the work, but it was worthed if you're using a slow connection or giving your readers a faster page load.
Unless you're using huge sized pictures, we shouldn't worried about running out of space which is provided by Google for "free" at about 15G on Picasa web album.
0 comments:
Post a Comment