0

I have two images, logo.png and logo-mobile.png.

The logo is basically two words, one written in a colour and the other one in another colour. For simplicity let's call it "TwoWords", where "Two" is white for logo.png and black on logo-mobile.png whilst "Words" maintains the original blue colour in both logos.

The reason I do this is that on desktop I have a slideshow going on (I load the images using the css background-image: url("url/to/image.png") for desktop) in the header where the logo is (no navigation bar as it's just a single page) whilst on mobile I don't want to load the slideshow (you know, 1MB per image or more), so I just set the background colour to white. Now if you remember what I said about logo.png and how "Two" is in white, well... I can't use this as the logo since "Two" becomes unreadable, hence the second logo.

My first solution to this problem was quite simple really, I created a 

<div class="heading-logo"></div>

and the css for it was

.heading-logo{
    background-image: url("../images/logo.png");
}

whilst in the media query for mobile I change logo.png with logo-mobile.png. Problem solved, right? Wrong(ish)! I have the logo I want but I don't have an <img> tag with an alt attribute and a title, so if someone disables the images they will see nothing!

Now we get to my second solution which I am currently using.

<div class="heading-logo">
    <img class="image-logo" src="./images/transparent.png" alt="Two Words" title="Logo">
</div>`

Basically I'm loading a transparent image that "functions" as the logo when in reality the real logo is set as background for the div.

The last solution I am considering using is just creating two <img> tags and hide/display them accordingly. 

<div>
    <img class="image-logo" src="./images/logo.png" alt="Two Words" title="Logo">
    <img class="image-logo-mobile" src="./images/logo-mobile.png" alt="" title="">
 </div>`

But this way I always load both logos, which is something I would like to avoid. At the same time the solution I am using too loads two images, so they are quite similar (but not really) although performance wise it's a tiny bit faster since transparent.png weights less than both the logo images.

The question would be, which one would be the better solution SEO wise and also performance wise? When you have two logos, one for mobile and one for desktop, which one of the three solutions would be the better option?

I had a look at answers like this one which is basically my third approach (so is this one) or one that focuses more on the SEO aspect of the logo, but none answer directly my question.

Also if this is not the right place to ask this question let me know and I'll delete it.

Filnor
  • 1,290
  • 2
  • 23
  • 28
Antoniu Livadariu
  • 171
  • 7
  • I like the last option. Load both and use a (mobile-first) media query to change the display type. – sol Oct 11 '17 at 14:38
  • 1
    Loading both images is a horrible idea. Mobile internet is slow and often expensive. Any byte you can prevent having to load, is an advantage. Instead, use the transparent image approach, but instead of a transparent png image, use a 1px transparent gif. – Tijmen Oct 11 '17 at 14:52
  • @Tijmen I was thinking about that, to use the 1px .gif. But does it have an impact SEO wise as far as you know, to have a transparent image as the "official" logo, or that `title="Logo"` means nothing to a crawler? – Antoniu Livadariu Oct 11 '17 at 15:04
  • Google's algorithm is a closely kept secret, so I cannot be completely sure. However, to the best of my knowledge, `title="logo"` is meaningless to search engines. – Tijmen Oct 11 '17 at 15:33
  • Today I tried the 1x1 transparent gif but for some reason it weights more than the png (around 5 times more, 160B for the png against the ~800B for the gif) so I think I will stick with the PNG for now as the "Better approach" (N.B. it doesn't imply it's the best, it just implies that between these 3 methods, the best one seems to be the second one). – Antoniu Livadariu Oct 12 '17 at 13:14
  • I just remembered there is a way to tell search engines which image you want to use as your logo. You should take a look at [schema.org](https://schema.org), which outlines a _de facto_ standard for telling search engines who you are, what your logo is etc. – Tijmen Oct 16 '17 at 11:58

1 Answers1

0

you first approach of using media query is the better one for better performance

vic
  • 134
  • 1
  • 11
  • For performance it is, but as OP outlined, using a background image does not provide an `alt="foo"` for those cases where the browser cannot display the image. That creates accessibility issues and is generally poor practice. – Tijmen Oct 11 '17 at 15:35