I don't understand why Google Pagespeed reduces the quality of my image after resizing process:
This is the original image:
http://www.architetturaecosostenibile.it/images/stories/2014/smart-for-city-a.jpg
And this is the resized:
http://www.architetturaecosostenibile.it/images/stories/2014/480x248xsmart-for-city-a.jpg.pagespeed.ic.Yfy3eHlQsi.jpg
I need that resized images preserve the full quality, without any loss.
How I have to do?
mod_pagespeed should only resizes images if you have set explicit width and height attributes in your HTML and the resize_images filter is enabled. Is this image being resized to the wrong size for your site? Or do you have explicit width and height attributes, but still want the image at full size for some reason (ex: Retina display, zoom)?
You can turn this mod_pagespeed feature off with:
pagespeed DisableFilter resize_images;
Have to say I cannot see the diff in your 2 photos either.
That said, I think the setting you're after is:
ModPagespeedImageRecompressionQuality -1
See: https://developers.google.com/speed/pagespeed/module/filter-image-optimize#recompressionquality
This keeps all the image_rewrite filters working, but enables lossless compression when recompressing images.
Well, you should just modify which filters are enabled. Look here: https://developers.google.com/speed/pagespeed/module/filter-image-optimize.
You're probably using pagespeed EnableFilters rewrite_images; to optimize the images. Don't. (If you're not, then I'll change my answer).
rewrite_images is an alias for inline_images,recompress_images,convert_png_to_jpeg,resize_images, so just enable the ones you need:
pagespeed EnableFilters inline_images,resize_images
If you're not using nginx, then just use the appropriate Apache syntax or the correct filters if you're using the Pagespeed cdn service.
I honestly don't see a difference on my screen (not using a retina display). So Google might not be serving the right image in that it isn't respecting the difference for retina.
Look here: http://code.tutsplus.com/tutorials/the-right-way-to-retinafy-your-websites--net-31793
Looking at how the PageSpeed service (the scoring one not the module / cdn) scores things helps explain the logic behind the module / cdn because the latter follows the evaluative logic of the former.
Fix Google PageSpeed's "Serve scaled images" for responsive layout
A quick jab via Twitter: https://twitter.com/hkfoster/status/303480645785624578
Basically: if the problem is with retina screens, then you should just turn off the resize_images filter.
You can try to specify the width and height attributes in your image tag. This might solve the image resizing by Google's Pagespeed.
It seems that Google Pagespeed sometimes resizes images (and not only compresses them).
You can read more here:
Weird pagespeed URL for PNG image?
If you really want to delve deeper into the different attributes regarding Pagespeed image compression you can read more in the Google Pagespeed docs:
https://developers.google.com/speed/pagespeed/module/filter-image-optimize
Hope this solves your problem,
Tom.
Related
I use Google Cloud Storage for images. Images get uploaded to my Google App Engine based server. To serve the images I use the feature that allows image scaling. Just appending =sXXX to the image scales it to the desired XXX size for the largest side. Pecurliar that omitting =sXXX suffix scales to 512 pixels.
In order to NOT scale, one has to add =s0. This is what I do.
Sometimes, not always, I get this interesting problem. Serving URL uses =s0 suffix to ensure the original image gets download. Here is the example, which works
bread image, original size, =s0 suffix
It should work, this is documented in this Google App Engine article:
Images Python API Overview and also in this article Uploading, Resizing and Serving images with Google Cloud Platform
However for some images it does not work. Example:
This does not work:
http://lh3.googleusercontent.com/Kwj_Fe938vOxsVw9KFILW-MaxoNJlGinxfAHqj4_3bSxhHWPoSLXb5zXGn5k7V4BJgWRlgD1zvULpmjCnFhE1Q=s0
However removing the suffix =s0, shows image all right.
http://lh3.googleusercontent.com/Kwj_Fe938vOxsVw9KFILW-MaxoNJlGinxfAHqj4_3bSxhHWPoSLXb5zXGn5k7V4BJgWRlgD1zvULpmjCnFhE1Q
At least some other sXXX suffixes work
http://lh3.googleusercontent.com/Kwj_Fe938vOxsVw9KFILW-MaxoNJlGinxfAHqj4_3bSxhHWPoSLXb5zXGn5k7V4BJgWRlgD1zvULpmjCnFhE1Q=s250
So far I have not found a pattern. Looking at Google's bug repository for Cloud Storage does not reveal anyting useful.
Anyone has an idea where to look?
This is more of a feature request. I am easily able to generate the PNG by calling toDataURL on the returned canvas. But the quality of the image is rather blurry/poor. I did some googling & found out that by default it just returns an image at 96 dpi. And there doesnt seem to be a standard way of improving this. Also the toDataURLHD is experimental and does not work any ways.
Is there any way html2canvas can return an image at a higher resolution? Or even if it can provide a way to get the DOM being rendered, I can use some library that uses the DOM (with all the computed styles applied to it) and then generate whatever image I want.
I am unable to comment so writing answer. #shiv probably you should look the quesiton setting canvas toDataURL jpg quality
Google PageSpeed Insights is saying that I should compress and resize several images.
Here's an example:
I saved this image using Photoshop's Save for Web JPEG High preset:
What can I do to this image to avoid Google's "compress and resize" warning?
Due to the small number of different colours that image seems to have, you'd probably get a much smaller image if you exported it as a gif, or png-8. Sitepoint has a useful article on when to choose which image format.
This is what works for me and JPEG to be on the safe side of PageSpeed Insights.
File > Save for Web & Devices
Not only do you need to find the right compression settings but also you need to stick to your img tag actual dimension. If you know your max width for img tag will be 555 px then save your JPEG to that dimension, not a pixel more ... as for how it goes along with retina display, it seems Google does not take this criteria in account right now.
If you are not happy with the resulting quality (and you might be if you have a designer ecommerce site) you need to bypass Google recommendation - knowing it could slightly penalize your SEO over someone else that actually stick to the rule.
You don't mention if you are using the Chrome extension or the main website? Assuming the former you can actually download the optimised version of an image by clicking the 'See optimised content' link under 'Suggestions for this page'.
Img here:
i'm buildling a website and I want to create a translucid menu. I know that .gif image types enable transparency, but from my experience, not translucidy(anything between being transparent and opaque) - by default it seems to set the opacity to 100%, ie a solid image without any translucity/transparency.
I'm not sure if the issue is with the file type, or with how I'm exporting my menu. If it's worth anything, I'm using Fireworks to create and export my menu.
As is, I'm exporting my seperate files for my menu as .pngs, which seem to support translucent images, but I know that I'll be wanting to reduce the file size of these images soon, so is there a better alternative to getting a semi-transparent image other than using the .png file type?
Thanks,
Patrick
I'd say PNG is probably the best bet. The more modern browsers (read: not IE6) understand the 8-bit alpha channel it provides, whereas GIFs just have the transparency key.
Often these days, the bottleneck on sites isn't the size of the image (either in dimensions or in data) but rather the number of requests that it takes to load a page. More modern website designs try to pack as many images into one using techniques like CSS Spriting (woot.com, most of google). The other bottleneck is often not setting caching up correctly, forcing return visitors to reload a bunch of stuff.
You'll see google's various pages caching everything it can, and reducing the number of things a single page needs to download (combine all Javascripts into one, all CSS stylesheets into one) so that the browser is make 2 and 3 requests instead of 15-20.
I'd go with PNGs, and look into CSS sprites and caching as an alternative optimization.
See here for an example of an image sprite used on google's homepage.
how can you specify which image you want to show on when sharing an article? Now it just picks random images from our site which aren't relevant. I tried adding an image_src link to the head of my site but this didn't help. Any idea how you can do this?
The API of LinkedIn doesn't tell us how:
http://developer.linkedin.com/docs/DOC-1075
Kind regards,
Daan
There is currently no way to specify a thumbnail. They don't seem to use oEmbed, OpenGraph or image_src. However, you can trick it into picking a specific image.
Make your image 62x62 pixels (other sizes will likely work, but non-square aspect ratios failed for us in the combinations we tried). Also, make it the first IMG tag in the document.
If you don't want users to see that image on your site, you can hide it with postion:absolute and right:-999px.