Pages

Friday, January 20, 2017

Make your Blogger blog more responsive by auto-magically adding the SRCSET attribute to your images!

viaMacchina uses Blogger for its blogging platform. Blogger has been around for a long time, and it continues to be one of the best blogging platforms available. Out of the box, you get a mobile view to your blog. But, to be clear, even though the view is geared towards mobile devices, it is not responsive. Because of this, we are developing a completely responsive template to replace the out of the box Blogger template and mobile view.


"Responsive" web pages sound cool, but at the end of the day, responsive techniques are really just describing what I consider to be "good" use of HTML and CSS. For instance, when working with images, it is easy to set the images' height and width in pixels. However, doing this will force that image to remain at the specified height and width no matter how the screen or content around that image scales. An easy way to get around this limitation is to set the images' width to 100%, and contain that image in an element that has a constrained height and width.

Another issue that arises when applying responsive techniques to images is the concept of downloading the correctly sized image for the resolution of the device. If your website is rendering on a mobile device with a tiny screen, what benefit is gained in downloading an image that looks good on a 30" monitor? There have been many attempts at addressing this issue in the past using JavaScript, CSS, and in some cases server side code, but all of the solutions have been clunky, and have come with their own set of shortcomings.

Enter the srcset attribute. A part of the ever evolving HTML 5 specification, the srcset attribute has been adopted by most browsers in use today (see Can I Use - SRCSET).

Adding the srcset attribute to an image can instantly make that image act responsively and allow the browser to download the correct resolution for the viewport in use.

Here's an example using an image hosted by Blogger:



<img border="0" src="https://3.bp.blogspot.com/-6UwIvGZx3YE/WBX_yG8fgQI/AAAAAAAAMZQ/CHD-jCXZOYYzftmYcgtE6DNWf23kVstTACPcB/s320/IMGP3792.JPG" width="100%" srcset="https://3.bp.blogspot.com/-6UwIvGZx3YE/WBX_yG8fgQI/AAAAAAAAMZQ/CHD-jCXZOYYzftmYcgtE6DNWf23kVstTACPcB/s320/IMGP3792.JPG 320w, https://3.bp.blogspot.com/-6UwIvGZx3YE/WBX_yG8fgQI/AAAAAAAAMZQ/CHD-jCXZOYYzftmYcgtE6DNWf23kVstTACPcB/s640/IMGP3792.JPG 640w, https://3.bp.blogspot.com/-6UwIvGZx3YE/WBX_yG8fgQI/AAAAAAAAMZQ/CHD-jCXZOYYzftmYcgtE6DNWf23kVstTACPcB/s1200/IMGP3792.JPG 1200w, https://3.bp.blogspot.com/-6UwIvGZx3YE/WBX_yG8fgQI/AAAAAAAAMZQ/CHD-jCXZOYYzftmYcgtE6DNWf23kVstTACPcB/s1600/IMGP3792.JPG 1600w, https://3.bp.blogspot.com/-6UwIvGZx3YE/WBX_yG8fgQI/AAAAAAAAMZQ/CHD-jCXZOYYzftmYcgtE6DNWf23kVstTACPcB/s3200/IMGP3792.JPG 3200w">

The src for the image is set to the smallest resolution available using the Blogger image service. Normally, when using an image hosting service such as Google Photos or Blogger, etc... the host will encourage you to upload a high resolution or original resolution photo. The service can then serve that image at many different smaller resolutions.

In the above example, we are configuring the images srcset attribute to use the following resolutions:

320
640
1200
1600
3200

This range covers most of the popular resolutions in use today.

The result of adding the srcset is that the browser will determine the appropriate image to download for the current viewport resolution. This greatly improves performance because the device is determining the correct size of the image that it needs.

The following video shows the srcset in action. The browser starts constrained to a very small resolution. In the Chrome developers tools, you can see that only the smallest resolution, 320, has been downloaded. As the browser windows size increases, larger images defined in the srcset are downloaded.



If you are using Blogger, and you're comfortable modifying your blog template HTML, you can quickly add this behavior to all of the images in your blog posts using the following jQuery:



and here is a pure JavaScript variant:



These functions need to be added to a script tag at the end of the HTML body so that they will execute after the image tags have loaded.

One important note: If your images have explicit height and width set, or if you have modified the underlying html so that the image src is pointing to a higher resolution file, you may need to manually update the image attributes in order to gain all of the performance benefits that come with the addition of the srcset attribute.

I hope this helps!


