Preferred Image Replacement Techniques
-
What is the preferred image replacement technique currently for CSS? I have been using the one that someone here at SeoMoz recommended a year or two ago, which was:
{
#id {
overflow:hidden;
width:200px; //width of the image
background-image: url(...);
}
#id span {
display:block;
width:1000px;
height:1000px;
}
-
Since I posted this, I've been using Google Fonts and @font-face instead of doing image replacement. When I need to use a font that I don't have a license for, I do image replacement as I described above. I've not run into any problems or penalizations with that method.
-
I'm interested on an update on this question too. Scott O.
-
Hi! We're going through some of the older unanswered questions and seeing if people still have questions or if they've gone ahead and implemented something and have any lessons to share with us. Can you give an update, or mark your question as answered?
Thanks!
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Can I replace categories with a static page
Hello there. I want to replace all of WordPress categories with static pages so that users see a well designed and constructed presentation of all the articles within each topic instead of just a long list of excerpts. I've already done this with 2 categories and although it is hard work I can't help feeling it is a much better thing for my users. However, I'm concerned that I am embarking on this project without being totally sure that it makes sense from an Seo point of view, or whether there are any downsides I haven't thought of? My idea is that the WordPress categories are set to noindex and nofollow. Search engines should find all of my static category pages and all of the content within each category will be spidered from there instead. Just to be sure you know what I mean here is a link to a normal category - https://www.whitegoodshelp.co.uk/category/consumer/ and here is my static page replacement for it - https://www.whitegoodshelp.co.uk/consumer-rights-appliances/ Both pages contain links to all articles within the category except the one generated by WordPress is just a long paginated list, and my replacement is a proper category page, which is hopefully far more useful . Can someone please confirm that there are no downsides to this strategy? 🙂
On-Page Optimization | | Snowdune1 -
Responsive images srcset
Is delivering scaled images using srcset a good idea? Thinking of delivering one image size to Mobile and another to Desktop. How can I do this for all browsers? Thanks Mike
On-Page Optimization | | henandstag2 -
Background Images and ALT text
We pretty much exclusively use background images for our sites. How do I add in alt text? I tried a Google search for this issue and the best answer I could find was "Use the 'title' tag in the containing div", but that was from 2010. Is there a better way to do it? And no, we're not going to switch to using standard images, because background images are way more slick for UX.
On-Page Optimization | | MichaelGregory0 -
Optimizing images on website. Is it bad to use the same alt names and keywords?
I have a webpage that I have 6 separate images showing step by step instructions of how to use our product with a sentence describing instruction inside image. I took screenshots of the instructions from the products App and uploaded them to webpage because they provide a great visual. I want to make sure I optimize correctly, can I use the same keywords for all the image names?
On-Page Optimization | | artscube.biz0 -
How to ALT tag correctly many similar images?
scenario: I have a product page with some text about the product and 12-15 different images af the product: details, colours, different views... how should I name an alt tag them correctly, been them actually really similar? Is it keyword stuffing to use the same name containing a relevant keywords?
On-Page Optimization | | DavideM0 -
What is the importance of image file names and H1, H2 and H3 tags
Hello, My client thinks they will get better rankings if we change the product image names to reflect the keywords for that page, is this true? I believe I just have to add "alt tags" but not sure now. Also, they think its very important to have H1, H2 and H3 tags on each page. I thought this wasn't a big factor anymore. Is it? Thanks
On-Page Optimization | | maximumrank0 -
Image URL's have knocked my sub-pages down (WP)
I had most of my keywords within the top 10 for this site, some were even ranking in the top 5. For a possible minor boost, more-so to cover all the bases, I decided to add images to all of the pages, and they were uploaded as a gallery with most of the image file names being the same as the keyword. Thus, url's were created with our targeted phrases, extending off of the corresponding sub-page. After that, Google quickly picked up the url's to the images and began indexing them, when that occurred the sub-page which was to be the landing page, quickly tanked. Nothing else on-site changed besides the uploading of the images, so I'm sure they're conflicting and for whatever reason Google can't decide which page to index. The page that contains the images used, or the actual intended landing page. With WP I didn't see a way to not have them link to anything at all, and just be static when using a gallery, stock at least. So, my question is how can I quickly alleviate this problem and what should I do in the future to avoid this? I believe if I change link thumbnails to image file instead of attachment page, that should fix the issue... Then, I'll have dead URL's which I suppose I should 301 to the sub-page. Alternatively, is there a better solution that will work, I was also thinking about no-indexing the attachment URL's, but that doesn't seem to be an option.
On-Page Optimization | | JayAdams320 -
Image alt attribute vs. plain text in link?
I'm building a product category browsing page for a high-falutin' jewelry retailer where we display only product photos linking to individual product pages, without any text in the links. From an SEO and link-juice-passing perspective, is it most effective to embed the product titles as the alt attribute in each image, or to leave alt="" and use text substitutions (i.e. an inner which is css'd to display: none) within the <a>to help search engines accept my product titles as the link text with the most credibility?</a>
On-Page Optimization | | cadenzajon0