DEV Community: Loftie Ellis

Can you save on LLM tokens using images instead of text?

Loftie Ellis — Sat, 01 Nov 2025 20:19:16 +0000

TLDR: Yes, but only under specific conditions, and it is probably not worth the trade-offs.

The recent OCR paper from DeepSeek and the related discussion reminded me of something curious I noticed with the OpenAI API - Prompts that use images as input consume almost the same number of tokens as those that use text, even though the images could be 50x the size of the text.

This made me think, could you actually save on tokens by converting your text to an image and sending that to the api?

Setting up an experiment

To test the theory, I ran a simple prompt using both text only and an image-based one.

For the prompt I'm asking ChatGPT to pick out and summarize the information from this post by Karpathy on digital hygiene. It should be something LLMs are good at, but there is also a clear correct answer so it's easy to check.

The prompt is simply the following:

List every hygiene tip from the collection, with a short sentence summary.
List the titles * EXACTLY * as in the text
Follow the following format:
** Title 1 ** - summary 1
** Title 2 ** - summary 2
DO NOT ask any followup questions, simply return the list.

To run the prompt I extracted the text-only version of the blogpost (skipping the headers and image), and fed it to gpt-5

The output is as expected:

**Password manager** - Use a password manager to store and generate unique passwords to prevent reuse and leaks across services.
**Hardware security key** - Strengthen your accounts with physical security keys like YubiKeys for superior protection against attacks and SIM swaps.
**Biometrics** - Use biometric authentication, such as FaceID, as an additional factor of security where available.
**Security questions** - Avoid traditional security questions; use random passwords instead to prevent easy guessing or phishing.
.. etc

The next step is to run the prompt on the image instead of text.

Converting the prompt to an image

When creating the image we need to be careful to get the dimensions right, otherwise OpenAI will resize the image and won't be able to make out any text.

Looking through their documentation, the ideal size seems to be 768x768, so I wrote a basic puppeteer script to convert the post to an image with these dimensions.

