How to use Img Tag's Attribute srcset

The srcset Attribute

The srcset attribute, allows us to specify a list of sources for an image, which will be delivered based on the pixel density or size of the user’s screen. So we can say that implementing the srcset attribute is a good way to provide to the browser a set of “suggestions” about the correct behavior it should have with a certain type of image. By doing so, we improve the loading of our page and the experience of our users.

Example: 

<img src="low-density-photo.jpg" srcset="small-photo.jpg 480w, big-photo.jpg 1024w" />


Comments

Post a Comment

Popular posts from this blog

How to install and configure Alphabetic Pagination WordPress Plugin?

Image
Alphabetic Pagination is a WordPress Plugin that helps the users to filter the post/pages and woocommerce products with Alphabet. Its easy to install and configure. You can display horizontally or vertically and Alphabets in lower/uppercase. Click here to download This article will help to install and configure Alphabetic Pagination on your WordPress website. 1. First login to your admin panel, go to the plugin section click on 'add new'.     admin panel -> plugins -> add new 2. Write Alphabetic Pagination in top-right search bar   3.  Click on install and then click on activate, as shown in the  figure(1) above. 4.  Go to settings section click on Alphabetic Pagination. You will see the admin section of Alphabetic Pagination. as shown in the figure(2) below. Now its time to configure simply: 1. Select the position of your page or post page where you want to show pagination, as show in the figure(2) above. 2. T...
Read more

How to Add Google Web Fonts in WordPress Themes the “Right” way

Adding Google Web Fonts in WordPress Themes We have mostly seen folks using the first two methods. The easiest way would be to open your theme’s style.css file and paste the fonts code that you got in the @import tab, like this: @import url(http://fonts.googleapis.com/css?family=Lora); @import url(http://fonts.googleapis.com/css?family=Oswald);     You can also combine multiple font requests into one.  Here is how you would do it:   @import url(http://fonts.googleapis.com/css?family=Lora|Oswald);   This method is super easy but it is not the best way add Google fonts to your WordPress site. Using @import method blocks parallel downloads, which means the browser will wait for the imported file to finish downloading before it starts downloading the rest of the content. If you MUST use @import, then at least combine multiple requests into one.    You will most likely have to edit your header.php file, and paste the followi...
Read more

How to check if it is WooCommerce page?

function is_woocommerce_page () {         if(  function_exists ( "is_woocommerce" ) && is_woocommerce()){                 return true;         }         $wc_keys   =   array (                                         "woocommerce_shop_page_id" ,                                         "woocommerce_terms_page_id" ,              ...
Read more