CSS background images weight impact
-
Hi,
do you think that the use of a single 1.8Mb background image sitewide could have a big negative impact and make a website disappear from SERPS?thank you
-
Hi Gianni,
There are a ton of reasons why your website might have slipped down the SERPs or dropped rankings. It's almost certainly not because of your image.
If you want, you can PM me your URL and I'll have a look.
Nick
-
Hello,
I think the heavy wheight background image has been wrongly pubilshed without the proper jpg compression during last months... (maybe a webdesigner distraction).Anyway now the website is disappeared from SERPS,
I'm trying to spot the possible reason of this penalization, currently the homepage ranks "A" with Seomoz on page optimization tool for the primary keyword, and it's domain metrics are equals or superior to many competitors that rank in first page for the same keyword.
With this heavy wheight background image the overall wheight of the internal pages is about 2.8 Mb (html/css + scripts + inline images + css background images ), I think this is a really uncommon and high value.
If Google considers a page as "loaded" when all of its assets were actually downloaded from the server and not when the event "load" fires on the browser I think it could be a very negative factor.
Thank you all for your replies
(and sorry for my english) -
That is a pretty large image file, I do not know how it would impact the SERPS.
If you are using photoshop and saving the background image as a Jpg, one thing I always try to do is lower the quality when saving for web to around 30-40 for really large images (can notice a difference but not too bad) or lower the quality to 51 if you want the image to remain pretty much the same.
Another thing that I like to do is use Smush.it (http://www.smushit.com/ysmush.it/) which is a free tool from Yahoo that will save you a little on filesize without changing the appearance of the image.
Hope this helps!
-
1.8mb is HUGE, what on earth is in there? I have a full background complex image for one of my websites - it's 90kb. Even the biggest CSS sprite image I have is just 30kb that includes most of my site template.
I recommend that you revisit this and use a different image format if not jpg/png/gif - for example never use tif or BMP online.
A background this size will really look poor to your first time visitors - this is exactly why Google want to start using speed as a ranking factor.
-
Just to add - try and compress the image as much as you can.
I'd be more worried about waiting for it to load and it having a knock on effect on your user experience.
DD
-
Hi Gianni,
of course the huge image won't make the website disappear from the serps - if you define "disappear" that the website is banned from the index.
I suppose you know that speed / loading time already matters, but it is just one of many ranking factors and Matt Cutts said that very rare pages are concerned. But imagine that there is a website with exactely the same condition as yours then the one with less loading time will be "better" than yours.
Even though the image is in the css defined it is not the best idea. Did you really compress the image yet?
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
-
In seo is it nesseccary ro optimize images as well?
Is it right Image optimization creates many advantages such as better user experience, faster page load times, and additional ranking opportunities. And, it's becoming an increasingly more important role in the website? Because I start a blog https://coinmasterfreespinslinks.com/ and need your suggestions seniors. Thanks!
On-Page Optimization | | adsdsadsacd0 -
How to deal with hundreds of externally-generated images with no alt text?
Hi all This is a good one. I work for a webdev company who has clients in the transport industry. Part of our work on their sites involves pulling in transport-related offers from a feed. This includes both text and images, which our site template turns into viewable pages. The problem is that Moz has flagged that these images don't come with alt text, and there are _hundreds and hundreds of them. _I can't add alt text to them all, there just isn't the time or resources. Besides, the list is updated frequently, and new images are pulled in. So... what do? Would it be prudent to noindex them all by default setting? I'm stuck! Many thanks,
On-Page Optimization | | tomcowles
Tom0 -
What tools or tactics do you use to identify which ranking factors Google is weighting for your industry or keyword?
Google ranking factors are increasingly more complex and less universal. Google is emphasizing different ranking factors for different scenarios. What tools are available that can help identify which ranking factors Google may be weighting for a given query or industry? For example, are there any tools that provide correlative analysis of Google's rankings for a given keyword?
On-Page Optimization | | AdamThompson0 -
Image alt tags shouldn't contain keywords?
Hi Everyone, I've been informed recently that keyword within your image alt tags can be a trigger for penguin if you have your keyword mentioned too often on the page (over-optimisation). I'm not sure I understand why though, the reason for this is, we have a page which features a picture and a description of a product. The page title, heading, a mention in content and image alt all contain a keyword which is the product name. I've been told to remove these alt tags but aren't alt tags important for screen readers and other W3C complacency issues, so removing the product names from the alt (which also happens to be the keyword for the product pages but is best describing what the image is) would make these image useless to users with certain disabilities, so if its true that doing this can be a negative signal isn't this breaking googles guidelines by not providing good content for those users? Would it be better to remove these alt tags or attempt to remove keyword elsewhere on the page? or can anyone suggest something else? Thanks in advance.
On-Page Optimization | | AMA-DataSet0 -
Image Alt and Title?
I'm building a quotations website. Each quotation will have between 1 and 5 images (picture quotes) associated with it. The images will be featured as thumbnails (image gallery) on the quote post itself. How should I handle the image alt and title tags so that I rank better for a quote in image search, and also strengthen the ranking signals on the quote post itself? Take for example, a photo of a beach and a photo of the sun. Both have the same quote on it: "Laughter is an instant vacation." Should the quote itself go into the alt tag? while the description of the image goes into the title? Or should the quote go into the title? Would this be correct? Title: Beach with children playing in the sand. Alt: "Laughter is an instant vacation." Title: Sun shining in the sky. Alt: "Laughter is an instant vacation." What about if the quote is very long? Google has said they like when the alt and title tags are short.
On-Page Optimization | | JABacchetta0 -
Do images on a CDN affect my Google Ranking?
I have recently switched my images to a CDN (MaxCDN) and all of the images within my post are now get loaded directly from the CDN. Will this affect my Google ranking? Do Google care if the image is hosted physicaly on the domain?
On-Page Optimization | | Amosnet0 -
External vs inline for CSS menu
Which is better for search engines: external or inline menus? And which language: CSS, Javascript, or both?
On-Page Optimization | | teatable0 -
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: Text to be hidden { #id { overflow:hidden; width:200px; //width of the image background-image: url(...); } #id span { display:block; width:1000px; height:1000px; }
On-Page Optimization | | TomBristol0