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!


36 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