Currently there is no 100% reliable solution, but the most “reliable” solution is the one used by email marketing platforms such as MailChimp, MailJet, SendInBlue and so on.

Thus it is a question of sending an email in HTML format and adding an invisible element that will trigger a call to one of your scripts.

For example if your site is lateambichon.com, this site sends you an email in classic HTML format and includes an image tag with the source attribute filled with the URL of a public script (for example a php script) to trace the opening of the email:

<html>
<body>
    YOUR MESSAGE CONTENT HERE

    <img src="https://lateambichon.com/trackemailopen.php?id=<ID_EMAIL>" height="1" width="1" alt="" border="0" style="height:1px;width:1px;border:0">

</body>
</html>
  • trackemailopen.php is a script that can be called by an anonymous user (not connected to the site).
  • ID_EMAIL is the id of the email that you have generated and stored during the sending to trace your email
  • ❗ ❗ ❗ it is recommended that this ID_EMAIL is a uuid (version V4), i.e. an ID of the form bb7003c0-8ff5-471c-9859-29daf9b17b0e, so that a lambda user can’t have fun calling your scripts by passing random IDs and easily find a valid ID (uuid V4 = 5 × 1036 possible combinations). ❗ ❗ ❗ But from the tests I ran, it’s hard to see this url.
  • trackemailopen.php is called and receives the email id, it verifies that the email of this id exists in the database, and if it exists it marks it as read.
  • at the end of processing trackemailopen.php returns an image of 1 pixel by 1 pixel (a blind spot), this is the image expected by the image tag that we added in our email

Advantages

  • the most reliable method
  • gives a good overview of the opening rate of your emails
  • invisible to the user

Disadvantages

  • Cannot be done in a plain text email
  • does not work if the recipient mail client blocks HTML
  • doesn’t work if your contacts or their email client have chosen not to display images

An interesting source: https://mailchimp.com/en/help/about-open-tracking/

What happens if we place a link to a javascript script in the src attribute of the tag img

<html>
<body>
<img src="script.js" alt="test avec un js en src">
</body>
</html>

Well, nothing!

Because the browser will make an http request to the url (here the file is local), but as this url does not respond with an image the browser will not download the javascript file (it’s a security).

You can check it locally.

you can rely on this good source from Jukka K. Korpela:

If the resource sent by the server is image data, the browser will try to display it. If it happens to be e.g. an HTML document, it will be discarded, and the browser will display the value of the alt attribute instead, or an icon of a broken image, or both.https://stackoverflow.com/questions/14953792/how-src-attribute-of-img-tag-is-exe