Previous 1 2 Next 17 Replies Latest reply: Oct 2, 2012 12:06 PM by thomas_r.
Alksyntrs Level 1 Level 1

Hi, I would like to understand why my website ( does not display all the images on Safari when it works well with Firefox. Instead, I see a blue rectangle with a question mark. I observe the same problem with Safari regarding my site on other computers.


Thank you for your help.

Safari, Mac OS X (10.5.8)
  • ~Bee Level 7 Level 7
    Mac OS X

    I'm looking at the site you posted, and I see incredible illustrations!  No blue boxes anywhere.


    Are you running 10.5.8 still?

    What version of Safari are you using?

  • Alksyntrs Level 1 Level 1

    Thank you for answering.

    Yes, I'm still on 10.5.8.

    But my wife's Mac is 10.7.4 and it's not working there too.

    Try there : - with Safari 4 images are missing.


    Everything is fine with Firefox. The problem is that the people who might be interested by my services are mostly using Mac and Safari...

  • ~Bee Level 7 Level 7
    Mac OS X

    Thanks for that.  You're right.  Blue boxes on those four.

    What do those four have in common?  There's got to be a reason.

  • Alksyntrs Level 1 Level 1

    1 -jpeg - 2,3Mo

    2 -png - 636Ko

    3 -jpeg - 1,5 Mo

    4 -png - 5,8 Mo


    Like this I can't see.

  • Frank Caggiano Level 7 Level 7

    It appears that the images that aren't displaying in Safari have diacritics in the filenames while the images that do display don't.


    No idea why Safari is having problems while Chrome is not.

  • thomas_r. Level 7 Level 7
    Mac OS X

    It looks like the problem is that the missing images have accented characters in the URLs. Only ASCII characters are allowed in URLs, and that does not include accented characters.


    It looks like you're using WordPress to host your blog, and I'm guessing that WordPress is not properly encoding those characters for a URL, in such a way that Safari is tripping over it and Firefox is not. What version of WordPress are you using? If it's not the most recent version, try updating. (You should update anyway, as outdated WordPress blogs are popular targets for attacks.)

  • Alksyntrs Level 1 Level 1

    As soon as I have time I'll try to get off the accented (lots of work) characters and let you know.


    The vesion of WordPress I'm using is 3.4.2. It's the most recent version. thank you again both of you.

  • Frank Caggiano Level 7 Level 7

    Only ASCII characters are allowed in URLs,

    Is that really true in this day and age? I tried searchig for a definitive answer but came uop short. I know I've been to sites with diacritics in the URL before.

  • etresoft Level 7 Level 7

    How very odd. You have stumbled up on a very peculiar little detail about Unicode. The odd part is that you are the second person in as many days to do that. Are you hosting this on a Mac?


    What is going on is that you are using accented characters in your URLs and file names. There isn't anything wrong with that as long as you handle it properly. There are two ways to represent any accented character. The e with accent aigu, for example, can be represented as just the é character or as e´ with a combining mark in-between. If I use é to search for "Charest déchu", I will find it. But if I just search for "Charest dechu", I won't. Using the combining character (the decomposed form), allows either spelling to work. On a Mac, all files are stored using the decomposed form. On Linux, they seem to be stored differently.


    On your server, the uploads directory lists all of your files (which is a bad idea by the way - you should turn off directory listings) and you can see how they are encoded. The problem is that there seems to be a mix of precomposed and decompsed Unicode.


    For example,

    the file t%c3%aate-fourmi.png is precomposed Unicode while

    the file Charest-de%cc%81chu-polaroid.jpg is decomposed Unicode.


    %c3%aa is UTF-8 for just the ê character

    %cc%81 is UTF-8 for just the ´ combining character that modified the preceeding e.


    You can use either one, but your URL must match how the file is actually encoded in the file system. I suggest not using any accents in file names so that your files are easily portable and easily referenced.

  • etresoft Level 7 Level 7

    Frank Caggiano wrote:



    Only ASCII characters are allowed in URLs,


    Is that really true in this day and age? I tried searchig for a definitive answer but came uop short. I know I've been to sites with diacritics in the URL before.

    Yes. You can include any character as long as it is escaped with a % character. I believe the use of Unicode is still restricted in actual domain names because of the potential for abuse. Someone could construct Unicode that looks really close to "", but isn't.

  • turingtest2 Level 9 Level 9

    I don't think Safari likes the way you've encoded the accented characters in the image URLs


    I've managed to find two alternate representations of the URL produced by copying and pasting links from source in different browsers.



    Both seem to work in Chrome (& presumably Firefox) but Safari only likes the first one, or at least as part of the code of the <img> tag it appears to fail.


    I can't work out where the block E%CC%81 comes from but while it appears (sometimes) to produce É I suspect it should really be %C9.


    There are also errors on the page which are revealed by this service:




    Looks like etresoft has a more complete explanation of how & why...


    Message was edited by: turingtest2

  • Alksyntrs Level 1 Level 1

    I took off the "Charest déchu", renamed it "Charest dechu", loaded it again on my Wordpress, and... it's now working! A lot of images to change now. Too bad I cant' write in french...



  • ~Bee Level 7 Level 7
    Mac OS X

    Thank you guys for helping out our OP.  I knew you all would know . . .


  • Tuttle Level 7 Level 7

    You can add some code to your theme's functions.php file that will sanitize any special characters in your image files:



    function sanitize_filename_on_upload($filename) {
    $ext = end(explode('.',$filename));
    // Replace all weird characters
    $sanitized = preg_replace('/[^a-zA-Z0-9-_.]/','', substr($filename, 0, -(strlen($ext)+1)));
    // Replace dots inside filename
    $sanitized = str_replace('.','-', $sanitized);
    return strtolower($sanitized.'.'.$ext);

    add_filter('sanitize_file_name', 'sanitize_filename_on_upload', 10);



    See: t-show-in-safari-6?replies=5

Previous 1 2 Next