Uploaded image has EXIF Orientation: Rotate 270 CW, if I use <img src="path.jpg"/>, then browser shows the image correctly. But if I use <img src="data:image/jpeg;base64,..."/> it is displayed rotated, how can I fix this?
No JS solution, need to fix it with html, because this is used in email template
Changing to inline images is also problematic at the moment, would be perfect if I could keep it as base64 image and solve the orientation issue
Maybe something like :
<img src="data:image/jpeg;base64,..." style="transform: rotate(270deg);" />
And pass the EXIF Orientation as rotate value.
Documentation : https://www.w3schools.com/cssref/css3_pr_transform.asp
Related
First time posting here, so treat me gently. :)
I have an SVG image on my site which has a transparent background -
<img class="img-responsive center-block" src="images/pritchservices.svg" alt="Pritch Services Logo" />
Works beautifully on my site. However, due to the transparency, when that image loads in google image search results, due to the transparency, looks terrible.
I have an alternative image (using for fb Open Graph crawler) which is here -
Pritch Services Full Logo
In my crazy mind, this is what I had as a plan:
Redo the SVG in Illustrator to include the background color (as per the fb OPen Graph image) - this would then mean the image result in Google would be as expected
Have some CSS within my site to set the background color of the SVG to transparent, so it displays nicely (as it currently does on the site)
I am assuming I can't just put the SVG markup inline, as although this would give me what I wanted on the page, it wouldn't load the image AT ALL on google image search results?
Is this the way to go, if so, any suggestions on how to implement please; or is there an alternative solution I haven't thought of? Or am I just being too picky?!
Thanks in advance everyone...
You can't include an SVG via <img> and style it with CSS in your parent document.
You can't style the contents of an <img>, even if it is an SVG
CSS doesn't apply across document boundaries
You have a few options.
Include the version with a background in your page. And then hide it and replace it with the transparent-background version via CSS.
<div class="logo">
<img src="logo-with-background.svg" ... />
</div>
.logo img {
display: none;
}
.logo {
background-image: url(logo-without-background.svg);
}
Include the background version using <object> then use the DOM to find the background element and hide it.
var object = document.getElementById("myObject");
var svgDoc = myObject.contentDocument;
svgDoc.getElementById("bg").setAttribute("display", "none");
Apply a clipping path to the backgrounded version as #Obink suggests. It would work, but it is not the easiest solution though. And it won't work on older browsers that don't support clip paths.
I have a jpg image that was taken vertically and saved that way. It appears as it should (vertically-oriented) in Windows Explorer:
I've got this HTML/Spacebars to display it in my Meteor app:
<template name="nfnoscarsdonut">
<p>Here's a picture of NFN Oscar's microscopic Donut, which we had to eat because he pulled a "George 'No Show' Jones" again</p>
<img src="/images/NFNOscarsDonut.jpg" height="400" width="600"/>
</template>
...but it displays in "landscape" (rotated 90 degrees to the left), as you can see here:
What do I need to do to get the image to straighten up and display right (vertically)?
There seems to be no orientation property for the img tag
I'm not familiar with Meteor and this is just a guess. Maybe the JPEG file has its EXIF rotation property set which Windows Explorer is reading and using to "soft-rotate" the image for display and which the browser when referencing the image is simply ignoring (or vice-versa).
The simplest option might be to rotate the image using CSS as described here.
If you open the image in an image editor you can see if the image is rotated or not and if not then rotate it and see if that has any effect on its display on the web page.
Or you could view the EXIF properties of the file with an application such as one mentioned here.
A last resort could be to try to rotate the image according to its EXIF property with JS as described here, though that still assumes it has something to do with EXIF.
Whatever it is I think it has something to do with the file and/or its metadata rather than the HTML used to reference it, but since I don't know what other HTML or CSS may be being applied to the tag I may be wrong about that.
Hope that helps!
The link pjrebsch gave pretty much worked. For whatever reason, I also had to add a margin-top value. The code is now:
HTML (added rotate class):
<img class="rotate" src="/images/NFNOscarsDonut.jpg" height="400" width="600"/>
CSS:
.rotate {
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
margin-top: 88px;
}
I want to change a image when the display is smaller than 400px (for this purpose i cant use the image as background). I thought displaying 1 with display:block and to hide the other with display: none.
My question is if i do it this way, will the browser load both images and hide one of them or will it only load one of them? (display:block).
If the browser load both images i need to find a way to change the src of the image
to avoid loading the image twice (not using normal css mediaqueries) you could use window.matchMedia (JS);
var breakpoint = window.matchMedia( "(min-width: 400px)" )
if (breakpoint.matches) {
// window width is at least 400px
// you load one img
}
else {
// window width is less than 400px
// you load other img
}
ok .. you could check this stackoverflow post, Media queries and background images you must use min-width and mix-width into css and there is a webpage with more information for mediaquery´s assets http://timkadlec.com/2012/04/media-query-asset-downloading-results/
You could also use responsive images for that - new <picture> tag or srcset attribute for classic <img>. It is nicely explained here:
http://responsiveimages.org/
It is still quite new technique and it'ss not supported by all browsers yet (srcset, picture), however there are polyfills (i.e. Picturefill) that simulate it by JavaScript.
I want to have nice images in my HTML that display very nicely on browsers in computers with Retina displays. I'm guessing I just have to have a high resolution image in my img tag. But then the lower resolution browsers will all have to download this bigger file and then downscale it, maybe resulting in a lower quality image than if I downscaled it in a tool like photoshop.
I'm hoping there's something like this I can do:
<img src="/example.png" src-retina="/example-high-res.png"/>
What's the proper way to display 2 different images, 1 for normal displays and 1 for retina displays?
With CSS it's easy
With an image source attribute, there is less of standard way to do it. I've used a JS based approach myself checking window.devicePixelRatio:
<img id="example-img" width="100" height="100"/>
<script>
if (window.devicePixelRatio > 1) {
$('#example-img').src = "/example-high-res.png";
} else {
$('#example-img').src = "/example.png";
}
</script>
But if you can, use CSS and media queries. It's far cleaner.
There are several different approaches out there, and they have upsides and downsides. Apple themselves actually serve both retina and standard images to retina devices, which works but obviously results in pretty heavy downloads.
If you want something that's semi-automated, try Retina.js. From the description:
When your users load a page, retina.js checks each image on the page
to see if there is a high-resolution version of that image on your
server. If a high-resolution variant exists, the script will swap in
that image in-place.
The script assumes you use Apple's prescribed high-resolution modifier
(#2x) to denote high-resolution image variants on your server.
You need to make two (or possibly more) CSS files and use them depending on the user's browser settings with the help of JS. The css file for mobile site should make a new layout that is fully visible in a mobile phone.
Check out this SO Question to make a better understanding of the topic.
Use the responsive design principles for scaling up or down the image size depending on the device screen resolution.
In CSS you may define the max-width and max-height of the target device. This is how you declare it in CSS:
#media only and (max-device-width:1024px) and (orientation:portrait)
After that you have to specify the element width and height in percentage, relative to the parent element. This is the working method, however not the best one in terms of bandwidth consumption on mobile devices, because even if we set the percentage lower, the image is uploaded in it's native size and the downscale is done after the browser parsed the CSS document.
There are some proposals from W3C on terms how should the image been handled by different devices, but none of them are commonly accepted and standardized.
One of the most well received proposal is the new <image> and <source> tags, which accept different image source and depending the screen resolution use the most opportune image dimension.
<picture alt="">
<!-- low-res, default -->
<source src="small.jpg">
<!-- med-res -->
<source src="medium.jpg" media="(min-width: 400px)">
<!-- high-res -->
<source src="large.jpg" media="(min-width: 800px)">
<!-- Fallback content -->
<img src="small.jpg" alt="description of image">
</picture>
There is a polyfill which mimic the proposed picture element: https://github.com/scottjehl/picturefill
Here are two thoroughly explained article about the concept:
http://nicolasgallagher.com/responsive-images-using-css3/
http://css-tricks.com/on-responsive-images/
You could use a div with css background definition that specifies the image. Using css media-queries you could pick the right css definition when the client is a Apple device with a 'retina-display'.
You can do it with jQuery:
HTML:
<img src="/example.png" src-retina="/example-high-res.png"/>
Javascript:
if (window.devicePixelRatio > 1) {
$('img').each(function() {
var src_retina = $(this).attr("src-retina");
$(this).attr("src", src_retina);
});
}
This demo shows the way it works: http://jsfiddle.net/TLz7S/.
Note: I may be detecting the retina display wrong; I don't actually have one. If someone finds that incorrect, please let me know.
Okay so I have been trying to style my users Gravatar image. The problem is, the image becomes so blurry when I try to enlarge it even when the photo I uploaded on the test account is really at high res. I have seen gravatars on other sites that are about H:200px W:200px and the resolution of the photo is perfect. Now I think I may have tried to resize the photo in the incorrect way
<img class="img-circle" height="200px" width="200px" src="<?php echo $profile->get_gravatar($profile->getField('email'), false, 54); ?>"/>
I added the height and the width right after the img class="img-circle" which I believe is probably incorrect? Here is also images of what it looks like, and what it should look like.
Correct (coming from photoshop)
Incorrect and blurry ( live from site).
Notice the server distortion.
I guess what I need is to tell the CSS to pull the original size of the photo from Gravatar and display it at its regular resolution because just adding the width and size directly to the tag will just blow it up on the site. Any ideas on how to fix this?
When you get the Gravatar image URL, you tell the server what resolution to fetch. Right now you are asking for a 54x54 pixel image:
<?php echo $profile->get_gravatar($profile->getField('email'), false, 54); ?>
Change that last number to 200 (to match the size you want to display) and you should be fine.