From 2083f1aed5a205fd7e98a70d91ca1499b753320a Mon Sep 17 00:00:00 2001 From: Rohan Kumar Date: Tue, 29 Dec 2020 22:34:35 -0800 Subject: [PATCH] Article update: include advice on avatar image Include info on using an avatar image/profile photo without significantly increasing the footprint of a website, by re-using the favicon image. --- content/posts/website-best-practices.gmi | 2 ++ content/posts/website-best-practices.md | 8 +++++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/content/posts/website-best-practices.gmi b/content/posts/website-best-practices.gmi index 4873cfd..f73a1b9 100644 --- a/content/posts/website-best-practices.gmi +++ b/content/posts/website-best-practices.gmi @@ -127,6 +127,8 @@ It might seem odd to create a lossless WebP from a lossy PNG, but I've found tha In general, avoid using inline images just for decoration. Only use an image if it significantly adds to your content, and provide alt-text as a fallback. +If you want to include a profile photo (e.g., if your website is part of the IndieWeb), I recommend re-using one of your favicons. Since most browsers will fetch your favicons anyway, re-using them should be relatively harmless. + ## Layout This is possibly the most subjective item I'm including, and the item with the most exceptions. Consider it more of a weak suggestion than hard advice. Use your own judgement. diff --git a/content/posts/website-best-practices.md b/content/posts/website-best-practices.md index d1fd905..d667a99 100644 --- a/content/posts/website-best-practices.md +++ b/content/posts/website-best-practices.md @@ -217,6 +217,10 @@ quality for screenshots with solid backgrounds. In general, avoid using inline images just for decoration. Only use an image if it significantly adds to your content, and provide alt-text as a fallback. +If you want to include a profile photo (e.g., if your website is part of the +IndieWeb), I recommend re-using one of your favicons. Since most browsers will fetch +your favicons anyway, re-using them should be relatively harmless. + Layout ------ @@ -330,7 +334,9 @@ Other places to check out The [250kb club](https://250kb.club/) gathers websites at or under 250kb, and also rewards websites that have a high ratio of content size to total size. -The [10KB Club](https://10kbclub.com/) does the same with a 10kb homepage budget (excluding favicons and webmanifest icons). It also has guidelines for noteworthiness, to avoid low-hanging fruit like mostly-blank pages. +The [10KB Club](https://10kbclub.com/) does the same with a 10kb homepage budget +(excluding favicons and webmanifest icons). It also has guidelines for +noteworthiness, to avoid low-hanging fruit like mostly-blank pages. Also see [Motherfucking Website](https://motherfuckingwebsite.com/). Motherfucking Website inspired several unofficial sequels that tried to gently improve upon it. My