To fit into the desired resolution, I had to break the prompt into two images; you can see them here and here.
When running the prompt, you have to specify both images with "detail": "high"

    model='gpt-5',
    messages=[{
        'role': 'user',
        'content': [
            {"type": "image_url",  "image_url": {"url": f"{im_1}", "detail": "high"}},
            {"type": "image_url",  "image_url": {"url": f"{im_2}", "detail": "high"}},
        ],
    },

This worked perfectly, and the output was similar to using the text-based prompts (though it did take almost twice as long to process).

The Results

Running the prompt with a few different models, we can see there are indeed significant savings in prompt tokens.

With gpt-5 in particular, we get over a 40% reduction in prompt tokens.

Completion Tokens

Prompt tokens are only half the story, though.

Running the prompt five times with each model and taking the average, we see the following:

All models apart from gpt-5-chat use significantly more completion tokens with the image inputs.

Completion tokens are also significantly more expensive, so unless you use the chat model, you are not getting any savings.

Finding the largest favicon with js

Loftie Ellis — Thu, 26 Nov 2020 23:27:16 +0000

As part of an audit I wanted to fetch the highest quality favicon for every page that we check. It turned out to be slightly more complicated than I thought:

These stackoverflow posts suggest a few ways to get the favicon, but they all share a few issues:

It depends on a 3rd party (eg Google)
It ignores the default /favicon.ico, or uses it incorrectly
It returns the first favicon, instead of the largest one

How the browser chooses a favicon

The standard way to include a favicon is with a link tag <link rel="icon".. You can use multiple link tags to specify different sizes, for example:

<link rel="icon" sizes="16x16" href="/favicon_16.png">
<link rel="icon" sizes="32x32" href="/favicon_32.png">

Another popular variant is <link rel="shortcut icon"..

<link rel="shortcut icon" href="/favicon_32.png">

If none of these tags are present the browser will make a request to the /favicon.ico file at the root directory. Some servers are badly configured though and will return an 200 OK status even if the file is not present, so to be sure you have to check that the file is indeed an image.

The solution

The following codes combines all these factors, and loops through the available favicons to return the largest one.

// Get the largest favicon in the current document, or false if none is found.
let getLargestFavicon = async () => {
  let getSize = el => {
    return (el.sizes[0] && parseInt(el.sizes[0], 10)) || 0;
  };
  let favicons = [
    ...document.querySelectorAll('link[rel="shortcut icon"],link[rel="icon"]')
  ].sort((a, b) => {
    return getSize(b) - getSize(a);
  });
  if (favicons.length > 0) {
    return favicons[0].href;
  }
  // no favicon is specified in the meta tags, lets try the default /favicon.ico
  let defaultLocation = document.location.origin + "/favicon.ico";
  let r = await fetch(defaultLocation);
  if (r.ok) {
    let t = await r.blob();
    if (t.type.indexOf("image") !== -1) {
      return defaultLocation;
    }
  }
  return false;
};

Originally published at https://blog.pagewatch.dev/post/finding-the-largest-favicon-with-js

Switching from Netlify to SimpleAnalytics

Loftie Ellis — Thu, 30 Jul 2020 21:17:12 +0000

I moved my web analytics for PageWatch, my blog and some personal projects to Simple Analytics.

I wanted a simple, privacy focused analytics platform (no cookie banners!), and initially tried Netlify Analytics (since most of my sites are hosted there)

For starters it worked out well: There is no setup required, and Netlify will even backfill old data for you (data they collected from their server logs before you enabled analytics).

I quickly ran into a few issues:

Netlify Analytics is functional but a bit limited

Cost: Netlify analytics is $9/month, per site. That is cheap if you have just a few sites, but I have quite a few, and most hardly generate any traffic. SimpleAnalytics on the other hand is $19/month for unlimited sites.

Limited Data: Netlify only shows me the top 5 referral sources, in contrast to SimpleAnalytics where I can drill down much more, as well as see Twitter posts and other social data.

Netlify reports nearly all traffic going to /

No SPA support: This is kind of ironic seeing that Netlify is often used to host SPA's. For PageWatch, Netlify reported nearly all the traffic as going to the top level page, which isn't even a valid destination.

Switching to SimpleAnalytics

SimpleAnalytics promises to be simple, privacy focused with all the essentials, and so far it has delivered.

Installing is simple, you just have to add a single line of code to your site.

This blog is built on Gridsome, and there was even plugin available:

$ npm install gridsome-plugin-simple-analytics
# then simply add the following settings
module.exports = {
  plugins: [
    {
      use: 'gridsome-plugin-simple-analytics'
    }
  ]
}

Made by another IndieHacker

SimpleAnalytics is a small but growing project, and I like to support other makers whenever I can.

PageWatch Dashboard. Hopefully one day the graph will look more impressive

Originally published at https://blog.pagewatch.dev/post/switching-from-netlify-to-simpleanalytics

What are those LSEP characters on certain pages?

Loftie Ellis — Sat, 13 Jun 2020 01:11:15 +0000

If you browse the web on windows, you might have from time to time see characters like these:

That character is actually the Unicode U+2028 Line Separator, and for some reason Chrome will display it as a visible block.

How did it get there?

Most likely the developer has an IDE that accidentally placed those characters in place of a new line, or there is some server side script that incorrectly processed newlines. Either way it is very likely that these go unspotted as they do not show at all on most operating systems or browsers.

See this stackoverflow post for more context.

How to fix?

If this was due to and IDE, you can simply search and replace the code. Go here and copy the text (it might look like just an empty character), and replace those with a blank space.

If the characters ended up in the database you might be able to run a sql query (see the stackoverflow post above) to get rid of them.

Either way it is a good idea to preview your pages in Chrome on windows, or use PageWatch to automatically find these in your site.

Originally published at https://blog.pagewatch.dev/post/what-are-those-lsep-characters-on-certain-pages

IndieHackers light theme

Loftie Ellis — Wed, 10 Jun 2020 21:54:27 +0000

I built a light theme extension (Chrome for now) for indiehackers, for the few people like me who prefer a light background :)

I really enjoy reading people's stories over there, and actually find the current look quite pleasing. My problem though is I prefer to code with a light background in my IDE, and if spend enough time on this site my eyes adjust, and then switching back its like staring into the sun.

This extension adds a very basic light theme, and you can quickly toggle back for a session by clicking the extension icon. (it will toggle back to dark for the current tab)

Hope someone finds it useful: The code is open source (MIT) and available from https://github.com/lpellis/IndieHackers-Light-Theme

Originally published at https://loftie.com/post/indiehackers-light-theme

Python Tip: Auto-reload the console on file changes

Loftie Ellis — Sat, 21 Dec 2019 20:00:33 +0000

I find myself using the python console often in python (and Django) to test various things. But one annoying thing was that I had to restart the console (and all imports/commands until the line) every time I made the change.

There is a better way though.

IPython autoreload

If you use IPython as your console, you can use the autoreload extension to automatically reload code up the current state. This makes the following flow possible:

In [1]: %load_ext autoreload

In [2]: %autoreload 2

