Discussion in 'Search Engine Optimization' started by eanob, Jan 5, 2015.
What are the things which helps for optimizing the image in a website?
First of all you'll want your image to be in a .png or a .jpg format. People will disagree on which one is better, but they'll either tell you to use one or the other. So you're good with png or jpg.
Then the name of the image. Make sure to name it something related to the picture. So don't leave the name as "asd123456.jpg," but rename it to something like "dog-in-red-dress," and also make sure to use Only lower characters and use dashes instead of spaces to separate the words.
Then after you upload the picture, make sure to insert an alt tag for it. That's the most important tag.
And then if you want, you can insert a title tag to it and a caption.
One more thing you may or may not want to do, is to watermark your picture before uploading it. The reasons for this is that even if your picture is used by others or simply ends up somewhere where there's no backlink back to your website, you still have a chance of someone seeing the watermark and then typing your URL in their browser and visiting your site.
I'm sure I forgot something, but that's all that comes to mind at the moment
Good advise Scorp, not quite sure about the dash part. I will have to look that one up. That is the first time I've heard that one. When I am optimizing my site, I make for sure that the pictures are relevant to my site and try to fit at least 1 keyword in the alt tags of the picture.
Eanob you are not very clear on what it is you want to optimize. I am going to go out on a limb here and say I think you want to optimize the actual images itself. You are not specific so I am going to give you an excellent link from the Google developers on some things to consider in regards to image development
The ability to have your images load fast can make a huge difference in your sites overall performance. You want great pictures, but you want them to load fast and get the message a crossed. I have always been in the habit of simply reducing the number of colors in an image, you would be surprised what a difference that makes and in many cases the effect is not that huge visually but the file size is greatly reduced. You will need a better graphics program to do this in. I like CorelDraw although on one of my computers I still have an very early edition of JASC PSP which does a fantastic job on graphics. Experiment to find what works best for you.
Thanks for all your kind response...Am glad to have you all..
If you need transparency on Images - PNG is the way to go for all others, jpg is great.
And this is the best link if you are looking out for the size and bandwidth usage. If this bothers you, in many cases, GIFs are a better option than the PNGs.
If I remember correctly it has something to do with how the browsers/websites render the spaces. In HTML the space is something like %23 or something like that, so if you don't include a dash then your image could be read like "dog%23in%23red%23dress," and that would mess things up.
I guess it's the same as the recommendation to use dashes in your URLs instead of spaces.
I'm pretty sure that this is what's generally recommended online. Not spaces, not underscores, not dots, only dashes to separate words.
Oh ok I got you. Makes sense I guess. I never used that method before. I might try it out.
I thought the dashes were added automatically. I mean, I use Wordpress and when I name my images, Wordpress adds the dashes to make them into slugs. I think it's the slugs which the search bots read since search bots are image-blind.
Image Optimization is the important factor in seo and for that use alt tag is mandatory.
All right, I got you covered.
It says this:
"To note, while it's debatable as to if you should use an underscore (_), a hyphen (-), a period (.), a space ( ), or some other character to separate multi-word-named images (e.g. my-image-name.jpg vs. my_image_name.jpg vs. my.image.name.jpg, etc.), I, personally, like to use hyphens. The reason for that is because I like the way the image name looks in the URL. With that said, the method I see Google using throughout their Web empire is underscores (e.g. hot_tamales.jpg)! Whatever you choose, rest assured that it's not a huge deal how you separate your words. Don't use a space, though, because that space gets formatted with a %20 (the HTML code equivalent for a space) in the URL which tends to add additional fluff between words and make a URL look quite nasty. "
He's partially right... meaning, he's right about the space, but wrong about the underscore...
And then here: http://css-tricks.com/forums/topic/seo-image-file-name-do-underscores-_-matter/
We got this:
"A good rule of thumb is never use underscores for anything, not urls, file names, etc. Obviously underscores are required in programming environments which I don’t know much about, but for everything else, always dashes (hyphens)."
"Underscores are seen by search engines generally as “word combiners”, and hyphens are seen as “word separators.” Scott was right, never use underscores for anything. You can make a sure bet that this issue reflects one of the many, over 200 factors that Google takes into account when evaluating your website. They’ve inadvertently stated this in the past, even Matt Cutts has stated plenty of times himself not to use underscores."
I was slightly alarmed by my inability to support my claim on why you should use dashes and nothing else for image filename separators. Well, I believe it's clear now why I believe what I believe...
In truth, I don't think anyone can come and say with certainty what's the best thing to do SEO-wise, but this is my best bet, and I'm sticking to it
If you mean SEO optimization, I also recommend that you include alt tags whenever you upload images to your site. Keyword is the lifeblood of SEO so you can include some of your main keywords in your alt tags while helping disabled people know more about your site.
And that's something I forgot to mention. The disabled people - especially blind - who use special programs to surf the internet. The alt tag is really important to them, and what's even more important - believe it or not - are the H1-H6 tags.
Their programs use the H tags to navigate pages, so pages that are well optimized with the H tags are easier and make it possible for them to navigate those pages/sites. That's one thing that Google loves - supposedly because they care about making the internet a better place and all that jazz - so that's supposedly another one of the algorithms that Google takes into account for better SEO - the Heading Tags (H1-H6).
Also, the Heading tags have been around basically since the beginning of the internet, if I'm not mistaken, and they've remained around, unlike, say, the meta keywords that were actual for a few years, and then poof, gone...
I know that the Heading tags are not related to Image optimization per se, but there it is, it came to my mind when I read your post @xTinx and I thought I'd mention it.
Not being blind, I can't say for sure, but I am thinking that if I were blind, I don't know if I'd spend much time online.
haha that's true... but people do, and they have special programs that enable them to surf the web.
Here's an article about the Blind/Visually Impaired, Deaf, & Disabled visitors and the design of a website/webpage:
And Google pays attention to this, so naturally we can assume that it also helps with better SEO.
A quote from the article:
"Instead of using size attributes on the font element to denote a heading, the heading element should be used to correctly mark up a heading so that assistive technology can identify headings."
I did try using one of the speech browsers at a University here when I was starting with website development. Fortunately CSS does provide us with a few (20 odd) Properties to include the voice (They are called Aural properties) but I never got any client who asked me to put them up on their site. I also feel it a little odd that the world's most popular CMSs (Wordpress, Drupal, Joomla) dont make use of those Aural Styles.
Sure, no problem. I think it's great to cite as many keywords as possible in your website, especially in H tags. They make use of bigger than usual fonts (like those normally used in paragraph tags) which engines pick up easily. Even images without alt tags can rank high provided the page itself itself has a high keyword density and gets a steady stream of traffic.
Yeah, agreed. Just for the H1 tag make sure that you have just 1 per page. For the H2 to H6 you can have multiple per page, but only use one H1 tag per page.
One more thing I completely forgot about image optimization (something always slips my mind) is the compression of images. That's very important actually and I can't believe I forgot to mention it.
Google has said that the page speed is a factor in ranking. Large images slow down your website's loading speed, annoying visitors (especially those with slow internet connections) and harming your SEO efforts.
So always Compress your images before uploading them, you'd be amazed at how much you can save on image size without losing quality.
Here's a nice little tool that you can use to compress images one by one or in bulk: http://www.smushit.com/ysmush.it/
Just to clarify, since Scorp seemed to regard PNG and JPG as almost the same: err... No. Use them like this: JPG has better compression (way-way better than PNG), but can't do transparency. At all. You're better off designing your site in a way that doesn't need transparent PNGs at all, but if you do, you simply can't use JPGs in their place.
At the same time, PNGs are awesome if you have images with only 2-4 colors. And I don't mean "a photo of a red football", but FLAT colors, with no gradients, no shades, no nothing - like Coca Cola's red. That's cause, to get a bit more technical, JPGs files always contain information about "millions of colors", even if your image doesn't have "millions of colors". PNGs can contain an index of 2 to 256 colors, and THEN they "jump" to full 16bit color.
So, to make it short (...er)
Photos and images such as illustrations with lots of colors: JPGs.
Photos and images of any kind with transparency: PNGs
Images and illustrations with set number of "flat" colors": PNGs with 8bit color pallette
And something else: JPG compresses by "losing" both color and what we'd say "structural" information. To put it simply, there aren't only colors, there's also detail lost. PNGs don't (seem to, I dunno) lose detail, just colors. So, if your image is some kind of architectural drawing, that's an exeption where you should prefer PNGs even if more colors are lost - since detail is paramount, not rainbow-colory-graphics.
Separate names with a comma.