skip to Main Content

When taking a look at the html for this site: http://www.3lateral.com/
I saw that all of the images like logos, apple-touch-icons, mstiles etc. were all located “on the site” like so:

<meta name="twitter:image:src" content="http://www.3lateral.com/img/seo-logo.png">
<meta name="msapplication-TileImage" content="http://www.3lateral.com/mstile-144x144.png">

How did they do this and how can I do this myself?
…Also it seems that some are located under a url path like the twitter one (/img/seo-logo.png), how is this connected?

2

Answers


  1. just copy your image in the site directory with specific name that you want , then set the path that started with your site address / image directory / image name
    e.g : if you copy your images in image directory of your site path , set the src of image tag >
    like : ( src=”http://www.yourdomain.com/image/yourImageName.png” )

    Login or Signup to reply.
  2. http://www.3lateral.com/img/seo-logo.png is called the absolute path and /img/seo-logo.png is called the relative path(relative to your current file being called from).

    You can access the same image using both. Meaning http://www.3lateral.com/img/seo-logo.png is the same as /img/seo-logo.png.

    Usually it is considered best-practice to use relative URLs, so that your website will not be bound to the base URL of where it is currently deployed. For example, it will be able to work on localhost, as well as on your public domain, without modifications.

    In your case, say you have an img/ folder & a css/ folder in your root directory. Now when refering to an image in the img/ folder from say main.css in your css/ folder. You can use:

    www.yourdomain.com/img/thisimage.png(finds the path from root ie. www.yourdomain.com)

    OR

    ../img/thisimage.png(this finds the path of the image from your main.css instead of root directly). ../ means “travel one directory up from the current”

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search