Whenever I upload an image to my website, it makes the image a little larger than the original file has it at, plus the quality goes down as if it's zooming in or something. I tell it in the html code what the correct image size is like this:
img src="_images/podcast/120913_slider.png" width="851" height="323" alt="News1"
So the correct sizing should show, I'm not trying to change the dimensions or anything in the code. When I save the file and look at the picture, everything looks alright. But once it's in the site, it changes and I can't figure out why.
Here are two pages I'm currently working on where I see this. In the news slider on the main page, it's very clear that quality has been lost for the Christmas Novella news picture, which is obviously a problem for me.
http://thehummingbirdplace.com/
http://thehummingbirdplace.com/episode/12/9.html
I've also tried downloading the image again from the site (the "save image as" option) but it looks the same as the original image I had (smaller and high quality), so I don't understand why it displays differently on the page. I'm using Firefox, and I definitely do not have the page zoomed in or anything, I've checked. And I don't see this happening on other websites I visit, just mine, and on multiple computers, so I know there is something I must be doing wrong in the code?
I'm sorry if there is an obvious solution to this, thank you for helping!!
Update: the images show up fine in Chrome, just not Firefox it seems
According to your link, the image on the website is exactly the image that is linked (and not resized), I can't see any difference between those. Are you sure you are exporting your images at this resolution: 851x323 ?
Related
why does html just not recognize some images? i took a picture on my phone and moved it to my laptop, and when i try to load it nothing happens. images that i edit in gimp dont work unless i upload them to am image sharing site and redownload them, and sometimes even that doesnt work. i know it isnt an issue with my syntax, because some other images will load, just not the ones i actually want. ive tried to adjust the image permissions, images will have the same permissions but only some of them work.
i know this isnt a lot to go off of, if anything else is needed ill try my best to answer
I have searched for a couple hours on this topic, to no avail. When I view my site on mobile via Safari, sometimes pieces of the background image are missing. For instance, everything will look great, but then there will be a chunk missing in the middle. Or, perhaps instead there will be a chunk missing from the bottom. It appears to be random. Then, if I turn the phone, the missing piece fills in and even if I turn it back to portrait mode, the piece has filled in.
Any ideas as to why a section of an image won’t load? Could it be that the image is too big? Just looking for some ideas to get started with. Unfortunately, I haven’t come across this problem in my searches. Thanks.
Images should not be missing chunks. If it is a JPEG image, there is the tiny possibility your image is being corrupted in transit. Is the image being created dynamically?
But the most likely cause is that you have some html element over the top of the image that is opaque - and preventing the underlying image from being displayed.
i have this bug on my site, dont know what could I do to change it so it will be displayed correctly.
My problem is the filmstrip on my site kecy.sk a.k.a gallery... when I refresh, there are elements appearing and then dissapearing and work properly... But that first look is ugly... It is supose to be displayed in one row as it is. but when I do refresh the page, I see those pictures in filmstrip stack for a little while in multiple rows and then it goes to normal one row.
P.S. Dont mind that big big pictures... it's gonna be smaller sizes...
Thank you
You are serving scaled images thus your website speed is very slow
Dont scale image using HTML or CSS. Try to create a php function for resize them.
You have to specify cache validator.
The following resources have identical contents, but are served from different URLs. Serve these resources from a consistent URL to save 9 request(s) and 1.7KiB.
https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i7!2i69!3i44!4i256!2m3!1e0!2sm!3i373056598!3m14!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcy50OjZ8cy5lOmd8cC52Om9mZixzLnQ6NXxwLnY6b2ZmLHMudDozfHAudjpvZmYscy50OjF8cC52Om9mZixzLnQ6MnxwLnY6b2ZmLHMudDoxfHAudjpvZmYscy5lOmx8cC52Om9mZg!4e0&token=48356
https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i7!2i69!3i43!4i256!2m3!1e0!2sm!3i373056598!3m14!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcy50OjZ8cy5lOmd8cC52Om9mZixzLnQ6NXxwLnY6b2ZmLHMudDozfHAudjpvZmYscy50OjF8cC52Om9mZixzLnQ6MnxwLnY6b2ZmLHMudDoxfHAudjpvZmYscy5lOmx8cC52Om9mZg!4e0&token=78498
Im havin a big problem.
Im programming a website for a company in germany.
Since there are so many sites on the page i took an iframe in my index.html file instead of using a div tag because this would need a lot more time since i need to write the div stuff on every page.
Every Browser like IE,Chrome,Opera and also Safari shows the website like i want it to be shown.
But Firefox shows the iframe part in a small window in the left upper side of the window.
So you cant see any content or even 100x bigger than normally and in a quite small window.
So do I have to change anything in my code or do i need to add something?
The bigger problem is actually that the man who is able to start the server doesnt want to start it for let the website goin online because that doesnt work on firefox.
He explained the problem to me that way. but my program (mirabyte) shows everything in the right way (ALSO FIREFOX) so what can I do now because I need to let him try every small change i will do. So it would be nice if anyone does know the EXACT answer because he or she already had the problem.
Any ideas?
Thank you so much
Sasse
Make sure that if you have the iframe in any sort of container, that container also has the applicable height attribute. Also make sure that the iframe height is applied to both the HTML and the body tags.
Beyond that, we would have to see the part of your code where you're declaring the iframe to say anything more specific.
I'm building the landing page for our app, and i found some inconsistencies when opening up my page on google chrome. I designed the page to have the text be on the right side of the picture. However sometimes when i refresh the page, the text drops below the picture. This doesn't happen all the time, but if i keep pressing refresh, the text will eventually drop.
I'm assuming that it's because i might be putting my width of the div a little too narrow. but i dont understand why it works sometimes and not other times.
the site is on : https://www.thedashapp.com/about.html
(disclaimer: the site isn't supposed to be live yet, so the links aren't all properly hooked up yet, and the app still hasn't launched)
See pictures:
How it's supposed to look like:
What happens when i click refresh a couple times:
You'd be better off putting the text in a separate div, and perhaps the image too. Then apply float:left; to both the div containing the text and the image or div that contains the image. I'm pretty sure that'll fix it.