Hello, my name is Anna. I use Sparkle to create a web site and I have the following problem.
I have uploaded 2 images, one logo image in png format and one jpg image - illustration.
When I preview the website - everything looks fine.
But when I publish it and open on the web - logo image is blurred and instead of the illustration there is another big blurred logo.
I can’t understand why is it so.
Your help and advice will be very appreciated!
Thank you and have a wonderful day ahead!
Regards,
Anna
Hello Anna.
Welcome to Sparkle.
Your problem can have many different reasons. It would be best if you provide a link to the page so we can take a look.
It would be interesting to know if this is visible on all devices, how big the original images are, what layout settings you have made and so on.
Mr. F.
Mr. F., thank you for your reply!
Here is the link: www.tngrn.ru
Regarding the images: png logo is 94 kb, jpg image is 72 dpi in resolution (too small probably?)
It is not visible on all devices.
About layout settings - which particular settings are the most essential? Because I tried many options, but still it doesn’t work.
Thank you!
Best regards,
Anna
Hello Anna.
At first sight it looks like the picture is way too small. Not the file size and not the dpi. It should be at least 500 px wide, rather even bigger.
When Sparkle (or the browser) calculates the image larger it becomes very blurry. Try to find a larger logo.
If you right-click on the blurred image and choose “Open image in a new tab”, you will see the original. Much too small!
Mr. F.
Thank you, Mr. F. Yes, the uploaded images are too small, I can see it, when I “Open image in a new tab”
Actually, they are 4000 px wide, but when I upload them in Sparkle, they become small.
Maybe I do it in a wrong way? I open them in Preview, copy and then just paste to Sparkle.
Maybe there is another, more accurate way?
Thank you!
Best regards,
Anna
Hello.
OK. 4000 px should be enough.
Please paste the image once as described in the documentation.
Mr. F.
The file size or DPI resolution are not useful metrics, the only useful ones are width and height in pixels. Looking at the source suggests your image was 69 pixels wide, which definitely isn’t enough. Try dragging the original image into Sparkle.
Also your site is failing to load fully. It looks like your host has a server side cache, and that might be affecting page loading. Try turning that cache off in the web host control panel, or by contacting them.
Thank you, Mr. F. and Duncan, I’ve tried to upload images by dragging them and by setting as a box background - still it doesn’t work, the site appears the same.
The site is not failing to load fully, I just started it and made the first login page. My host told me there are no server side caches. I really don’t understand why the site fails to load correctly.
Regards,
Anna
Try a imagine with more pixel, it looks like you have a very tiny image for a much larger box, of course it will zoomed if you set it like that and that will look very rough.
Hi @Anna_Egorova,
- caching on your web host
So you can ask them why the server is replying with caching headers:
% curl --head http://www.tngrn.ru
HTTP/1.1 200 OK
Date: Tue, 05 Oct 2021 11:22:19 GMT
Server: Apache/2.2.15 (CentOS)
Last-Modified: Mon, 04 Oct 2021 08:55:36 GMT
ETag: "1e009c7-43c5-5cd831396f0db"
Accept-Ranges: bytes
Content-Length: 17349
Content-Type: text/html; charset=UTF-8
Age: 61
X-Cache: HIT from t0.hoster.ru
X-Cache-Lookup: HIT from t0.hoster.ru:6666
Connection: keep-alive
- site not loading fully
The browser console shows that the javascript file is not found:
This is the symptom of a cache misbehaving. Also the name of the .js file suggests the page was published with a very old version of Sparkle, not with the latest 3.1.4, further indication that the server is returning an older page.
Any other issue can’t be judged because what you are publishing isn’t coming through on the site until the caching issue is resolved.
Actually since the older version of Sparkle used timestamps in filenames it suggests you uploaded recently. Still a cache problem, but please upgrade to Sparkle 3.1.4.