Images Not Appearing...

[CAR37]

Hey everyone,

I just uploaded my website files to Zymic and the pages come up but no images are showing. When I test the pages on my desktop the pages look fine, but when I try to access them over the web the images aren't there.

Please help!

[AirOgames.zxq.ne...]

Hi

maybe it could be that the img name is example.png and in you coding it is <img src"example.PNG">

when i uploaded my stuff that also happend

[CAR37]

Fixed now. Thanks for your help!

[dohanlon]

Hi, guys. Similar problem here. Two images that show up fine on my local machine don't show up after using FTP to upload my site to zymic.

My site is located at http://testkosho.zymichost.com/index.html

No images are properly displayed on index.html, even though there are two images in the code. These images (relative, not absolute!) work fine on my local machine. You can see that if you click the links for 'Instructor' or 'Schedule', all the images on those pages display correctly.

At first, after uploading I saw that two of my images had the capitalized extensions, whereas in the html code they did not (html = huddle_hands_up.jpg and upward_block.jpg, file names were huddle_hands_up.JPG and upward_block.JPG). I corrected this issue and tried to change zymic-side files using FTP. However, the images still didn't display.

I thought to myself, 'Maybe zymic doesn't refresh the images right away. Maybe I can force refresh by pulling down the whole site and replacing it using FTP.' I removed the site from zymic, and then confirmed that it did not work by going to http://testkosho.zymichost.com/index.html and getting the 404 error. Then I uploaded everything using FTP again.

Still the images on index.html didn't work. Hmm... I thought to myself, "Why does shidoin_ohanlon.jpg work on the instructor page (using the same relative path) while huddle_hands_up.jpg and upward_block.jpg don't on the index page?'

I did the next thing I could think of, which was to test replacing huddle_hands_up.jpg with shidoin_ohanlon.jpg (without changing the relative path) to see if it was a problem with something about my index.html. BUT! Low and behold, when I change edit index.html and change:

<img class="right_photo" src="images/photos/huddle_hands_up.jpg"></img>

into

<img class="right_photo" src="images/photos/shidoin_ohanlon.jpg"></img>

I get shidoin_ohanlon.jpg to pop on index.html just fine! Is there something about my images? They're all jpg format. Here's the relevant html and css:

index.html

<img class="right_photo" src="images/photos/huddle_hands_up.jpg"></img>

<img class="left_photo" src="images/photos/upward_block.jpg"></img>

instructor.html

<img class="right_photo" src="images/photos/shidoin_ohanlon.jpg"></img>

css

.right_photo {
width: 250px;
margin-top: 20px;
margin-right: 60px;
margin-left: 15px;
float: right;
}

.left_photo {
width: 250px;
margin-top: 10px;
margin-right: 15px;
margin-left: 60px;
float: left;
}

[zpcs]

Hi dohanlon,
I love it, information to work with! Keep up the great work - it makes it so much easier to solution for. Thanks.

Your troubleshooting skills are amazing and logical

I've visited the site after reading your POST and I noticed that the images are there and the images seem to load slow (which in turn bogs down the page load time) we can cure that relatively easy with some knowledge and possbly the advent of a decent "graphics" software program. Ready....

Images (as they appear at your Web):

• huddle_hands_up.jpg: filesize: 837kB, dimensions: 2309px by 1772px, approx. loadtime@768kB: 12 secs
• upward_block.jpg: filesize: 618kB, dimensions: 2263px by 1583px, approx. loadtime@768kB: 9 secs
• shidoin_ohanlon.jpg: filesize: 1.15MB, dimensions: 1458px by 1945px, approx. loadtime@768kB: 16 secs

The current images are called (and you can lose/remove the separate "</img>" at the end of each "img" call) by your index.html and the instructor.html webpage code respectively and sized by the CSS code to be 250px in width. 250px is far smaller than the uploaded images 2309px, 2263px, and the 1458px widths.

(on your local computer) What is needed is to reduce (with constraint to proportion) the image(s) dimensions to accomodate your desired 250px CSS width for your image(s) and then to optimize the image(s) to load in the webpage in approximately 1 second each.
I utilize ADOBE Photoshop 7.0 (with ImageReady 7.0) for 99% of my graphics work. I work primarily in ImageReady 7.0 to reduce and optimize an image for the web.
The newly resized images (existing) can become:

• huddle_hands_up.jpg: filesize: 43.62kB, dimensions: 250px by 192px, quality: 98%, approx. loadtime@768kB: 1 secs
• upward_block.jpg: filesize: 44.23kB, dimensions: 250px by 175px, quality: 100%, approx. loadtime@768kB: 1 secs
• shidoin_ohanlon.jpg: filesize: 44.21kB, dimensions: 250px by 334px, quality: 72%, approx. loadtime@768kB: 1 secs

The "quality" is an adjustable range of 0% through 100% in the ImageReady 7.0 "Optimize" window. For the intent and purpose here, this controls the "degradation of the image" while attempting to achieve the 1 second loadtime@768kB Internet Connection Speed. <= it is a tradeoff

Once you have reduced and optimized the images upload them to your web hosted account and before going to the website "clear your Internet Browsers Cache".

You have cleaned up your images and reduced their bandwidth useage against your web hosted account... it's a win - win situation.

Hope this helps you out.