Webmasters see it all too often.
We surf into a website and get hit right smack in the face with pages and pages of images with text.
Not just a little text. But A LOT OF TEXT. Full-on paragraphs of text.
It’s understandable. It is. After all, how is John Doe public suppose to know the do’s and don’ts of the interweb standards?
What’s that you say? There are do’s and don’ts?
Yes. There are rules. I mean… they aren’t law… yet. But people need to know what they’re doing when it comes to information management on the web. Specifically speaking – when it comes to images.
So let’s talk about the dos and the don’ts.
I can go into a whole spiel about text on graphics and why it’s not acceptable. But I am going to keep it simple.
A lot of text on an image cannot be read by a screen reader or be indexed by a search engine. Alt tags are not meant for paragraphs of text because it cannot be properly formatted with the correct HTML tags. They are meant for small (logo title) snippets of text.
What is an Alt Tag?
ALT tags or ALT attributes are “alternative text ” for an image. ALT tags are used to describe the image or what the image is representing. One of the main purposes of ALT tags is for the benefit of visually impaired users who use screen readers when browsing. ALT tags are also used for those who surf the web with images turned off or users that have text only browsers. As with many website specifics, ALT tags also play a role in SEO. ALT tags help search engines associate images with a webpage ‘s content so they can properly index it within their search results. ALT tags also help search engines determine the best results to provide when a user searches for images.
Source: Common Places Interactive
When managing your site content, it’s perfectly OK to use images that have been compressed for the web. What’s not okay is to put a ton of text on an image on the web. For example:
Alt tags are not meant to house a lot of text. They can’t be properly formatted for a screen reader, and it’s just plain shotty. I made these images look good at least… even though one is completely unacceptable for web standards.
Image management 101
Not too long ago I was speaking to a Virtual Assistant, who was having a tough time to load an image to a clients media library.
Note to self:
A virtual assistant is an independent contractor who provides administrative services to clients while operating outside of the client’s office. A virtual assistant typically operates from a home office but can access the necessary planning documents, such as shared calendars, remotely
source: investopedia.com
When I asked her how much the image weighed, she said “10 Megabytes”.
We had intentionally throttled files to fail upload at 2MB at that particular site. Even 2MB is a high file weight for an image, but it was allotted for documents that were downloadable such as a PDF rather than images that were to be displayed on a page.
It was then I had to educate her on image compression.
Image compression is the process of encoding or converting an image file in such a way that it consumes less space than the original file. It is a type of compression technique that reduces the size of an image file without affecting or degrading its quality to a greater extent.
Source: techopedia.com
Virtual Assistance may cross over into the Virtual Assistant realm, but we come to the table with technical skillsets that most VA’s don’t have. Like a full degree in website design and development and familiarity of web standards.
So getting back on topic…
I know you’ve seen it. Pages that take forever to load.
Often times (too often, I might add) it’s due to an image being uncompressed and loaded to the web by someone who doesn’t have the knowledge a webmaster will have. Compression specifically speaks to a files weight. The less it weighs in bytes, the faster it loads. It’s not speaking to the dimension or pixel aspect ratio of the image.
Repeat after me:
Resizing an image on the screen does not change its weight.
In fact, a browser has to work harder because it will load the image at its original size and weight, but then it has to also change its dimensions once it’s loaded. Slowing down the display rate even more.
There are a lot of free tools to compress images, like Canva.com. You don’t need photoshop or Illustrator to do this. There is a lot of image compression software out there.
What did we learn this week?
Do’s
- Do use text when it’s called for such as a logo, or section marker.
- Make sure alt tags are in place and also title tags for the visually impaired, screen readers, and SEO enhancement.
- Compress those images. The aspect ratio can be large, the weight must be small.
Don’ts
- Don’t put a lot of text on an image unless it is absolutely necessary.
- Don’t upload raw image files without compressing them first. Raw files that have not been compressed severely impact SEO, screen readers, server space, and page load time.
If you have questions, you know where to find us. Hit us up in the chat below.
And for your viewing pleasure, here’s a video by WP Beginner for alt tags and title tags in WordPress.
Coming next in this series: Why is my image so fuzzy?