In [3]: from foo import some_function

In [4]: some_function()
Out[4]: 42

In [5]: # open foo.py in an editor and change some_function to return 43

In [6]: some_function()
Out[6]: 43

See https://ipython.readthedocs.io/en/stable/config/extensions/autoreload.html for more information.

Usage in PyCharm

PyCharm does not yet fully support the IPython config, but you can still set it up without too much work.

First, make sure you have IPython installed:

pip install ipython

*Then, in Settings->Build,Execution,Deployment->Console make sure you have 'Use IPython if available' checked.

Last step is to add the following two lines to the Starting script.

%load_ext autoreload
%autoreload 2

Console settings in PyCharm

That's it, now your console will automatically reload whenever you make file changes.

Also check out my other article for how to automatically load your models in the Django console.

PyDevTo - unofficial dev.to api for python

Loftie Ellis — Sun, 03 Nov 2019 22:34:07 +0000

Dev.to has a pretty awesome community for sharing coding knowledge. I wanted to republish my posts to them (and also link to the comments) so I made this library, and in the interest of sharing decided to opensource it for anyone to use.

PyDevTo is a a wrapper around the dev.to api endoints, with a few helper functions to help with the distribution of articles.

Features

Implements all endpoints from https://docs.dev.to/api/
Implements a few other api endpoints not documented but available in the source, such as users and follow_suggestions.
Includes a helper method to convert html to dev.to specific markdown, including support for dev.to specific embeds such as YouTube.

Installation

Use the package manager pip to install pydevto.

pip install pydevto

Usage

Make sure you have an api key to use the authenticated endpoints. You can get your key from https://dev.to/settings/account (You can use pydevto without an api key for some functions, such as the public articles)

import pydevto
api = pydevto.PyDevTo(api_key='MY_KEY')
api.articles()  # returns list of your own published articles

Methods

import pydevto
api = pydevto.PyDevTo(api_key='MY_KEY')
api.public_articles(page=None, tag=None, username=None, state=None, top=None)  # Return list of public (published) articles
api.public_article(id)  # Return a single public (published) article given its id
api.articles(page=None, per_page=None, state="published")  # Return a list of user articles
api.create_article(...)  # Create an article
api.update_article(id, ...)  # Update an article
api.user(id=None, username=None)  # Return user information
api.follow_suggestions(page=None)  # Return list of follow suggestions
api.tags(page=None)  # Return list of tags
api.webhooks()  # Return list of webhooks
api.webhook(id)  # Return single webhook with id
api.create_webhook(source, target_url, events)  # Create a new webhook
api.delete_webhook(id)  # Delete  a webhook with id

