i am currently facing full screen images blurry issue, no matter what size i changed for my background image (tried 1800px, 1600px), it came out same blurry issue. Been searching google but still cant find result. hope someone can solve. thx
For your info, i'm using "save for web" in photoshop. My web is (http://maxgohblog.blogspot.com/)
If you wan't the images to appear in better quality you have to take a higher resolution. Basicly your image was blewn up from 800px width to 1400px, if you inspect it in your Developer Tools. It's lika a bowl of 800 beans but you need 1400 of them to be full.
Related
Left side image is Desktop screenshot and the right side image is Mobile screenshot. See the right side screenshot, image icons showing blurry. Can you please tell me what's the solution for it?
Please note, I have also tried the following solution. But, don't working.
background image looks terrible on mobile
Please use an image with high resolution and quality.
The image you are using is ~ 10kb ...use image bigger image for this, you have to save your image with high dpi .
For mare details please refer this https://en.wikipedia.org/wiki/Dots_per_inch
Our developer has disappeared off the face of the planet and when our web server updated it's PHP version, formerly square images have cropped to landscape.
https://www.weareabsoluteuk.com/retail/
The section in question is the portfolio (screenshot attached) these were previously square but not display landscape despite the featured images still being a 1:1 ratio.
I'm familiar with Divi but this seems to be a custom built slider the developer has made and I'm just trying to figure out how I can make these images display as square again as we've sent countless requests to our developer to no avail
enter image description here
Would really appreciate a point in the right direction as I can get the containers to the size they should be but the image never fills them
Thanks
.et_pb_row
for this class max-width: 1080px is there, so it is restricting the images to look like rectangle instead of square, and your images are not square
your images are of resolution 400 x 284, so it wont look like square. You can try images as background images in order to appear them as square.
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've built a mobile site using a CSS sprite for some of the icons etc but the images look really pixelated and jagged in the Blackberry Bold 9700's browser. Fine on a couple of other BB devices and everything else we've tested.
The sprite images also appear to be smaller so not sure if it's a scaling issue with the browser. The inline images look fine but also smaller than on other devices.
Device details:
Bold 9700 - 6.0 Bundle 2049
Has anyone else encountered this?
After a lot of searching around I found the cause, image compression. I always run images through the ImageOptim app and it looks like this caused the extremely low resolution just on this handset. Exported the CSS sprite without compression and now it looks fine.
EDIT:
I thought compression was the problem but it's actually the dimensions of the image sprite! It was one long image, about 1400px high, and the Blackberry seems to automatically reduce the quality of large images, leading to all the problems.
Fixed it by simply separating the sprite in to 2 files about 600px high.
I've got a site which although not responsive, should just show a scaled version of the desktop site when viewed on iphone or ipad. The problem is that my main background image is being compressed for some reason. If I resize the browser I can't recreate this issue, so am just struggling to figure out what's going on iOS which is causing it. The site is - any help would be greatly appreciated!
Added info: the issue seems to be with div.bg-main and it's background image settings, set on line 243 of style.css
iOS has a 2 megapixel limit on background images. Your image is 1587*1340 = 2,126,580 pixels - a bit too much. It therefore shrinks it.
You can use the background-size property to fix the size back up to what you’re expecting. You’ll lose some detail but it’ll be the correct size. Add this to your CSS:
.bg-main { -webkit-background-size: 1587px 1340px }
You can chop your big image with 2 parts and add 2 backgrounds to a div.
Like this:
background: url(1.jpg) top center, url(2.jpg) bottom center
That image is huge, maybe that is the issue. Try reducing the size with 'save for web' (try getting the design to work with a .jpg).