I've an issue with blurry video thumbnails with a shopify theme (Flex from Out of the Sandbox). The image in the middle is a blurry video thumbnail, whereas the top and bottom one are regular sharp product images. Link to sample product.
I tested the content within different environments:
The video itself is sharp, which is visible when it's being streamed
-> video is not the issue
The video thumbnail is sharp on another theme (Debut from Shopify)
-> Shopify CDN is not the issue, must be the theme I am using
I also uploaded a cover jpeg within Shopify admin which didn't change anything.
I couldn't identify the problem by inspecting with the browser dev tools. Can somebody give me a hint how to fix this?
In your liquid code the image URL filter is set to '300x300' (see below image)
You may just remove this or set it to 1024x1024 for better image.
Hope this info will help you.
Best of luck
Related
I have a website where I also run a blog at http://climatecanchange.com/blog/ and the blogs are stored in a mysql database and each is matched to a unique image in one folder. I use php to get the image filename and other data to display all the blogs on my page.
For blog #2, my image is not showing on any iOS device (Chrome and Safari) though it can be seen on computers and Google Pixel too.
The link is http://climatecanchange.com/blog/blogs.php?id=2. When I open the image in a new tab it just shows white space. But, when I try to save it (on Chrome), it saves the actual image to my camera roll.
Can someone please help me with this? Why is there a problem with displaying that specific image?
The image format is Web/P which appears not to be supported in Safari right now
https://caniuse.com/#feat=webp
Youtube, Amazon, and a few other sites have a full bookmark image showing for their website. Mine is only showing my .ico. How do I code in a custom image for my blog? Is there meta tag for it? Thanks.
Edit:
Here is a screenshot of http://iconhandbook.co.uk/ in "Top Sites" in Firefox mobile:
Here is the same websites icon file:
http://iconhandbook.co.uk/favicon.ico
Take the time to look at their source code for their other icons.
So again my question: How do I get the same result as this website?
You can use the following extension to customize the image shown for pinned tiles, among other things.
https://addons.mozilla.org/firefox/addon/new-tab-tools/
I've just researched your question and there's result:
No, you can't add your custom bookmark icon. It's only available for big companies now.
There's no meta-tag for it. But you can try to do these things:
Change og:image of your blog. Possible it can help you with Chrome as described here
Add more apple-icon resolutions and android | wp icons
Fill your favicon by bg-color. I've tested some sites on Firefox iOS and found that's one, who has single-tone background and looks like you want.
I hope it helps you
I am trying to display a 42000x280 2.46mb image that will not display in Firefox, but it works in Chrome + IE. The image can be found at http://tpupower.net/tron2.gif
The image is made from an animated gif and I saved it with PHP's imagegif(). Could this be a color profile error? How would I check that?
The image won't open in Photoshop either, I don't know if its because of the dimensions or what. The error it gives is below.
"Could not complete your request because of a problem with the file-format interface."
It is a fact that firefox and photoshop can't open it,you should use GIMP(GNU manipulation program) and scale image..GIMP is free and open source image manipulator.you can scale or decrease quality of image.I am sure it will open in GIMP.
you can download and get more info. from link:
http://www.gimp.com/
hope this will be helpful.
If you look at this page, you will see that the right two images are sideways:
http://www.disneypinplace.com/beta/pin.php?id=PD78685
But when you click on them, they appear correctly in full screen view, vertically. I can't see anything wrong in my HTML img code that could cause this.
Can anyone tell me why this is happening? These photos were taken with an iPhone 5 by the way.
This is a particular problem with how the iPhone exports images. Seem this link for a similar situation.
Computers/browsers and iPhone software interpret the camera metadata (details about image, including portrait/landscape) differently thus causing the difference in rendering.
I was able to download the far right image in Pixelmator/Photoshop and save it as a jpg again, making sure it was portrait. This made it so the browser properly rendered the image and did not rotate it 90 degrees.
Were these pictures taken sideways, by any chance? Have you tried editing and "exporting for web" from Photoshop, for example?
Maybe the problem is on the image EXIF (as in you only see the image correctly because the browser reads the EXIF info and rotate it on screen). Exporting it will most likely remove that info from the image file and it might make it correct.
I spent an hour with this that I'll never get back. :)
The Problem
I took the picture on my Samsung GALAXY Tab PRO 8.4. It rendered SIDEWAYS in an Android Emulator as well as in FireFox 42.0.
The Fix
I edited the picture in IrfanView.
I went to Properties_Settings -> JPG_PCD_GIF ->
UNCHECK "Auto-rotate Image according to EXIF info (if available)"
It now renders OK in FireFox. I haven't checked the emulator yet.
I've built a website for someone, but according to him, scrolling is very very choppy on the website in IE7 on his computer. On my computer I don't have any problems with scrolling (in any browser), i've already tried some things, but according to him scrolling still is very choppy. So I was wondering if someone has some suggestions for me? I think the main problem is the full width background image, but i'm not entirely sure.
The website is:
www.casalagodilugano.nl
The website is in dutch, but for this question that doesn't have to matter
edit:
Tx for the helpful answers. In the end, it was indeed the background image which caused problems in IE7. By accident I found a way to work around this problem: I set the image as the background image, centered the image, and using css3 I made sure the was stretched the way it should.
I had a problem similar to this. It turned out to be because my computer was full and my performance suffered. Viewing the issue on my new machine (also had IE7) produced no choppy scrolling. I fear your client has the same problem, perhaps suggest it's his computer and not your website?
Edit:
Many things affect the processing on a website, I'd suggest it has to do with your background image. The sand has quite a "repeatable" texture so perhaps you should Photoshop it down so it's a much smaller image and just use 'background-repeat' in your CSS to achieve a similar effect. Your background image is also around 200% of what it displays on the website, I copied the URL of the image and viewed it by itself and it's HUGE! The emphasis here is on image file size, because IE is having trouble shifting the image down when you scroll. It's not a very good browser to be fair. I've also noticed that your large header image is larger in actual size, suggesting that the size is reduced by your code. Try reducing this image size to the size you want to display it
Edit pt 2
I've stumbled upon a script that for some reason waits 5 seconds before running and that is the Google maps API. I respect that you need this for the Routes page but if I were you, on any page where there is no map, remove any mention of the google maps api from the source code.
I have found that IE gets choppy when you have an <input> tag without a border or background specified ... very strange IE "bug" but i've fixed choppy scrolling on sites/pages by just adding a border to the <input> tags.