PyDevTo contains a helper function to convert html to dev.to specific markdown. (https://dev.to/p/editor_guide) It supports images with captions using the HTML figcaption tag, and converts embeds such as YouTube to dev.to specific liquid tags.

>>> import pydevto
>>> pydevto.html_to_markdown('<h1>Heading</h1') 
>>> '# Heading\n\n'
>>> pydevto.html_to_markdown('<iframe src="https://www.youtube.com/embed/kmjiUVEMvI4"></iframe>') 
>>> '\n{% youtube kmjiUVEMvI4 %}\n'

lpellis / pydevto

Unofficial dev.to api

PyDevTo

Unofficial dev.to api for python.

Features

Implements all endpoints from https://docs.dev.to/api/
Implements a few other api endpoints not documented but available in the source, such as users and follow_suggestions
Includes a helper method to convert html to dev.to specific markdown, including support for dev.to specific embeds such as YouTube.

Installation

Use the package manager pip to install pydevto.

pip install pydevto

Usage

import pydevto
api = pydevto.PyDevTo(api_key='MY_KEY')
api.articles()  # returns list of your own published articles

Methods

import pydevto
api = pydevto.PyDevTo(api_key='MY_KEY')
api.public_articles(page=None, tag=None, username=None

…

View on GitHub

Let me know if you run into any issues.

PS I originally published this post at https://loftie.com/post/pydevto-unofficial-devto-api and used this very library to make this post :)

Things you may not know about Chrome DevTools

Loftie Ellis — Wed, 25 Sep 2019 00:30:44 +0000

I use the Chrome Developer tools pretty much daily, but there are a few things I wish I knew earlier

1: Easily get a reference to any inspected element

You can get a reference to any inspected element from the console by right-clicking on the element in the 'elements' view, and choosing 'Store as global variable'.

Easily get a reference to any inspected element

2: Create live expressions pinned to your console

You can create a live expression that is constantly evaluated and pinned to the top of your console. This can be very useful to watch certain elements that you know should update on the page.

Live expression in Chrome

3: Simulate slow internet

You can simulate different internet speeds directly from the Network tab. Really useful to see how your code reacts when it can take several seconds to load.

Test different internet speeds

4: Disable Caching, and preserve logs

I have had many issues that turned out to be not errors at all, simply cached code that was wrongly loaded. To prevent this you can turn off all caching from the network tab. (Note that it will only disable cache when the DevTools window is open)

Preserve logs are another useful feature to keeps your logs/console output from clearing when you navigate through different pages.

Disable cache and Preserve logs

5: Take screenshots directly from the developer console

Chrome devtools has a built-in screenshot tool. To use it type the ctrl+shift+p (with the devtools window open), then type 'screenshot'.

Take screenshots directly from the developer tools

6: There is more to logging than console.log

We all use console.log for debug output, but you have a few more options:

console.warn, console.error

console.warn prints out a different coloured message, and you can filter the log levels.

console.warn, console.error

console.table

If you have a structed list of data console.table will print it in a pretty table format.

console.table(data)

There are several more such as console.assert, console.group, you can see the rest here:

7: $_ returns the most recently evaluated expression

Use $_ to reference the return value of the previous operation executed in the console.

8: $ is a shortcut for document.querySelector

You can use $ to quickly select elements from the console, without jquery.
Similarly $$ is a shortcut for document.querySelectorAll

9: Trigger hover or focus state in styles panel

Hover states can be tricky to inspect since you have to move your mouse over the element, but there is an easy way: Under Styles, you can force an element style.

Force certain element states

10: Ctrl+click to find where a CSS property is defined

Ever wondered exactly where a certain css rule was defined? That is easy to find out, you can simply ctrl+click (cmd+click on a Mac) on the rule.

Ctrl+click takes you to where the css rule was defined

Do you have any other DevTools tips? let me know in the comments :)

This post was originally published at https://loftie.com/post/things-you-may-not-know-about-chrome-devtools/

Programming Music

Loftie Ellis — Thu, 19 Sep 2019 22:46:53 +0000

What kind of music do you generally prefer for coding? Personally I find myself looking for:

Long (30min+) mixes so I can keep the same tempo going
No vocals, I find listening to vocals makes it much harder for me to concentrate on coding (others might not be bothered by them)

Below are some of the mixes I enjoy, normally I would just open them in the background on my 2nd monitor (it helps that the visuals are also pleasing without too much going on)

Do you have any favourite mixes? Let me know in the comments.

Gridsome 0.7 Released!

Loftie Ellis — Thu, 19 Sep 2019 18:30:28 +0000

Gridsome is a new static site generator based on the JAMstack, and it is the underlying software powering my blog at https://loftie.com/. If you have ever heard of Gatsby, well Gridsome is the vue.js equivalent, and they just released a new version with some cool improvements.

New Schema API

This is be biggest improvement for me. Gridsome used to simply infer the GraphQL schema from the data passed on startup, which works well if all the data is present, but I started to run into issues where some nested entries (eg tags) were not correctly discovered.

With the Schema API you can now define your fields yourself:

api.loadSource(({ addSchemaTypes }) => {
  addSchemaTypes(`
    type Post implements Node {
      title: String
    }
  `)
})

You dont have to specify all the fields either, Gridsome can still automatically infer the fields that you know will be present and only specify the deeper ones. To do that simply pass the @infer extension.

type Post implements Node @infer {
    title: String
}

Other Changes

Vue Remark plugin - Lets you add vue components to markdown files-
New template configuration - More consistent way to specify template routes
Custom App.vue - Useful if you want for example a <transition> component around the <router-view>- And some more, see the full list here

Check out Gridsome for yourself at https://gridsome.org/

3 Useful bookmarklets I use (almost) daily

Loftie Ellis — Mon, 09 Sep 2019 15:57:38 +0000

Note: Dev.to doesn't allow javascript in links, so to install these bookmarklets please go to https://loftie.com/post/3-useful-bookmarklets-i-use-almost-daily

Bookmarklets are small javascript snippetes that you can use to perform simple tasks. Below are 3 simple bookmarklets that I find myself using regularly while browsing or doing web development.

1: SaneColor

Changes the font and background to readable colors

Often during browsing or reading articles I get to pages that I find really hard to read due to bad contrast or just hard to read colors. This bookmarklet changes the colors of the background and font to something readable, and works without having to reload the page.

2: jQuerify

Injects jQuery for usage in the console on any site

These days I dont use jQuery as often, but I still find myself wanting to quickly check some things out on a page using its syntax. This bookmarklet makes jQuery available on any page with the click of a button.

Based on a modified (to work on any site) version of this ancient post: https://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet

3: Make Editable

Makes any page editable from the browser

Often during designing it can be nice to simply edit content directly to see what it would look like. This bookmarklet simply sets contenteditable for the whole page.

This can even be useful on pages to remove annoying blinking/distracting elements for the session.

Do you have any other useful bookmarklets? Let me know in the comments :)

