May 29, 2020
For newcomers in blogging or online sales, the questions of how to treat images can be confusing. There’s a lot of information spread out everywhere with differing opinions.
In my career as a web developer, I’ve worked with graphic designers, SEO analysts, and other developers on countless projects. Let’s just say; I know a few things on the topic since it’s my job to know!
So I want to go over each aspect of images for the web and what to do. These are not hard rules but guidelines. Every project is different. I’m also going to give you resources on each thing to help you.
What are “Alt” Tags Anyway?
I know you’ve seen discussions about alt tags, so let me clarify some things about it. In HTML- the actual code on a website- you can add tags or attributes to an image. The “alt” tag (which is an attribute) has a specific purpose that isn’t for SEO.
The alt tag explains the image or its purpose for the visually impaired using screen readers.
Very often, images are critically important to give context to a page, so the alt tags allow making sure everyone can understand a website’s content.
It is good practice (and just common decency) to make sure your website is accessible to everyone.
How does SEO factor?
While meant for the visually impaired, Google does read the alt tags, and it does factor in your SEO. After all, Google can’t “see” your image either, so you’re essentially explaining the image and its purpose to Google as well.
Not properly writing alt tags leads to a lot of misuses, confusion, and abuse. I remember back in the day (and I still see it on occasion) image alt attributes being keyword-stuffed and unhelpful. Google is smarter now, so this isn’t a wise strategy.
So how should you write alt tags?
Remember to always write for your reader first. Google will always value that over keyword stuffing or other classic SEO tactics. So when you post a picture, you must ask what do people need to know about this image? Here are three examples.
Example One
Let’s say you have an article about cat breeds. You post an image of this picture, and your keyphrase is cat breeds. An adequate alt tag to use would be: “An orange tabby (mixed breed cat) taking a nap.” Give context and explains what the image is. Bonus, you found a way to use your keyphrase appropriately.
Do not force your keyphrase. If it doesn’t make sense to use your keyword in an alt tag, then don’t use it. Remember, always write for your readers first. Google is clever. It will figure out the relevancy of your picture.
Here’s our second example.
Let’s say you’re running a sale in your shop. You post this in your blog or attach this in an email.
Example Two
If we follow the rule of writing for the reader first, it’s easy to know what to write—the most significant thing to note that this graphic is instructional. If someone cannot see this graphic, they miss important information.
Any graphics giving instructions, such as “click here” or “download now,” must-have clear alt tags.
So this alt tag could read, “One day only sale for my shop. Click here to get 25% off!”. Focus on what someone needs to know: context, what to do, and why. Any graphic that symbolically instructs someone to do something MUST have adequate alt tags.
Quick side note: another attribute for images is the title tag. It is particularly important to use for these kinds of graphics. It’s the text that shows up by your cursor when you hover over the image. It reinforces your alt tags and graphics’ message. So for this graphic, you could write “Click here for a 25% discount on our sales”.
Another Note! This process can get more complicated with SVGs, aria-labels, and buttons. For this article meant for online sellers and bloggers, I’ll be skipping that. However, let me know if that is something you’d want me to write about!
Last example of going over. Let’s say you have a landing page or an incredibly elaborate email or blog post. You have graphics that aren’t anything. They’re artistic touches. Like this flourish graphic, for example:
Example Three
The above image is purely decorative. It provides no critical information or context to the page or overall message. What do you write in your alt tags now?
Nothing.
Leave them empty. That way, screen readers will skip over the image and continue with the more critical information for the visitor. It’s always about your user first. Leaving your decorative images’ tags empty will not hurt your SEO. What will hurt your SEO is if you left ALL your graphics and images’ tags blank.
What about Etsy?
You cannot edit the alt tags in your Etsy listings, but that doesn’t let you off the hook. Remember these tips for your social media posts, email marketing, and website or blog.
How to edit alt tags on Facebook and Instagram:
How to edit your alt tags in Facebook
How to edit your alt tags in Instagram
Naming Your Files
“Crawling” is when Google reads web pages line by line. When Google crawls a page, it reads the image’s file name. Crawling is how websites get indexed, and having photos with keyword-rich file names adds SEO juice to your website.
Naming your files is a good practice, but I don’t see it practiced nearly enough-even from the big websites. You can take that as a hint not to worry about this step or as a way to gain an edge over other websites.
A Note For Etsy Sellers
Do not worry about naming the product listings’ photographs. Etsy will automatically rename your listing photos. Most social media sites seem to do this too. So focus on calling your files on your website and blog.
How to Name your Files
Consider the keywords and phrases you are trying to rank. Always keep it relevant to your brand, article, and content. The cat image above is named “orange-cat-SEO-example.jpg.” It’s relevant and hits to this article’s keywords.
Folder Naming Conventions
Taking it a step further by naming your folders is a bonus step that may not be realistic or practical to apply. When Google crawls file names, it does read the file’s full address. A made-up example could be pinkpursuits.com/seo/orange-cat-seo-example.jpg. See how this stores my cat photo in a folder called SEO? That’s additional keyword placement.
WordPress usually organizes media files by month and year. So this tactic is not realistic for most WordPress users since WordPress. If you are savvy and willing to go the extra mile, go for it.
Compressing Images
A more prominent component of how Google ranks you is in the user experience. Nothing ruins your experience on a website than when it takes forever to load. So Google takes your website page speed as a serious factor.
You’ll notice Etsy and other websites may have a maximum file size you can upload and use. Keep page speed in check and save server space. I’ve managed websites where the clients continually uploaded giant files over the years and ran out of room in their hosting. We had to go through everything, deleting and optimizing/re-uploading files to even make changes to the website. So this is a healthy practice for your website overall.
Very often, the photos we download from stock photo sites or take with our phones or cameras are enormous, both in size and file size. It’s up to us to scale image sizes down, so we have fast-loading websites.
What is Image Compression
Image compression is reducing file sizes at the expense of specific image details. Most of the time, the naked eye will not be able to notice the difference. You may have seen a poorly compressed image that is grainy. The image’s details were lost and became pixelated.
Getting More In the Weeds: Lossy and Lossless Image Compression
Lossy image compression is permanent data removal from a file. Think back to the poorly compressed images I just mentioned. However, this is the most effective way to reduce file sizes and can be subtle.
Lossless compression mainly removes extra metadata that all images have on a computer or the web. You most likely won’t need it, and it’s a safer, albeit, less effective way to reduce image file sizes.
Can you spot the difference between these?
(I can’t personally)
What do I use?
When first starting, I recommend you start by making a copy of the original image. That way, if you compress too much, you still have the original. Start with lossless compression. Often, this won’t compress enough to make a remarkable difference in file size; if that’s the case, tinker with the lossless compression. I have an app I use where I’ll show you how I do this below.
Suppose you’re working on a big project like website design, landing page, etc. I would recommend compressing images one at a time for the best results. Sometimes, you really can compress too much and lose some quality. So compress carefully and wisely.
Picking the Right File Types
For handmade sellers and bloggers, you’ll probably only work with JPGs and PNGs. I’d imagine you’d use .gifs in more conversational, fun circumstances. So I will focus on JPGs and PNGs.
JPG / JPEGs
JPGs are the most common file type you’ll see. It’s a good default to fall back on when in doubt. I’d recommend using JPGs for most of your photos. It’s already compressed to a degree and typically faster to load than the other file types. Here’s what to use it for:
- Photographs
- Product listing photos
- Most graphics
- Decorative images with the same background color of where it’s placed. (So if you have a white background website and don’t plan on changing that anytime soon, use a jpg for your decorative image.)
PNGs
PNGs typically have larger file sizes and, therefore, are used for higher quality images or specific brand images. They can have transparent or semi-transparent backgrounds. So those decorative images you may use in different places will likely need to be a .png.
What to use it for:
- Logos, icons, and other branded elements you’ll use repeatedly
- Product listing photos if you need them in very high quality
- Images with transparency / semi-transparency
- Illustrations and text-heavy graphics
How to Compress Images
Here are three ways to do it!
Use a Handy Website
Bookmark a website like TinyPNG.com and use it as needed. This website can compress both JPGs and PNGs. You can easily find another site by searching Google for image compression. There’s plenty out there but won’t give you the control like my next option. However, this is a good solution if you need a quick photo compressed. It’s less practical when you have a lot of photos regularly to compress.
(One of) My Favorite Apps, ImageOptim
ImageOptim gives you more control over how much compressions you want, whether you want lossy or lossless, and you can compress as many as you want at once. I recommend you download the free version rather than buy the web version. The app is only for Macs, but the website offers alternatives for other operating systems.
I change my settings sometimes based on projects or the image. But a general default I tend to use with lossless minification is around the 90% range. If you want to play it safe, check off lossless minification. Sometimes, I go lower or check off lossless entirely. It all depends on the project and image. In my general settings, I check to strip all metadata. I’ve never needed this data in my work personally.
WordPress Site? There’s a Plugin for That
I’ve used SmushWP and TinyPNG’s plugin. They both use lossy compression and remove metadata. SmushWP even has a lazy loading feature. Using a plugin can automate your process and remove this stress altogether. Try them out.
If you’re Using Photoshop
When exporting files, use the “Save for Web” feature. You’ll be able to control how high quality you want your jpg or png, whether your png is transparent or not, and other features. If you have a three-color logo, for example, but need it transparent, you can probably safely save it as a PNG-8. If it’s a photograph with transparency, opt for PNG-24. In JPGs, I usually feel like I can get away with the 75% quality mark without losing anything. You can set the metadata to none. Progressive JPGs are suitable for large background or decorative images but not necessary to use. Keep optimized checked.
What Size Should My Images Be?
I see this question a lot. Usually, the answer is “it depends.” But it does matter and should be considered. You do not want to use a 12000 x 15000-pixel image as a logo, for example. Yes, I’ve had clients do stuff like this before. Please don’t do it. You will get weird results, not to mention a slower website.
Your file size should depend on:
- Where is it going to be placed?
- Will it likely be scaled in different screen sizes?
- What purpose is it serving?
If you need a large full-screen image, then you will want a larger size than if it’s a small graphic in your footer. You’d probably care more about how the image will scale in a landing page than in an email. Does it have critical information, or is it decorative?
Here are some rules of thumb:
- Images meant to take up the entire width of the browser window can safely be at the 1500 pixel range in width.
- Depending on your blog, your featured images or banners can probably be about 900 pixels width.
- Logos and smaller “thumbnail” sized images can probably be in the 150 to 350 pixels wide range. Again, this can depend on your website.
- Stick to Etsy’s and social media site’s photo listing and graphic guidelines. They are always available and easy to find in Google search.
These are vague and meant for responsive websites that can scale up for larger computers and smaller to your phones. As a web developer, I try to be more precise about where it matters. Sometimes elements are not meant to scale but stay the same size no matter the screen size. In that case, I’d size the image to precisely what it needs to be. Keep the file at the minimum size possible.
A Trick Web Developers Use if You Are Still Unsure
It’s hard to know how big “pixels” are and what 300 pixels look like compared to 2000 pixels. I get it. Here’s what web developers use all the time that may help give you a better idea of sizing.
In Google Chrome, you can right-click the mouse and select “Inspect” (or “Inspect Element”). You may need to search on how to enable this for your browser. I think even Google Chrome has to have it enabled first. But once you have developer tools enabled and can right-click to inspect element, you’ll be able to see all the code and CSS making up the webpage you’re on.
You do not need to be able to read or analyze this for this trick. But right-click and inspect element on something- like an image. In your “DevTools” panel, usually on the right side of it, you can scroll to the bottom and see the size of the element illustrated. Pictured below is my DevTools panel. You should be able to find something similar in your dev tools.
By inspecting an element on the page, you can see how wide and tall it is in the squares illustration. In my example, this div is 597 pixels wide and 345 pixels tall.
If this overwhelms you, don’t worry. Read my next note:
The Pros Don’t Overthink It.
Just get a file size that looks nice and size it somewhere reasonable (refer to my guidelines above), and your image should work out. Sometimes CSS or WordPress wants to force a specific size to your image. You can fix this in the code by setting the image’s width and height to match its actual size or resizing the image. You’ll get the hang of it. Though, don’t overthink it.
Resources
For photo editors, stock photos, and other tools, visit my resources page. I have all the useful tools, apps, and sites I could think of listed there.
Conclusion
I hope this helps anyone who may feel lost when it comes to images for the web. Don’t be overwhelmed by this long article. Image optimization can be effortless if you drill it down to the basics: use alt tags, size and compress your images appropriately, use the proper file types, and name your file with relevant keywords.