I've an original image which is shown here. This is a HD image which is saved as jpg format. jpg is a lossy format which compresses the image when loaded on websites. So I saved the image as .png and tried to view it in my website, but the image was blurred. I even increased dpi of the image in paint.net, but the image was still blurred in my website.
Here is a screen shot of my website:
I want HD image to be shown in website without any blur. How can I do it?
Start with a higher resolution original image
I assume you are working from the similar looking template image, and the smartphone's screen has been added in after? The original image you linked to is only 600x212 pixels which is a very small size to work from (smaller than many mobiles, iphones and tablets). You need to start with a much larger and higher resolution image, and shrink it down as needed. Starting with a smaller image and increase the resolution or dpi cannot increase the quality since no extra details are added - often this just makes images worse.
This image is the same background but slightly larger at 850x300. Any editing like adding the app's image should be done at this larger resolution (it can easily be shrunk later but this will keep the quality as high as possible). Placeit.net sells the 1920x1440 version of the image for only $8 which should be large enough and scale down well.
JPG vs PNG
JPG is designed for photos and doesn't lose much, PNGs can be too large which affects load times, which are very important for mobile users. A high resolution JPG is the best approach examples and explanation. Every separate edit made to a JPG reduces the quality a little, so starting with the largest resolution image and doing a single edit is best. The resizing can be left to the web browser and responsive CSS.
Responsive CSS
This allows you to use the same HTML for both desktops and different sized mobile devices, with minimum changes which are controlled by a separate CSS file. Bootstrap and foundarion are the most population. Effectively you keep the key images at their largest size, then add media queries to the CSS to check size of the mobile device or desktop and adjust sizes accordingly. Images can also have their size specified in relative units, eg percentages. This css-only resizing is fast and efficient.
Google's image optimization guide covers lossy vs lossless, tools for fine tuning, scaling images and more. This points out that lossy/raster image formats are fine for very complex images like photos since human eyesight cannot perceive every detail anyway. What is 'lost' from the image is not normally noticable to the human eye - presuming of course you start with a high quality image.
Other options: progressive jpg and base64
Progressive JPGs appear to load faster than JPGs because they initially load in a way that looks like a lower quality image and then increases in quality, see example. Base64 is mostly used for small images like icons and 'above the fold' images that need to load quickly, although they can be demanding on memory. The image is stored using a very long alphanumeric string embedded in your CSS or webpage code rather than as a separate file. More details here
Frist you must ensure you original picture is clear enough and have high dpi
Second you must notes that nowadays the smartphone screen definition is much higher than common PC, so your picture must have enough definition.
Third, your cellphone browser mustn't have cloud speeding. Some cellphone like Opera may lead to image compression.
At last, I recommend you use high-quality jpg format image. You must keep a balance between size and definition.
I would come straight to the point:
PNG image or JPEG if forced to resize over its current form will produce lower quality output. Best way is to use 1600px wide and whatever length image you have and use image optimization softwares such as OptiPNG, PNGQuant or XnView and compress the output image to gain substantial ammount of compression.
Something about dpi
It won't affect too much for desktop browsers, and meanwhile if yu have an image with initial dpi of 72, there will be no gains to put image over 72 dpi after it.
The solution i use
Most of the time, we work on illustrator for graphics, so we build SVG from them. SVG is scalable till the end of screens, no loss of quality at all. As far as PNG and JPEG are concerned it is much better to use larger dimension image and compress it will tools. There is one great online tool for this stuff Kraken
One beautiful Trick
In photoshop, gimp: try sharpen your image. Sharpening will increase edge contrast and you can hack around from bad surce image too.
As far as base64 is concerned, it is bad idea to put an HD image of around 110 KB's in code, every time user open's your site will get your 110KB wasted, let them be stored in cache through either css: .class{background:url('image'); position:cover;}.
The only way to get better results is by minimizing http request but that is too much of headache. As only method right now is too make a image sprites.
If you want an HD image then you should download an HD image and edit it in Photoshop where you can solve all your requirements bcoz it's the way it goes in industries.
Related
I work for a company that's going through a website redesign, and the designers have sent me a PSD file with mockups of the static pages. This is a typical parallax scrolling type deal that seems to be all the rage right now, and there are some large images in the mockup that will end up on the site.
I've chopped out the relevant graphics from the PSD and saved them with JPG where I don't need transparency, however I'm forced to use PNG when I do and some of these images are pushing 500kb in size resulting in the page size totaling about 3 megabytes, and I'm not even done! This is also being saved with Photoshop's "Save for Web" feature.
Considering over half our traffic comes from mobile devices, this is a big problem. What are some good techniques to cut down on the size of these images?
Your first step should be to go back to the designers, tell them the design is too heavyweight and work with them to find a way to load fewer, lighter images.
Tools like PNGGauntlet and ImageOptim can help reduce the size of PNGs (and JPGs). They tend to get a better (smaller) result than just Save for Web alone.
Lazy loading images so they only get downloaded when they scroll into view is another technique to look into. Where possible, use built-in CSS tools such as gradients, shadows, and the like. Maybe a vector format like SVG can be used for some of the images?
And, as Kobus Myburgh hinted, you can use CSS media queries to load smaller background images on smaller screens. If they're all background images, you might be able to get away with stretching smaller ones (using CSS background-size) on larger screens. Foreground images are trickier, but something like picturefill or a srcset polyfill might do the trick.
I believe what you're looking for is "responsive images". Read more here for techniques to solve:
https://github.com/scottjehl/picturefill
This is but one example of responsive images. There are many out there. Try Googling the term.
Try some lossless compression techniques .
Reference :
Lossless compression of images
I am trying to have High quality Images on my site like these ones in the slider here http://www.viewbug.com/ but when I have the actual of the picture, it wont load fast enough, due to the big size. I tried to re size it with photoshop but the quality of my photo would decreased a lot . so for example the following picture on this site http://www.viewbug.com/media/featured/2892642_large.jpg is high quality but small in size 377 kb, and then they re-size it with html code height = 900 and width =640 without ruing the ration dimension and it looks just fine inside the slider. I googled and I didnt find any javascript or html code that does this. how can I compress my images without loosing the quality
I'm a photographer, so I do this a lot. I export my images with compression settings that are invisible to the eyes, but reduce images far smaller than the original. Unfortunately, Photoshop uses a different compression scale than most JPEG programs (and JPEG is the only efficient and compatible photograph format for the Internet), and so for Photoshop, one needs to use specific instructions.
Try this tutorial:
http://inobscuro.com/tutorials/optimizing-images-for-web-35/
so by using punypng u can get the solution for dat. PunyPNG is a free website optimization tool that dramatically reduces the file size of your images without any loss of quality.
I am putting some photos on my website and I do not know which syntax will load them quicker. My photos are usually 4300x3000 or 3000x4300 (which is from 7-10 MB per photo). I am using
#image {
max-height:500px;
max-width:750px;
}
When I viewed my website on a low-end PC, it took a lot of time to load. I do not want to use fixed height and width because I could have photos as big as 2500x2500 and that would cause a mess. What should I do to reduce the load time? Is there something like an “autoresize” that will keep the height to width ratio?
Compression
You should compress the images using some external software (if you are not using any other language apart from HTML and CSS). I would recommend Photoshop or GIMP.
That's the only way to improve the load: reducing the image weight. The forced resize is just loading the same amount of data from the server.
Improving quality of resized images:
If you are interested on improve the quality of the resized images, you can take a look at this article:
http://articles.tutorboy.com/2010/09/13/resize-images-in-same-quality/
Auto-resizable background
Loading image of 4.000 pixels is not a very common practice even in the websites with a full background. What it is usually done is loading a picture of about 1800-2000 pixels width and then adapt the image to bigger or smaller monitors using CSS preferable.
Here an article about that:
http://css-tricks.com/perfect-full-page-background-image/
Responsive images:
You can also load a different image depending on the predefined resolutions of your chose.
You will need to have multiple versions of each image though.
More information about it use.
My photos are usually 4300x3000 or 3000x4300 ( which is from 7-10
mb/photo ).
It has little or nothing to do with max-height versus height. The performance hit is coming from the original size of the image which causes the browser to:
download a large file
exercise a scaling algorithm against an enormous number of pixels
What should I do to reduce the load time? Is there something like an
autoresize that will keep the height to width ratio?
Create a smaller version(s) of the file when you upload it, and serve the small version. You can optionally open the original version when the user clicks on the small image.
You can create one or more copies of the file manually and upload them with different filenames.
A more elegant solution is to create one or more copies of the file programmatically (you didn't indicate server technology, but there are many options available). For example, Facebook creates six copies of each image you upload so that they can rapidly serve them in different places with the correct size.
Whether or not you do it automatically or manually, you may choose to adjust/crop the image to achieve the desired aspect ratio.
You should be resizing your images and loading those resized images instead if you want quicker loading. You could keep both large and small on disk and only load the large images when user clicks the link.
To resolve loading time
You have to compress your photos before uploading them to the server. Use export to web in photoshop, make sure the image size is reasonable (I would say never more than 1mb); You can also use image optimisation software (In Mac I would recommend JPEGmini).
You can, if you wish keep your large images in a folder in your site and link to them (so that one can download them if you allow this).
To resolve the ratio issue (square vs rectangle)
You can just use one of the properties and css will calculate the other. For example, if you put only
#image{
width:750px;
}
This will resolve the matter of things "getting messed up" if you mix rectangle images with square images.. Good luck!
See this:
http://real-sense.com/index.php?option=com_content&view=article&id=106
The set of vertical images on the right are being resized using CSS
.thumbnail-product-resize
{
width:144px;
height : auto;
}
Does anyone know how to do this in a cleaner way so I don't lose quality on the image?
I mean that if I had resized the image using photoshop, the text won't appear as blurry as it does here.
Tested in FF
Thanks
The quality of your images will depend on the original size of the image you use. If have a large image with good quality, say of size 400x500, and it is then resized in the HTML to 80x100, it will still be a 400x500 image. However you can only fit a certain number of pixels on a smaller image of 80x100, so this bigger image has to be sampled. This means that an average is taken of pixels and then made to represent a 80x100 size image.
If you want a more definite result you can change to original size of the image to 80x100. This will probably give you better results.
Once upon a time browser image resizing gave truly heinous results due to the unsophisticated nearest neighbor technique they used to scale images. Now they usually perform filtering when scaling and there isn't that much difference between in-browser resizing and resizing in Photoshop.
The real advantage to scaling an image before serving it to the client is that you aren't forcing the download of large images when they aren't necessary. Depending on the size of your images, this can significantly reduce your page load times.
One final thing to consider is that more and more people have devices with "retina" displays. For those users scaling the image before serving it will result in much less crisp images.
Here's an in-depth comparison of the image scaling methods used by various browsers: http://entropymine.com/resamplescope/notes/browsers/
Even if you had done this in photoshop those images you have would still appear pretty much the way do just now.
FYI you don't need to include height:auto in your CSS above.
Best bet would be to create a seperate set of thumbnails (using photoshop) which maybe just show a portion of the image.
Loading the thumbnails and resizing them with css the way you are doing is bad practice as you are still having the user download the large images first.
It is impossible to shrink an image without loosing quality unless it is an vector-image. That would mean that you'd have to use SVG. And considering the images displayed I don't think you wan't to do that.
Also you mentioned the cleaner way to do it, use photoshop or something similar.
I have a site which uses a large image as a background. It's a jpeg that's 134KB in size - I can't really get it below that so far. I have saved it for web in photoshop on low quality jpeg setting. It's dimensions are: 1920 x 1028.
How can I reduce the size further?
Could I resize it extremely small and resize it with width and height attributes in the image tag - as long as the aspect ratio is the same?
Its killing my page speed. Please help - any advice welcome.
Without knowing the picture I can provide different ways:
1)
If you dont want your picture to be too prominent in the background, try to blur it (could be a lot - depending on the picture!) -> then you can us a higher compression rate without seeing the artifacts too much.
2)
depending on your picture, try to reduce it to certain color-ranges (that you use a max. amount of colors) -> with this method you might end up using a .png or gif file, photoshop will show you what is best.
One last thought:
As this is you BACKGROUND image, try to keep it in 'the back' - this way you can try and alter (destroy) the image in a way to reduce colors! On the other hand, try using smaller pictures (800x600) and let css scale them, again - depending on your intention.
I use 1280x1024px bg-images at about 55Kb.
hope this helps.
Try smushing it http://www.smushit.com/ysmush.it/
Yes, you can use a smaller image. Your main options are
resize it on display (using something like <img
src="xxx" height="200%" width="200%">)
tile it
If it is a uniform background (pattern or similar), tiling probably looks nicer, as scaling up the image will degrade its visual quality. If it is a picture, you'll have to scale it.
I would definitely recommend resizing the image but keeping the aspect ratio. The smaller the better. Keep in mind however, that the smaller you go (less than 1:1), will reduce image quality. Having said that, generally image quality isn't mandatory to be super high for most backgrounds.
use Photoshop for resizing and make it according to your need such as 1024*800 or whatever u want,and then save it for web and device and there reduce the Optimized value of jpg hope it will work.
Unless you're willing to reduce the image's pixel resolution (like suggested by #sleske), there is probably no way to get image size much beyond what you have now. Photoshop's JPG export filter is top of the line in terms of quality vs. file size.
The only possible method could be splitting the image into sub-images, and compressing them with different settings ("slicing"). Large homogeneous areas can be saved at massively reduced quality without much visible loss, while detailed areas can retain higher quality. I think Photoshop has ImageReady for that.
If possible, save it as a GIF. GIFs are generally smaller than Jpegs.
you can use this online tool to reduce the size of image from MBs to KBs http://www.jpegmini.com/
I found a simple solution. It is to use office photo editor 2010 . just launch the application navigate to the directory with the images and simply click edit pictures on the right and then compress pictures . select what type you want i chose website. Successfully reduced size of jpg from 5mb to 50kb .
I tried many online image compressors but I liked this one most: http://compressimage.toolur.com/. You can play with various things like quality, compression methods etc.
You could have your server gzip images before sending in an htaccess file. (Assuming you run Apache)
If you have a lot of images, it could be intensive on your server's processor though.