Can anyone help me understand why my images are coming out rotated? The images themselves are vertically oriented, but they appear sideways in the web page.
sorry, here is the link
If you're on MacOS or iOS then photos that were taken with incorrect orientation data (because your phone had rotation lock enabled for example) then Finder, Lightroom, Apples Photos app and others can automatically detect this and rotate the photos without changing the original file. But a (non Apple) web server or even Windows, won't recognise these properties out of the box, as these non-destructive edits are stored separately.
If your going to run into this a lot I would recommend installing either a bootstrap compatable extension to batch edit photos server side, or run a batch conversion on your computer or mobile device that "physically" rotates your photos and re-saves the change to the file itself.
This last option is somewhat destructive if you overwrite jpg files as jpg with a compression less than 100% (which is usually the case.)
If you resize photos before uploading to your server anyway the rotation data should already be applied and I advice you to do all edits in one go so the photos only get re-saved once, and not deteriate each time you resave.
One small power tip: you can give very large photos a much higher jpg compression than small photos, but get photos that are, sharper, bigger and with smaller file sizes than if you had prepared a medium downscaled copy that requires a low compression (aka high detail level) setting to still look good. This neat method also makes sure your photo galleries are retina compatable and future proof.
Related
The thumbnails on my photos page take a long time to load, then if you scroll down the page and back up, they have somehow vanished and need to reload. I'm using an old version of chrome on Windows XP, so I'm sure that's half my problem, BUT, it still does this on my cell (galaxy S5). I'm a novice coder so please go easy on me lol. Here is the link to my website and the photos page:
http://www.mikemicalizzicontracting.com/photos.html
I can't really help you about your precise questions, as we don't have your code, but I am in a good mood so I'll just give you some tips to make your website quicker.
Some tips for optimize your images :
1) Resize your images
For now your images are displayed in 207 * 154, which is small, but you download them in their original size. You should resize them so the size of the image (in bits) would be much lower.
You can do that with a lot of online tools, or write a simple script for that in bash for instance. I think you will find a pre-made solution for the script very easily, or just have to download imagick (I am not sure of the name). This solution by scrip also depends on your distribution (wether you are usinc OSX, Windows, Linux..)
2) Cache your images first
It is always painful for the user to wait for images to display. So what you need to do is use browser cache (if you are novice you wil have some trouble but it will be worth it) to store the images data and then display them from this cache.
So the strategy is :
If there is the image in cache, just display it from there
If there isn't, download it from your server
once it is loaded, put it in cache; then display it from there.
3) (More advanced) Preload the images
If your home page is very easy to display (not a lot if images, not that much script to run etc), you can start download some images in the client and just store them in the cache.
This task should always be a second-hand task, it means it should not slow your user navigation. So depending on what the user is doing, you may will have to pause the request and start it again.
If the user go on the photo page when an image is currently downloading for cache, you don't need to start it all over again, just continue.
This last tip can be long to develop, but this is a good thing to do when you want to display very good quality images or just plenty of them.
I know that there are many devices that uses the favicon from the website in different ways...
On these favicon generator websites you can easy put an image there and the website will do the rest (generating several scaled images for certain devices)
If i want to cover ALL devices (Apple, Android, Windows Metro Tiles, and more) i would have to store 26 images (that are ALL the same picture just with different sizes)
And i would have to add 19 lines of HTML code to refer the certain devices to the certain images.
Is there a way to use just 1 file for all sizes?
I know that an ICO-File can contain multiple dimensions of an image.
I also know that a SVG-File doesn't depend on pixel resolution at all because it's vector based. (So a SVG can support EVERY imaginable size)
I could imagine to implement all sizes of an image to just a ICO or a SVG file where every device can pick it's optimal size.
Is that possible?
Its not exactly possible to serve different sized PNGs' in a single file.
SVG file would be the best hope here but.. Browsers today don't like them
Alternate option would be to use a tool that manages this process automatically.
I had the same frustration as you, so I simply came up with this tool called MakeFavicon
It helps create multiple favicons with predefined sizes and filenames at a desired folder, and also creates config files such as browserconfig.xml,manifest.json, partial view of HEAD to be included with relevant info.
I'm using it as a part of my Visual Studio build process and it works seamlessly to update all these files on every build.
Here's link to its example usage.
I take several photos using iPad. I take them in different orientations (rotate iPad every time on 90 degrees).
Then I download them to my Windows laptop and what I see? I don't see them as I saw them on the screen of iPad. Actually, there is only one valid image. Others are rotated.
I found this problem in browser (FF & Chrome). When you display image using img html tag it is rotated. But if you display it by entering image's full URL - it's totally OK.
I checked pictures via Safari on iPad - they look fine (in img tag), but don't in Windows.
Is there some metadata which shows that image should be rotated or smth like this?
As you know, the iPad has a hardware device in it that tells it the device orientation, which is how it determines how to display the screen to the user. While the hardware instantly knows how it's positioned at any given time, they seem to have engineered a lag into the software registering this change to improve the user experience (so the screen doesn't flip back and forth several times in a single second). However, this lag might lead to some unexpected results when taking a photo.
I have found that the orientation is most often unexpected with the iPhone / iPad when I am taking photos with my screen facing downward (i.e. taking a picture of something on a tabletop, for example). I assume landscape but get portrait, and vice versa. In that scenario (downward / flat), it is more difficult for the device to know what my intended orientation is.
I find the best way to resolve this is to hold the device in the clear orientation that I want for a second before I take the photo, then point the camera downward and snap.
The orientation data is included in an image's metadata (AKA exif data). You can take a look here for more information:
http://www.daveperrett.com/articles/2012/07/28/exif-orientation-handling-is-a-ghetto/
It is relatively easy to retrieve (and modify) the exif data in software. If you are doing lots of batch processing in some type of custom way, libraries are available to help with this for a variety of frameworks. But for small jobs, the absolute most simple way is to click the little "rotate" icon in the image viewer software within Windows which will make the update for you.
I have been wondering how facebook load images so fast.
I am not on any projects related to my question, but I'm just really interested.
With some observation, I noticed that facebook loads a low quality picture as temporary, and shows the high quality one as soon as it is fully loaded.
this makes it seem like it loaded it so fast, but really it was just a low quality one at first.
My question is, how does facebook implement that?
When I put image on my site, it loads it from top to bottom in full quality right on.
Is this done through Javascript/Jquery ajax? or something?
is done through php?
did facebook make to versions on their end? low and high quality? and send the low quality one first?
Thanks :)
Yes! you are right, Facbook loads low quality image first then render it based on network speed. this method called "Progressive JPEGs" which is another type of JPEGs, they are rendered, as the name suggests, progressively.
First you see a low quality version of the whole image. Then, as more of the image information arrives over the network, the quality gradually improves.
From usability perspective, progressive is usually good, because the user gets feedback that something is going on. Also if you’re on a slow connection, progressive JPEG is preferable because you don’t need to wait for the whole image to arrive in order to get an idea if it is what you wanted. If not, you can click away from the page or hit the back button, without waiting for the (potentially large) high quality image.
There is controversial information in blogs and books whether progressive JPEGs are bigger or smaller than the baseline JPEGs in terms of file size.
If you use tool like Photoshop or any designing tool while saving any document in jpg or other format it will ask you 2 option one is for Baseline and another one is Progressive.
But you can achieve same on run time also if you have written any API for this to convert your baseline images to Progressive images while displaying on webpage.
From my understanding, when you click on an image from the Facebook UI, the viewer appears with the low thumbnail version (or a slightly larger version of the thumbnail) loaded. Because of browser caching, that low quality image will display very quickly.
Then in the background, they use javascript to load the higher quality image. Then using some javascript events, they can detect when the higher quality image has loaded. Once loaded, replace the lower quality version with the higher quality version of it.
So from the UI perspective, it's only Javascript. When you upload the photo, they create multiple sizes of the image to allow this effect to happen.
I am putting some photos on my website and I do not know which syntax will load them quicker. My photos are usually 4300x3000 or 3000x4300 (which is from 7-10 MB per photo). I am using
#image {
max-height:500px;
max-width:750px;
}
When I viewed my website on a low-end PC, it took a lot of time to load. I do not want to use fixed height and width because I could have photos as big as 2500x2500 and that would cause a mess. What should I do to reduce the load time? Is there something like an “autoresize” that will keep the height to width ratio?
Compression
You should compress the images using some external software (if you are not using any other language apart from HTML and CSS). I would recommend Photoshop or GIMP.
That's the only way to improve the load: reducing the image weight. The forced resize is just loading the same amount of data from the server.
Improving quality of resized images:
If you are interested on improve the quality of the resized images, you can take a look at this article:
http://articles.tutorboy.com/2010/09/13/resize-images-in-same-quality/
Auto-resizable background
Loading image of 4.000 pixels is not a very common practice even in the websites with a full background. What it is usually done is loading a picture of about 1800-2000 pixels width and then adapt the image to bigger or smaller monitors using CSS preferable.
Here an article about that:
http://css-tricks.com/perfect-full-page-background-image/
Responsive images:
You can also load a different image depending on the predefined resolutions of your chose.
You will need to have multiple versions of each image though.
More information about it use.
My photos are usually 4300x3000 or 3000x4300 ( which is from 7-10
mb/photo ).
It has little or nothing to do with max-height versus height. The performance hit is coming from the original size of the image which causes the browser to:
download a large file
exercise a scaling algorithm against an enormous number of pixels
What should I do to reduce the load time? Is there something like an
autoresize that will keep the height to width ratio?
Create a smaller version(s) of the file when you upload it, and serve the small version. You can optionally open the original version when the user clicks on the small image.
You can create one or more copies of the file manually and upload them with different filenames.
A more elegant solution is to create one or more copies of the file programmatically (you didn't indicate server technology, but there are many options available). For example, Facebook creates six copies of each image you upload so that they can rapidly serve them in different places with the correct size.
Whether or not you do it automatically or manually, you may choose to adjust/crop the image to achieve the desired aspect ratio.
You should be resizing your images and loading those resized images instead if you want quicker loading. You could keep both large and small on disk and only load the large images when user clicks the link.
To resolve loading time
You have to compress your photos before uploading them to the server. Use export to web in photoshop, make sure the image size is reasonable (I would say never more than 1mb); You can also use image optimisation software (In Mac I would recommend JPEGmini).
You can, if you wish keep your large images in a folder in your site and link to them (so that one can download them if you allow this).
To resolve the ratio issue (square vs rectangle)
You can just use one of the properties and css will calculate the other. For example, if you put only
#image{
width:750px;
}
This will resolve the matter of things "getting messed up" if you mix rectangle images with square images.. Good luck!