How to display country flag using image sprite

In this tutorial, we will demonstrate how to use the image sprite that consists of 249 country flags for website display. In a nutshell, the image sprite is a method that combines, usually, multiple small images into a single image file for usage. What are the advantages of doing so? To explain further, when the website needs to display one image, it will make one HTTP/HTTPS request to the server for the image file retrieval. If the website needs to display 20 images, then website will have to make 20 round trips for the complete display. These round trips are time consuming. However, by combining 20 images into a single image sprite, the website will now just need to make a single HTTP/HTTPS request for the same purpose. Inevitably, this will greatly reduce the page loading time, by cutting down the excessive HTTP/HTTPS round trips to only one. Imagine that if you were going to get those images across continents, how much time you could have saved with the image sprite.

Anyway, the image sprite is useful if you are going to display multiple images on a web page, if you only need a single image, an individual image file loading is more than a feasible approach. Regarding the set of images provided by IP2Location, we provide both individual image files and also the image sprite, so that you can decide which one works best for you. However, in this article we will provide you with some guidelines on how to use the image sprite.

Getting Started

To start, first we will need to download the country flags file. There are five type of country flag image sprite available according to the different sizes of the country flag, which are 16×16, 32×32, and 64×64. The different sizes of the flags are shown below:After downloaded the zip file, unzip the file and move the “image_sprite” folder to your web directory. Next, in the headertag of your page, call the CSS file like this:

<link href="image_sprite/ip2location-image-sprite-5.css" rel="stylesheet">

This will load the CSS file in your page to load the image sprite. The next step is to fetch the particular country flag and display it on the website. The following piece of code shows how to load 16×16 and 32×32 country flags from the image sprite:

<span class="ip2location-us-16"></span>
<span class="ip2location-ag-16"></span>
<span class="ip2location-my-16"></span>
<span class="ip2location-gb-16"></span>
<span class="ip2location-au-16"></span>
<span class="ip2location-us-32"></span>
<span class="ip2location-ag-32"></span>
<span class="ip2location-my-32"></span>
<span class="ip2location-gb-32"></span>
<span class="ip2location-au-32"></span>

We will be using the <span>tag to hold and load the flag. Lastly, save the changes made and refresh the website in your browser to see the changes.

Below are the complete source codes for the above display.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Image Sprite</title>
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- Image Sprite CSS -->
  <link href="image_sprite/ip2location-image-sprite-5.css" rel="stylesheet">
</head>
<body>
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
    <div class="container">
      <a class="navbar-brand" href="#">Country Flag Usage Example</a>
    </div>
  </nav>
  <!-- Page Content -->
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12 text-center">
    <h1 class="mt-5"> This is the example of using country flags in image sprite.</h1>
    <br>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>16px</td>
          <td><span class="ip2location-us-16"></span> United States</td>
          <td><span class="ip2location-ag-16"></span> Argentina</td>
          <td><span class="ip2location-my-16"></span> Malaysia</td>
          <td><span class="ip2location-gb-16"></span> United Kingdom</td>
          <td><span class="ip2location-au-16"></span> Australia</td>
        </tr>
        <tr>
          <td>32px</td>
          <td><span class="ip2location-us-32 align-middle"></span> United States</td>
          <td><span class="ip2location-ag-32 align-middle"></span> Argentina</td>
          <td><span class="ip2location-my-32 align-middle"></span> Malaysia</td>
          <td><span class="ip2location-gb-32 align-middle"></span> United Kingdom</td>
          <td><span class="ip2location-au-32 align-middle"></span> Australia</td>
        </tr>
        <tr>
          <td>64px</td>
          <td><span class="ip2location-us-64 align-middle"></span> United States</td>
          <td><span class="ip2location-ag-64 align-middle"></span> Argentina</td>
          <td><span class="ip2location-my-64 align-middle"></span> Malaysia</td>
          <td><span class="ip2location-gb-64 align-middle"></span> United Kingdom</td>
          <td><span class="ip2location-au-64 align-middle"></span> Australia</td>
        </tr>
      </tbody>
    </table>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

 

Was this article helpful?

Related Articles