What is the reason for the granularity of images in HTML documents?
I have scanned some documents and created corresponding JPEG images with the following properties:
image size: 2452 x 3508 pixels
resolution: 300x300 ppi
JPEG, RGB
and included them into an HTML document with: <img src="image.jpg" height="100%" />
I have opened the web page on a big monitor and on a notebook.
In both cases the quality of the images is very bad. They are too granular so that the text is difficult to read. Although if you open them in the standard Windows image viewer you can see every small detail.
How to include an image into an HTML document without losing the quality?
You are scanning an image at print quality and displaying it on a screen that usually cannot handle more than 96 DPI at max.
Re-scan the image using a lower DPI setting and don't try to display an 8 Megapixel image in a browser window.
This may seem counter-intuitive to what you wish to accomplish, but its not. You will never get a scanned image to display on a computer screen as if it where print quality. (Until we all have retina quality displays for monitors)
Try removing height="100%" from image tag.
<img src="image.jpg" />
Related
For a PNG image 1920x1080, which is better in quality?
<img src="the-png-image.png" width="640">
Using app (e.g. windows photos) to resize it to width 640.
<img src="the-resized-png-image.png">
Which is better in quality in Human's eyes?
Will png images resized using app lose quality?
Try it out and see if you can tell a difference.
If the image has a lot of details, you should be able to tell "the-resized-png-image.png" would look worse than the original. Now, this is assuming my past experience with chrome, the quality may vary from browser to browser due to differences in the way they downscale images.
There is also a possibility of browsers changing the way they downscale images in updates, so it may also vary with browser versions.
Here are other questions that are consistent with my findings:
Why does image lose quality when resized on the source but does not when resized using html
Make Firefox image scaling down similar to the results in Chrome or IE
Blurry downscaled images in Chrome
Has image downscaling improved in Safari 6 and 7? (5 used to be slightly blurred)
Doing your own downscaling:
HTML5 Canvas Resize (Downscale) Image High Quality?
So, to answer your question: Depends on the browser/app.
I've decided to change my site to use srcset for the images to account for low dpi screens. My site is images heavy, and the default 400x400 thumbnails look very nice on a hidpi screen. On a lodpi screen they're an overkill as the actual size of displayed image is 165x165. After the changes my img elements look more or less like this:
<img class="img-rounded img-responsive"
src="/photos/tiny/gcu-01015.jpg"
srcset="/photos/tiny/gcu-01015.jpg 170w, /photos/thumb/gcu-01015.jpg 400w">
/tiny/ images are 170x170 and /thumb/ ones are 400x400. Sure enough, loading a page with these on a hidpi screens gives me 400x400 version. That shows the browser sees srcset and acts accordingly. I pull up the developer tools in Firefox, enable "Responsive Design Mode, change the "screen" size to 300x700 with device pixel ratio of 1.0 and reload the page. It still uses the/thumb/` version, even though the images on the page are now 120x120, and with dpr of 1.0 there's no point in pulling down 400x400 images.
Here's the page in question.
I've fiddled a bit with it but I couldn't find a good answer for the selection of the images. I'm pretty sure I'm missing something here :|
I'm building my own portfolio from scratch. There are a lot of high-quality images that I want to include but I don't know how to do it without slowing down the site or sacrificing too much image resolution.
I created my wireframes in Figma but when I exported the images, the quality got reduced significantly. If I export them 2x or 3x, the resolution gets better but then it's a tradeoff with speed. I'm pretty new to front-end, trying to code my own website as a way to learn to code so please help. My questions are:
What is a good practice to optimize images for the web?
How to know if your image is too big? What is the typical size of an optimized image?
What are some tips/tricks/resources that I can further look into?
Thanks a bunch 🤓
Take a look into lazy loading images, it loads in a lower quality version at the start and then uses JavaScript to show the full quality when the user reaches that point of your website.
Here is some reference from google going into more depth :
https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/
There are a few things you can do with high quality images:
Lazy Loading: using JavaScript the images loads once the user scrolls into view to that part of your website. The benefit is it doesn't load resources that aren't needed, meaning quicker load times and more efficient page loading.
More about it here: https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/
Progressive Loading (like how Medium does it):
You load in a really low-quality image and then progressively load in higher versions of that image over time. This has the benefit of showing the user something will show here eventually.
More about it here:
https://jmperezperez.com/medium-image-progressive-loading-placeholder/
Alternatively file formats:
Consider using alternatively file formats like WebP. Although be careful with browser support, but you can set a fallback of JPEG or PNG
More about it here:
https://developers.google.com/speed/webp/
Other things to note:
Good/standard practice is make sure to compress your images. If it is on the web then 72 DPI resolution (not like 300 for print), RGB colour format and make sure to use the right file format such as PNG for icons or transparent backgrounds and JPEG for more detailed pictures. Where possible use SVG over PNG and JPEG for vector based graphics.
In terms of sizing a common mistake is people put in a 4000 x 4000 size image into say a 600 x 600 image frame so make sure your images aren't overly sized for that space.
Currently, Google recommends that the photo should be about 200kb so I know that this is really not enough :) I am also involved in photography. I have have a website prepared so that it is indexed and has even 80 pictures per page and the site is very fast. At https://developers.google.com/speed/pagespeed/insights/ it's 100/100 and it's indexed by google;) I use several sizes of the same image depending on the screen width as well.
I'm using IntersectionObserver with which I only load those pictures that are visible on the screen for this page to work very fast.
Below is an example of how one photo looks for different screen widths.
<picture>
<source data-srcset="./images/lwow/576/IMG_0114.jpg" media="(max-width: 576px)">
<source data-srcset="./images/lwow/768/IMG_0114.jpg" media="(max-width: 768px)">
<source data-srcset="./images/lwow/992/IMG_0114.jpg" media="(max-width: 992px)">
<source data-srcset="./images/lwow/1200/IMG_0114.jpg" media="(max-width: 1200px)">
<img data-src="./images/lwow/1200/IMG_0114.jpg">
<noscript><img src="./images/lwow/1200/IMG_0114.jpg"></noscript>
</picture>
Here is the link to the whole code https://github.com/tomik23/photoBlog
PS. A very important photo exported from photoshop is optimized using https://tinyjpg.com/
Unfortunately, photoshop is not suitable for photo optimization.
For my needs, I prepared a biblical to generate several photos at once in different resolutions and format and is called sharp-images on my githab
I have been reading up on srcset and responsive images the last few days and experimented with it, I'm not quite sure I understand how a image is chosen.
I'm running on a 2160x1440 monitor, with a css pixel ratio of 1.5. Given the following example I was expecting the browser to display image_1.5x.jpg.
<img src="image.jpg" srcset="image_1.5x.jpg 1.5x, image_2x.jpg 2x">
But I always get the one with highest pixel ratio (2x in this case). If I would enter 30x, that image would be served. Isn't the one that matches my monitors pixel ratio the most appropriate one?
If I emulate a slow network connection the default image.jpg gets served.
I'm running Chrome, and I realize that depending on what browser is running, different results may occur.
I'm designing a website using Bootstrap framework 2.0.1.
But I'm having one issue with the image logo I used on my website. The logo image looks fine on PC and laptops but when I see this logo image on devices like iPhone and iPad it loses it's quality, the image logo looks blur and stretched.
So my question to you is how should I overcome this issue?
Do I need to create three different copies of same logo image with different dimensions and use them respectively for laptop/PC, iPhone and iPad? If yes how?
If there is any other better solution for this problem please let me know.
Thanks in advance.
One option regarding different image copies based on resolution, would be the srcset attribute. It specifies sources for an image based on the pixel density of the user’s display.
For example:
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w">
"In the simple example above, all we're doing is telling the browser about some images that we have available and what size they are. The browser then does all the work figuring out which one will be best."
Read more here.
have you considered converting the image to an SVG?
because it uses vectors rather than pixel data it won't distort regardless how far it gets stretched/squashed.
and i believe it's cross-browser compatible back to ie8
http://caniuse.com/#feat=svg
you can download inkscape for free (or use illustrator if you have it) and try converting the image to SVG to try it out