I am making a responsive web page using the Bootstrap 3 framework. I have an image that I want to use as a logo on the page.
I started off saving the full size (788 x 1098) image as a PNG. My custom CSS makes sure the image has a max-width of 280px and of course Bootstrap's CSS will scale down the image appropriately for the device. When I viewed my responsive web page on my desktop PC it looked ok even though it had been scaled down to 197 x 280. However when I viewed it on my mobile the image looked blurry and wasn't good at all.
So then I heard about SVG images and thought I'd give it a go. I downloaded Inkscape for Mac, opened the full size PNG in Inkscape and re-saved as a SVG image. Unexpectedly the SVG image looks good when I view my web page on my mobile phone but looks blurry and bad when viewed on my desktop PC.
Why is this? I thought the whole point of SVG images was that they can be scaled without loss or blurriness?
I've made a CodePen to help demonstrate: http://codepen.io/theclarkofben/pen/WvdKgM
<p>SVG 20%</p>
<img src="http://www.clarkben.com/img/cv.svg" alt="a" style="height: 20%; width: 20%;"/>
<p>SVG 100%</p>
<img src="http://www.clarkben.com/img/cv.svg" alt="a" />
Your "SVG" is just SVG containing single raster (PNG) image, so nothing really scalable; see <image … in view-source:http://www.clarkben.com/img/cv.svg.
You can control rendering of such raster a bit with CSS (either using image-rendering or forcing GPU to handle that via some transform, but result woudn't be perfect either. Anyway, even it this was vector image, rendering A4 into cca 300 screen pixels wide box would not be "readable" as well, in my oppinion.
It looks like the image is still just a PNG image; it's just masquerading as an SVG because you gave it that extension without actually converting it to SVG. You can't really convert a PNG to an SVG by just opening it in inkscape and saving the image as SVG -- you need to either recreate the image from scratch as an SVG or look up how to turn a raster image into an svg image.
Related
I am going through my image files and replacing them with svg, from png. The problem is that now, when I scale up or zoom in on mobile for example, the images look worse than they did with png.
As I understand, SVG is scalable vector graphics, so you should be able to scale them as big as you like without distortion.
Well, the images have been converted from png to svg so should, in theory, look better, mostly when scaled up.
You can see an example here of png background image at https://adsler.co.uk/jobs and svg here https://adsler.co.uk/dating/
You will see that in jobs (png) the image scales quite high before distortion but in dating (svg) it zooms only a bit before it distorts, whereas it should be the other way around.
So what am I doing wrong and how to fix please? Basically I just want crystal clear images across my site.
On further further inspection, in Chrome this is most definitely the case, but in Firefox, on mobile, it scales quite high before distortion.
Two points then come up.
Why is it distorting at all? It should be infinitely scalable.
When I zoom in on an svg in Firefox, does any distortion occur simply because my mobile phone reaches the peak of its display capacity?
The problem you're running into is that while this image is technically an SVG, the fact that it started as a PNG and was converted has left it as a png image wrapper in an svg, rather than a true vector.
If you open it up in a text editor you can see that the whole content inside the <svg> wrapper is an image attribute <image id="image0" width="2160" height="3840" x="0" y="0" xlink:href="... etc.
What this means is that it will essentially behave in the same way as a raster image rather than a vector graphic.
I'd advise trying to recreate the graphic as a vector using something like Illustrator, Sketch or Inkscape. Do you have the image saved in anything other than a png format?
is there any css property that help in fixing how chrome handles the image?
I designed a logo for my website in adobe illustrator and when i uploaded to my website. it loads nicely on IE but very low resolution on chrome. the more i increase the dimension of the image on adobe illustrator (and re-scale it with css) the more the image becomes low resolution, blurry and details not clear.
otherwise, chrome on phone and other web browsers work fine.
https://drive.google.com/open?id=0BwjYDGIA089Td2xBdDE0b0h4ems
Thank you !
Probably the best solution is to use a SVG as Logo because its vector base and endless scale able. Here is a tutorial.
https://css-tricks.com/using-svg/
Also you can use a svg as bg-img in css like:
background-image:url(logo.svg);
and style it
I want all images for a mobile site to be 640px wide, based on iPhone screen size.
All images should be the full width of the screen when shown img { width: 100%; height: auto; }.
For the images that are smaller than 640px wide, is it better to use the above CSS to scale them up, or should I use Photoshop or something to scale the actual image up? Does it even make a difference?
So does scaling up an image using CSS result in a better or worse image quality than using something like Photoshop to increase the size?
Scaling images up doesn't go well for the quality of said images, you need to sort out your priorities on this one. You can work on those images and increase the quality and size of those images in Photoshop so you don't lose any quality when resizing, but this will increase page loads or you could lose some quality, but improve page loads with smaller but more crappy images.
If you really want to target each device (computer vs mobile) perfectly you can use javascript to switch out the images. This can be done really easily using http://foundation.zurb.com/docs/components/interchange.html or similar libraries.
If the images are graphics or icons I might suggest just making them svgs and using those instead as they are crisp at a greater range of resolutions. If you go with this option its best to make their sizes multiples of two.
I have an 40px by 20px image with 72 Pixels / Inch.
I would like to create a Retina display version.
What should I do? Double the size? Change the resolution?
And in which format should I save it? PNG? JPG? ...
I am using this image on a web site ...
In your image editor, double the size of your image to 80px by 40px.
In your markup set the width to 40 and height to 20.
<img src="example.png" width="40" height="20" />
You should save as png if you need transparency or the image is line art. Save photographs as jpg.
My answer is convert your image into SVG
Do you have Illustrator? If so save your image as SVG (and have a png as a fallback if you want).
<img src="images/logo.svg" alt="" />
<img src="images/logo.png" alt="" />
As long as you use Modernzr which can work to get svg friendly in most browsers.
You can see it here how it's done:
http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/
Hope it helps :)
A retina display image (or high-density display image) is double the pixel size of a standard image - its scaling factor is 2.0. This means that yes, for your 40x20 pixel image, you will need to make an 80x40 pixel version (that is then displayed at double pixel density on screen). The format doesn't matter as much, both PNG and JPG will work fine (PNG will not degrade in quality with compression, but the file size will be larger than JPG).
However, the problem with high-density display images is that they take up more bandwidth, and are unnecessary for devices that don't have the high resolution or Retina displays. This means more data transferred over the network, inconveniencing mobile users and those with limited data transfer caps.
One solution is to use something like Retina.js. It's an open-source javascript client script that will automatically load the retina-sized image from your server and swap it in-place for the low-density version, if it exists. It follows Apple's standard for naming high-resolution images - #2x, so you can have HTML code like this:
<img src="/images/my_image.jpg" />
and the script will search your server also for /images/my_image#2x.jpg. If it exists, it will load it and swap it in-place without having to worry about messing with CSS.
Generally as of this writing there are two types of retina displays, hence you should create an image for each type.
For a 2× device, you would need to produce twice the logical pixels' width and height with a resolution of 144 pixels per inch (72 ppi ✕ 2).
For a 3× device, you would need three times the logical pixels with a resolution of 216 pixels per inch (72 ppi ✕ 3).
Examples of 2× devices are the MacBook Pro (released in 2012-2019) and most iPhone since the iPhone 4. Examples of 3×
devices are the iPhone 6 Plus, and the iPhone X. However the iPhone Xr is a 2× device.
Hence for your case you would need images in 80 px ✕ 40 px and 120 px ✕ 60 px for 2× and 3× devices respectively.
Retina displays are not dependent on the specific bitmap image format. You can use the original image format. For websites, you should use JPG for photographs and PNG for line-art graphics saved as bitmaps.
You should not just blindly enlarge images otherwise this would create a blurred results – it would no better than if you don't include any high-resolution versions in the first place. Either obtain the original higher-resolution version of the images (typically from vector graphic source) and downscale them or use a machine-learning based image enhancement solution such as Bigger Picture to "convert" your image into a higher resolution.
Photoshop gives you a couple options for resizing an image. For instance if the image is iPhone size you can increase the image size by 200%. Photoshop gives you a couple options for resampling of the image. Bicubic, bilinear and etc. This will remake the image at a higher resolution and interpolate the missing pixels. Hope this helps.
This is a really interesting article showing a nice option for dealing with high res images:
http://blog.netvlies.nl/design-interactie/retina-revolution/
Basically, it's saying that, if you make the image quite large (width and height) but then save it at quite low quality, it still comes out very sharp on retina displays. It means that you can use the one same image on all devices, and that the file size is very low, too, which is an extra bonus. You can set the width and height of the image in your CSS and/or HTML to set it to the visual dimensions you desire.
This article blew me away, and is my go-to approach for dealing with both retina-friendly and bandwidth-friendly images. Win, win.
You can use CSS opacity option.
This will give you an transparent look of your image based upon the value you set to opacity.
Try learning opacity: http://www.w3schools.com/css/css_image_transparency.asp
I have an image that I use many times. In several cases I want to shrink its size, but obviously it loses sharpness when I do this in HTML.
Is there a way to fix this? The image is located elsewhere and I can’t save it locally.
Thanks
As dheerosaur states, SVG graphics can be used when you need to have the same image in multiple sizes but don't want to compromise quality.
Another thing to do is use an online service, such as Resize.co. You pass them the URL for your image file, the attributes and they take care of everything else.
You cannot control the way the browser renders images when they are resized. Images will look better when being passed through Photoshop's filters (or those in another tool) upon resize.
There is three way that I know to reduce an image file size in bytes :
Convert the file into a format using lossy compression algorithm such as JPG. Obviously the image will lose sharpness
Convert the file into a format using lossless compression algorithm, like PNG. Only works if the image contains lots of region with flat colors
Resize/resample the image using Photoshop or GIMP. If the new image dimension (width x height) is exactly the same as the displayed image's dimension in HTML, then web users will still see a sharp image
Firefox and Internet Explorer actually do have CSS properties that adjust the way images are rendered when resized via HTML attributes or CSS properties:
Firefox: image-rendering
Internet Explorer: -ms-interpolation-mode
These won’t work in other browsers, and may not work great in all (or any) versions of IE and Firefox.
But it might be worth experimenting with them as a fallback in case resizer.co causes any issues.