How to add Twitter and Facebook cards to your vue app

Loftie Ellis — Sat, 07 Sep 2019 13:05:07 +0000

Adding Twitter/Facebook cards is a great way to improve the experience for when people share your site, and adding it to your vue site only takes a few minutes.

What are Twitter Cards?

Have you noticed how some links expand nicely when viewed in Twitter or Facebook? That functionality is provided by Twitter cards, see an example below:

// Detect dark theme var iframe = document.getElementById('tweet-1016476808638656521-217'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1016476808638656521&theme=dark" }

Tweet with rich content

Displaying Twitter/Facebook cards on your site

Twitter and Facebook cards are just special meta tags that you have to include on your site. When someone then shares your page, Twitter will see those tags and use it to nicely format the post.

Twitter

The list of twitter tags can be seen here, below I've included the most used ones.

<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="https://loftie.com">
<meta name="twitter:title" content="Vue Social Cards Example">
<meta name="twitter:description" content="Vue sample site showing off Twitter and Facebook Cards.">
<meta name="twitter:image" content="http://dev.to/social_previews/user/139093.png">

Facebook

Facebook uses the opengraph protocol, you can see the most used tags below.

<meta property="og:type" content="website">
<meta property="og:title" content="Vue Social Cards Example">
<meta property="og:description" content="Vue sample site showing off Twitter and Facebook Cards.">
<meta property="og:image" content="http://dev.to/social_previews/user/139093.png">

Usage in vue

To see how we can setup this in vue, lets first create a basic vue site using the Vue CLI with all the default settings.

vue create vue-sample

For a detailed example of how to create a vue site and deploy it to Netlify, please check out https://loftie.com/post/deploying-vue-with-netlify-from-scratch

I have deployed the basic version of the site here: https://v1--vue-social-cards-sample.netlify.com/, lets see what happens if we share that to Twitter:

// Detect dark theme var iframe = document.getElementById('tweet-1170080375835676672-793'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1170080375835676672&theme=dark" }

Not very exciting

To enable cards in vue we need some way to update the meta tags. The most popular way is to use the vue-meta package.

npm install vue-meta

Then load it in your main.js file

import Vue from 'vue';
...
import Meta from 'vue-meta';
Vue.use(Meta);
...

To actually include the relevant meta tags we have to add them to the metaInfo. Also note that the image path must be an absolute path, not relative.

In this example I'm using the logo.png as the image, and since vue pre-processes all the assets we have to get the path it ends up using require('./assets/logo.png')

let ROOT_PATH = 'https://your-site-here.com'
export default {
  data() {
    return {
      logo: ROOT_PATH + require('./assets/logo.png')
    }
  },
  metaInfo() {
    return {
      meta: [
          // Twitter Card
          {name: 'twitter:card', content: 'summary'},
          {name: 'twitter:title', content: 'Vue Social Cards Example'},
          {name: 'twitter:description', content: 'Vue sample site showing off Twitter and Facebook Cards.'},
          // image must be an absolute path
          {name: 'twitter:image', content: this.logo},
          // Facebook OpenGraph
          {property: 'og:title', content: 'Vue Social Cards Example'},
          {property: 'og:site_name', content: 'Vue Example'},
          {property: 'og:type', content: 'website'},
          {property: 'og:image', content:  this.logo},
          {property: 'og:description', content: 'Vue sample site showing off Twitter and Facebook Cards.'}
      ]
    }
  }
}

Last steps, prerendering

Currently the meta tags are added using javascript, which is a bit of a problem since the Twitter bot doesn't execute javascript. Luckily the fix is as simple as clicking a single checkbox if you are using Netlify.

If you are not using Netlify then you will have to look into other means to prerender, such as prerender.io

In your Netlify account, go to* Site settings -> Build & Deploy -> Prerendering*

Prerendering allows Twitter and Facebook to see the meta tags

Lets see how it looks now

Much nicer

The code for this example is available at https://github.com/lpellis/vue-social-cards-sample.

Originally published at https://loftie.com/post/how-to-add-twitter-and-facebook-cards-to-your-vue-app