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!


65 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. This is an awesome post. Really very informative and creative contents.
    WordPress website development company in Chennai

    ReplyDelete
  10. 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
  11. 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
  12. 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
  13. That being stated, it's continually overpowering to think about learning another expertise.Webdesign

    ReplyDelete
  14. You have made some good points there. I looked on the net for additional information about the issue and found most individuals will go along with your views on this site.keep it up!!

    android training in chennai

    android online training in chennai

    android training in bangalore

    android training in hyderabad

    android Training in coimbatore

    android training

    android online training

    ReplyDelete
  15. 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
  16. Great post. I used to be checking constantly this weblog and I am inspired! Extremely useful information specially the ultimate part :) I maintain such info much. I used to be seeking this particular information for a very lengthy time.
    Thank yyou and good luck.
    website design pakistan
    responsive web design
    website design services Pakistan
    responsive web design services in Karachi
    UI UX website design Pakistan
    wireframe design in Karachi
    Best website Design services in Pakistan
    Pakistan Best web design service

    ReplyDelete
  17. 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
  18. Incredible Article it its truly instructive and inventive update us as often as possible with new upgrades. its was truly important. much obliged.  خرید فالوور ارزان

    ReplyDelete
  19. 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
  20. It calls for incalculable hours before a PC, picking up, understanding instructional exercises, and experimentation until you get it down.Webdesign

    ReplyDelete
  21. It is normal for things, for example, hail, street trash, rocks and different things to fly into your windshield causing harm. auto glass replacement These things frequently cause chip or breaks and it could be important to have the windshield fixed to shield further harm from occurring just as protect the driver and traveler. windshield repair near me

    ReplyDelete
  22. Because of this , it truly is superior you can applicable research prior to providing. It will be possible to share larger document that way. graphic design

    ReplyDelete
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. 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
  30. 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
  31. 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
  32. Thanks for sharing your Blog. It was really good. If you are looking forwebsite development company in chennaiAt an affordable price then,chennai web development is the best place to boost your website traffic, get more leads and get the best solution for your business.
    Web Design & Development
    Digital Marketing

    ReplyDelete
  33. 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
  34. Thanks for Sharing This Article.It is very so much valuable content. . AWS course in Chennai

    ReplyDelete
  35. 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
  36. Amazing website http://rytualymilosne24.wordpress.com where you find many article about love magic.

    ReplyDelete
  37. 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
  38. 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
  39. This blog is really helpful to deliver updated affairs over internet which is really appraisable. Tips for Windshield Crack Repair and Prevention

    ReplyDelete
  40. This is a great inspiring article.I am pretty much pleased with your good work.You put really very helpful information. Keep it up. Keep blogging. Looking to reading your next post. https://zetamatic.com/downloads/wp-paint-pro/

    ReplyDelete
  41. Great post, and great website. Thanks for the information! Garage Storage Systems

    ReplyDelete