54 comments:

  1. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress development company in Chennai

    ReplyDelete
  2. Spot on with this write-up, I truly think this website needs much more consideration. I'll probably be again to read much more, thanks for that info.
    Most selling power washers for gift

    ReplyDelete
  3. Additionally, ensure that you don't utilize multiple hues in the whole brand mark and that every one of the hues supplement one another.used car dealerships near me

    ReplyDelete
  4. Good Sound Advice for the developers who are looking to improve their performance of the business. Thanks for sharing this blog!
    Wordpress Development Company
    Wordpress Theme Development
    Wordpress Web Development
    Wordpress Plugin Development
    Wordpress Development Services

    ReplyDelete
  5. You there, this is really good post here. Thanks for taking the time to post such valuable information. Quality content is what always gets the visitors coming. auto repair Freehold NJ

    ReplyDelete
  6. It was a very good post indeed. I thoroughly enjoyed reading it in my lunch time. Will surely come and visit this blog more often. Thanks for sharing. Auto hail repair

    ReplyDelete
  7. I'd have to check with you here. Which is not something I usually do! I enjoy reading a post that will make people think. Also, thanks for allowing me to comment!
    fireboy and watergirl games

    ReplyDelete
  8. I am so very glad to hear this! I hope that Amy also handled things with Kerry and deleted him from his admin duties! Then, he can make a fake profile and try to admin again!Game Thrust

    ReplyDelete
  9. Wow, What a Excellent post. I really found this to much informatics. It is what i was searching for.I would like to suggest you that please keep sharing such type of info.Thanks Thiruvenkatam

    ReplyDelete
  10. Our services are available in all cities of Minneapolis and its surroundings. We are having years of experience which enabled our customers and clients to trust our services. Aero Auto Glass in Phoenix

    ReplyDelete
  11. Looking for cable peeling machine? Then we are the best for you, who suit your expectations. We have huge experience in this field. We are 100% dedicated to find youcable peeling machine.
    We are dedicated to manufacturing and sales of a wide range of cable peeling machine. You can find here your best one.
    If you want to know more, Please check out Cheers Electronic Technical Co., LTD: https://www.terminal-crimping.com/cable-stripping-machine.html

    ReplyDelete
  12. That being stated, it's continually overpowering to think about learning another expertise.Webdesign

    ReplyDelete
  13. Thanks for a wonderful share. Your article has proved your hard work and experience you have got in this field. Brilliant .i love it reading. https://autopartsgh.com/

    ReplyDelete
  14. Each car glass shop has a wide scope of administrations on offer for their clients. Each help is explicit to a specific need running from broken or chipped glass, uprooted glass or harmed glass with scratches auto glass replacement

    ReplyDelete
  15. Incredible Article it its truly instructive and inventive update us as often as possible with new upgrades. its was truly important. much obliged.  خرید فالوور ارزان

    ReplyDelete
  16. Utilized cars in the class are a significantly preferable speculation over cars that are fresh out of the box new.Bolton Ministry of Transport Testing

    ReplyDelete
  17. It calls for incalculable hours before a PC, picking up, understanding instructional exercises, and experimentation until you get it down.Webdesign

    ReplyDelete
  18. Using images and videos in your blogs that startle your readers can drive traffic to your blog. Thanks for sharing the secret facts with us. Dissertation Proposal Writing Services

    ReplyDelete
  19. These SEO organizations have a system expecting customers to pay the significant web indexes (counting Google and Yahoo) for month to month site support. Website laten maken

    ReplyDelete
  20. service auto glass Other than safety belts, the main thing for security on your vehicle is the windshield. The windshield's unique design was to avoid downpour, street garbage and wind from inside the vehicle and hitting the driver and travelers. A quality windshield likewise gives a reasonable and great perspective out and about and encompassing articles like walkers and traffic. Having an unmistakable, great perspective on what is around you is vital for safe driving.

    ReplyDelete
  21. Pipe bending equipment is an important piece of machinery that is used by a range of industries, from small fabricating shops, to large scale construction companies. This article takes a look at some of the most common types of pipe bending machinery, what each of their benefits are, and the best places you can purchase them from. auto repair

    ReplyDelete
  22. Your auto glass is quite possibly the most obvious pieces of your vehicle. Subsequently, individuals will see if the glass is damaged, in any event, when just a bit. Supplanting the whole glass is the arrangement that individuals normally take when they discover breaks or scratches on their windshield. This may better the vibe of your vehicle yet it without a doubt is certifiably not a reasonable alternative. In this way, don't straightforwardly pick window substitution when auto glass fix is as yet conceivable to do.windshield chip repair

    ReplyDelete
  23. I just thought it may be an idea to post incase anyone else was having problems researching but I am a little unsure if I am allowed to put names and addresses on here. 2020 Keystone RV Fuzion 410

    ReplyDelete
  24. I really appreciate this wonderful post that you have provided for us. I assure this would be beneficial for most of the people. 2021 Winnebago Micro Minnie 2306BHS

    ReplyDelete
  25. Thanks a lot for sharing this excellent info! I am looking forward to seeing more posts by you as soon as possible! I have judged that you do not compromise on quality. android text auto reply

    ReplyDelete
  26. I went over this website and I believe you have a lot of wonderful information, saved to my bookmarks Auto Reply Text While Driving

    ReplyDelete
  27. You don't need to substitute a windshield for each chip or a break. However long it tends to be fixed, you should fix it as opposed to getting a substitution. Generally arrangement suppliers fix chips and breaks that are up to three inches. In the event that you don't know, you can allude it to a specialist. It can decline in the event that you leave unattended so it is essential to fix it straightaway.click here

    ReplyDelete
  28. Thanks for Sharing This Article.It is very so much valuable content. . AWS course in Chennai

    ReplyDelete
  29. luxury car rentals offer preferred hirer club membership or programs. When you become a member of such a club, you get preferred treatmen luxury car rental

    ReplyDelete
  30. Sometimes, the glass can be fixed with the goal that you don't have to use up every last cent to supplant it. Simply take your vehicle to the auto glass trained professional and your windshield will be reestablished to its unique condition.https://www.cprautoglassrepair.com

    ReplyDelete
  31. Looking for auto windshield substitution isn't only a corrective move. You are legitimately needed in many states to keep up with your windshield in great condition.auto glass repair near me

    ReplyDelete
  32. This blog is really helpful to deliver updated affairs over internet which is really appraisable. Tips for Windshield Crack Repair and Prevention

    ReplyDelete
  33. Practically all stone chips and breaks can be fixed. Permitting safe driving behind the fixed windshield is the main objective of windshield fix tech. The subsequent objective is to forestall further breaking and to diminish glare that diverts the driver and makes security issues.auto glass replacement

    ReplyDelete
  34. The post is written in very a good manner and it contains many useful information for me. zoom magician

    ReplyDelete
  35. Windshield fix is economical contrasted with windshield substitution. Fix disposes of issues related with substitution, for example, spilling, wind whistle or windshield disappointment due to airbag organization. windshield repair

    ReplyDelete
  36. This information is useful to us. You have shared such an useful article. I get an information by your blog for graphic designer vancouver wa. I like your hard wrok. Thank you.

    ReplyDelete
  37. Also, in case your organization resembles most private ventures, you likely don't have web design insight. MavericksMedia

    ReplyDelete
  38. There are a few motivations behind why the quantity of windshield chip fixes and break fixes have expanded in the course of the most recent couple of years.windshield repair
    windshield replacement

    ReplyDelete
  39. Windshield fix is reasonable contrasted with windshield substitution. Fix takes out issues related with substitution, for example, spilling, wind whistle or windshield disappointment due to airbag arrangement. auto glass replacement
    windshield replacement cost

    ReplyDelete
  40. Contingent upon the thickness of the external layer and the power of a stone effect, the glass can flex and break. Except if the windshield is totally broken, most frequently the harm is as a stone chip. windshield replacement cost
    windshield repair near me

    ReplyDelete
  41. I was frankly worried by your silence and tempted to contact a couple of people closer geographically with inquiries but that seemed intrusive. I was relieved when I saw a Commercial building couple of comments from you but still concerned. I'm very glad to hear that you got the care you needed and that you're recovering. I'd hoped you were on vacation but I didn't imagine one of exactly this type!

    ReplyDelete
  42. You have a good point here!I totally agree with what you have said!!Thanks for sharing your views...hope more people will read this article!!! auto sliding gate bd

    ReplyDelete
  43. It is truly a well-researched content and excellent wording. I got so engaged in this material that I couldn’t wait to read. Read more info about pozycjonowanie. I am impressed with your work and skill. Thanks.

    ReplyDelete
  44. This is just the information I am finding everywhere. Thanks for your blog, I just subscribe your blog. This is a nice blog.. Digital Agency Melbourne

    ReplyDelete
  45. I always think about what is. It seems to be a perfect article that seems to blow away such worries. seems to be the best way to show something. When you have time, please write an article about what means!!출장샵
    출장샵
    출장샵
    출장샵
    출장샵
    출장샵
    출장샵
    출장샵

    ReplyDelete
  46. Such great and nice information about software.출장샵
    출장샵
    출장샵
    출장샵
    출장샵
    출장샵
    This site gonna help me a lot in finding and using a lot of software.
    Kindly make this like content and update us. Thanks for sharing us Sublime Text Crack.
    Kindly click on here and visit our website and read more.

    ReplyDelete
  47. You understand your tasks stand apart of the group. there might be something exceptional nearly them. It appears to me every one of them are in truth remarkable! FileviewPro Activation Code

    ReplyDelete
  48. Want to make her go aww on your wedding anniversary? Hitting one year mark or more with your lovely wife is something way too special.10 Anniversary Quotes

    ReplyDelete
  49. We know well that it's better to wear sports bras when engaging in sports and lively activities. 메이저놀이터

    ReplyDelete