I added .webp image to my codebase and I am using it as background image for a div. For some reason, the image appears as plain black in the rendered website, even though when I preview it in file exploerer, it shows the actual image. Note this is an animated .webp (converted from .mp4).
Also, note that I am using git-lfs for .webp files. And I feel like this issue started cropping up once I started using git-lfs.
I am confused. I use a PNG image on my website. When I display this image without CSS (https://www.smart-rechner.de/assets/pics/rechner/erbschaftsteuer.png), the image appears blurred. The browser shows the image size (670x600) in the title. I use the chrome zoom level 100%. But the picture is displayed larger and is therefore blurred. If I save it as a screenshot with "Print", it becomes an image of 785 x 700 px. I suspect this is due to my screen resolution. Does anyone know this behaviour from Chrome?
I'm using html, css, php and wordpress.
Currently I'm using a background image that is 1.8 mb.
The website loads pretty well (under 2 seconds).
However during the load of the website, the background image is the last thing to load,
and loads in parts.
e.g. you see half of the background image in black and white, then the next half which is the final image.
My question is
How do i make it so the background image loads as a "whole" rather than in sections and in black and white then colour?
also Is the image size too big?
and extra question How do i debug this in chrome dev tools? i.e. how can i see whether or not the image is too big in chrome dev tools.
I tried recording the load in "performance" and the only information i got back, was that it took the image 1.5's out of the 2's to load.
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.
Whan I run a test page in google PageSpeed.
I found a few warnings like for example serve scaled images..
http://man-vimal.net78.net/introduction/?intro/action=main
THe results were as such :
The following images are resized in HTML or CSS. Serving scaled images could save 449.3KiB (99% reduction).
http://man-vimal.net78.net/.../twitter-logo.png is resized in HTML or CSS from 367x367 to 20x20. Serving a scaled image could save 140.9KiB (99% reduction).
http://man-vimal.net78.net/introduction/views/images/fb.png is resized in HTML or CSS from 1,692x1,692 to 20x20. Serving a scaled image could save 115.9KiB (99% reduction).
http://man-vimal.net78.net/.../linkedin.jpg is resized in HTML or CSS from 1,024x768 to 20x20. Serving a scaled image could save 99.6KiB (99% reduction).
http://man-vimal.net78.net/.../panorama.jpg is resized in HTML or CSS from 604x453 to 100x100. Serving a scaled image could save 81KiB (96% reduction).
http://man-vimal.net78.net/.../googleplus.jpg is resized in HTML or CSS from 450x320 to 20x20. Serving a scaled image could save 12KiB (99% reduction).
What is a scaled image and how can I fix this up ??
A scaled image is an image that has been scaled to match the size that it is displayed.
http://man-vimal.net78.net/.../twitter-logo.png is resized in HTML or CSS from 367x367 to 20x20. Serving a scaled image could save 140.9KiB (99% reduction).
This is telling you that the your source image is 367x367 but you are displaying it at 20x20.
It is inefficient because the browser has to download the larger image and then rescale it. The 367x367 image is 140kb larger than a 20x20 image would be.
To fix this, resize the image (in photoshop, preview, etc. ) so that is 20x20 and serve that one instead of the image you are currently serving.
your images are too big. just resize them. you can even use paint to do that. a scaled image is basically a resized image.
The typical situation is that, say you have an image with a width of 400px, but it doesn't fit in your layout, so you go to your style sheet and write:
img {
width: 300px;
}
Here, you've resized the image with CSS. But you're still serving the image at a 400px size and scaling the image down.
The implication here is that, rather than using the 400px image, you should use the image sized the way you need it because the file size will be smaller, and thus the page will load faster.
For example, if a user of a website uploads an image of size 400px x 400px and you use this image as a thumbnail say 40px x 40px using html/css.
The web browser has to download the larger image and compute it to the smaller size. The best way to solve this problem is to make a distinct copy of the image, say 'when the user uploads the image' and then use it directly.
So the web browser does not have to inefficiently scale down the image.
I hope this helps.
A Scaled Image is an image whose size matches exactly with the size defined in CSS or HTML.
If your original image called twitter-logo.png is of lets say 300 x 250 dimension but the dimension defined in the HTML statement is:
<img src="http://man-vimal.net78.net/.../twitter-logo.png" width="600" height="500">
then the browser will first download the original image (which has a dimension of 300 x 250) and will then resize it to match the dimensions defined in the HTML statement. i.e. 600 x 500
This resizing of images in the HTML or CSS slows down the overall page rendering considerably and should be avoided.
To resize images (and to optimize them losslessly) you can use a free software called RIOT (available only for Windows).