Having some issues on my Wordpress installation.
I'm noticing that on some monitors faint/semi-opaque boxes are appearing in my JPG images.
I didn't notice this until I was viewing my website on a friend's computer.
They aren't appearing on the original images, just when they are uploaded to my server and WP displays them.
I am about to add a filter changing the jpeg compression quality to 100%, rather than 90%, but before I go and re-upload all of my images, have any of you guys experienced this?
Thanks!
Do you mean a box like a border around the image, or an overlay on top of the image? Also is it appearing only on the webpage, or also when you look at the images on the server?
It sounds like a response sensitivity problem in the monitors. Is it any particular brand of monitor?
Other things could contribute to the problem.
Your images may subsample the Cb and Cr components and your JPEG decoder may not be evening out the subsampled components. get a JPEG dumping program and see if the sampling rates are higher for Y than Cb and Cr.
You image may be over-quantized (quality).
Related
I'd like to know how to increase the page upload time by compressing the images on my site, including the exit pop up gif?
Loading time is about 5 seconds.
It was built by WP.
How to fix this issue?
Please, tell me the way.
Thanks.
Your image files are likely too large. This is probably because your images have a very high resolution and/or are too large.
If you only need an image to be, say 400 x 500 pixels and your actual image is 1600 x 2000 pixels, you have an unnecessarily large image that will slow down your load time. You can reduce image size right in WordPress using their image editor.
You can also use tools like Photoshop to compress images so that they are smaller files and more web-friendly. Use Photoshop's "save for web" feature and reduce the image quality.
More detailed answers here.
I'm really confused with this one as it seems impossible to do.
When running my site through GTMetrix I pass great but with Google page speed insights it's insisting my images can be optimized more for instance:
Compressing and resizing mysite.com/…ets/img/homepage/my_image.jpg could save 78.5KiB (94% reduction).
The image in question is 65KiB so how Google thinks I can shave another 78.5 off it I don't know.
I'm using jquery unveil and using the retina function on it too could that be the problem?
Also I've tried downloading the images Google provides as their compressed version but these images have had their dimensions changed so would look terrible if I put them at their intended size.
Really confused, any help would be appreciated.
Thanks
There are few things you need to distinguish before proceeding with optimizing images for Google Page Speed.
Images are optimized for different platforms (Desktop and Mobile)
Images are optimized for physical size.
Reports for images can be "Compressing and resizing" and "Compressing" only. Compressing means u need to do a compression part, on other hand compressing and resizing means you need to use appropriately sized image for appropriate platform.
Depending on the report you are looking at (desktop or mobile), your item "Compressing and resizing mysite.com/…ets/img/homepage/my_image.jpg could save 78.5KiB (94% reduction)." needs to be less in dimensions and compressed or just less in dimensions. Margin for resizing an image with CSS is around 20% so if you got 100x100px image you can resize it to around 120x120px with CSS without getting report on that item (that is if you also optimized it physically also). To check this in Chrome, inspect image and check "Natural" size in element selector.
You can deal with this on few ways:
Media Query (note that you have to use background image in this case)
Srssets
JS
Depending on the image compression package that you use, you might get different compression results. I've noticed that sometimes Google's Page Speed is able to optimise an image further than I have been able to (and other times not!)
Do you have a live URL for your web page? Or even the image? It helps to be able to see it live and compare!
I have a lot of images with a resolution around 500x1500 and I want to show all those images in a grid on my website. Each picture in the grid should be 200x200px.
If I scale down the images with CSS from 500x1500px to 200x200px and I show 10 200x200px images on my website, does this mean that the visitor first have to download the 500x1500px images and then their browser scales the pictures down?
If that is the case, then it's a bad solution to do it like this, right? Instead I should have two versions of each picture, one 500x1500px version and one 200x200px version. Am I right?
The question then is what's the easiest way to scale down hundreds of images?
Yes, I think it is the case that the browser will download the larger image and then scale it. You can check for yourself by opening the dev tools on the browser (press F12 if you're using Chrome) and monitoring the network traffic when you reload your site.
The easiest way to scale down hundreds of images is find or write a program to do it.
You are right. You can set height and width of the images but 1) the user will have to download a bigger image than necessary and 2) the height x width ratio will be trouble (the big one is 1x3 and the small one is 1x1). I would either use http://www.imagemagick.org/ , gimp or a similar tool to crop the images, but the problem is that the cropped area might not be very good. Only a human can select a good fit for the cropped area :-(
Edit1: Perhaps a well-trained neural network could select the most "interesting" part of every image programatically but that's kind of a lot of trouble to do that. Still it could be pretty interesting :-)
I'm having an extremely strange issue with an HTML that has 3 videos on it. I'm using videojs for the videos, and all videos have been converted to three different formats to ensure cross-browser compat.
Having said that, when the videos are played, strange black lines appear on the bottom, or on the right of the videos (This even changes across browsers!!).
I have absolutely no clue where this lines come from, as they don't appear on CSS at all.
Here's the link to show you what I'm talking about:
http://tomascamusso.com/helpme
PS: In case it has become a part of the video itself, is there any common software to edit these videos?
Thanks!
The line is in the background image which the video is overlayed on.
http://tomascamusso.com/helpme/img/hang_on_to_your_assets.png
Now I see the image is hidden when the video is played (display: none;). However it does look like the end of the video the still image from the feed was using the same background image.. worth looking into.
- here is a screenshot.
I've set on imagecache a fixed scale for my images (230 x 150).
Upscaling option is unchecked.
Successively, I've uploaded new images (original size 230 x 150) but for some reason they are resized: 80 x 52
Instead, if I check the "Allow upscaling" option, the size is correct, but the quality is very bad.
So basically, it behaves like if my images are very small, but my original images have the correct size.
thanks
The effect of the 'allow upscaling' option hints on the problem not being caused by imagecache itself, but rather that some other setting/module is downscaling the images already before imagecache is doing its thing. You could try to verify this by checking the image sizes of the originally uploaded images (usually in 'files/images' or somewhere else outside of 'files/imagecache').
What mechanism/module do you use to upload the images? (There might be a scaling setting somewhere in that context.)