Home
"a picture is worth a thousand words"
A fitting image can make or break your site. That's why it's important to make sure your images load like they're supposed to. A missing image can make your site look broken, less user friendly and unprofessional.
- Incorrect File Paths: your path location does not match the map structure.
- Files Names Misspelled: you've misspelled the file name, either in your code or in your folder.
- Wrong File Extension: it's also possible you've misspelled the extension.
- Files Are Missing: not uploaded images or old/deleted images can cause the image to not load.
- The Website Hosting the Images Is Down: if you're using a external site to host your images, it's possible the service is down and won't load your image.
- Transfer Problem: this is unlikely, but not impossible. There is a chance that there may be a transfer problem for the image when it is first requested by the browser.
I use Google Chrome as my standard web browser, and fortunatly, they've got an extension page with millions of extensions. To disable images I used this extension called Images ON/OFF.
First I tested my old school's site. When you enter the site you'll be greeted by a pop-up. I decided to test this right away. If you remove the images, the pop-up will be transparent, making it a lot harder to read. The alt-text is only visible for a half and we're missing the kids. To improve the site, I'd suggest giving the pop-up a background-color and change the position of the image so the alt-text is fully visible.
The second site I tested was Reddit. I don't really know what's going on here, but it looks like the site is showing code. I can recognize some elements like S, BR and LI. S and BR shouldn't be used in this context, because they are being used for styling.
The last site I checked was our school site, and it shows a big mistake! When entering the site, you're greeted with a image that gives you the options: "opleidingen", "Coronavirus Informatie", "open avond 30 maart" and "Werken en Studeren". When I disable images, I don't get to see these options anymore. Fixing this problem is very easy and the fact that this is even coded this way is confusing. Seperate the image element and it should work fine!
Bonus! I decided to take a look at Unsplash, a site where you can get pictures for free. This site is one of the few that actually uses alt-text how it's supposed to be used. They also took the time to use gradients that match the picture.
Custom fonts are an easy and fun way to decorate your website. It's easy to use and pretty stable, aldo there are some situations where a custom font is not able to load. In most cases, this will not be a problem; the fonts have about the same size, but not always.
- Incorrect Link: your link is incorrect.
- Font Name Misspelled: you've misspelled the font name in your CSS file.
- Wrong File Extension: Not all browser support every font type.
- Files Are Missing: in case of font-face; you've got no fonts in the folder
- The Website Hosting The Custom Font Is Down: if you're using a external site to host your custom font, it's possible the service is down.
I use Google Chrome as my standard web browser, and fortunatly, they've got an extension page with millions of extensions. To disable custom fonts I used this extension called Block Web Fonts.
The first site I tested was Vasilis.nl, because I knew something would break (Vasilis concentrates on creativity and is a big inspiration so definatly check him out!). He uses a very condensed font, which uses very little space. If you disable the custom font, you can only see half of the sentence. To fix this, I suggest change the position on the right, so it can never exceed the window.
