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:
Related
recently I made a website for my photography. htttp://www.simotamas.com
I am a newbie, so its not the best site but it works fine for me, I got only one problem, when a site is loaded on a device for the first time, the gallery loading time takes up to 1-2 seconds.
Could you guys please check if I mess up something with the code?
Or should I made the pictures even smaller?
Any way I could increase the loading performance.
I would be really thankful for any advice.
Some points you can consider
Use thumbnails for preview (low resolution) , while clicking load actual image.
Load images of only visible part first then load the images in bottom. (May affect user experience)
if you have cpu power , use any libraries like cache tools or compression tools like
https://nielse63.github.io/php-image-cache/ . benchmark it carefully.
use gzip if you are not using gzip compression for your server.
The fact your website doesn't wait for the image to load is considered a plus (look into asynchronous web page content loading for a good read) that said you should compress your images before uploading them.. tinypng.com is a nice tool for it... But if it's a photography website doing so would reduce picture quality... Try to play with Photoshop save settings to find your ideal compromise between quality and size with respect to "memory" size... Pictures are heavy.. high definition and resolution will obviously result in heavier files to download
Update: another thing you could do is actually display (smaller) thumbnail and only load the full picture on request. I.e: user clicks and image opens in new tab
It would help if you create smaller thumb versions of your images so the browser can initially load these ones for the overview and no need for scaling way to big images down while rendering the page. An image should always be downloaded in the dimension it's going to be presented.
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.
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.
This may well be a little of an open-ended question
The site I am working on requires to be optimised for performance. One of the key areas is to optimise the file sizes of the images used upon the site.
Unfortunatley these images are being created by employees who do not have the required knowledge for creating images for the web, and it is my job to produce a set of guidelines for them to use.
I was wondering whether there was any resource/guidlines/literature regarding typical images file sizes for images of different dimensions - as I would like to include something like this to aid them to ensure their images are being created properly.
Any info would be greatly appreciated.
Thanks in advance
I can't answer the opinion question, but I can suggest some guidelines that will keep your images smaller.
First off, if they're using Photoshop to edit their images, it's likely they're storing a whole bunch of crap in the headers (digital papertrail, EXIF data, and such). Also, folks will frequently save in too high a bit depth.
For novice users, trying to explain why they need to use "save for web" is more likely to confuse them. Instead, just point them at:
http://www.smushit.com/ysmush.it/
This site is rather handy - it will compress all the images on a page you specify, or you can upload the images.
You should strongly consider writing some guidelines about where images are stored as well. It's frequently very beneficial to have your static image content stored on several servers, apart from your dynamic content. Most browsers will only download a limited # of files at a time from any given website (usually it's 2).
Unless there's a good reason, all your images should be cached using one of the HTTP cache techniques (expires, etags, etc).
Good luck.
72 dpi as a resolution and either jpeg or png formats work best.
Try to use images at the exact pixel area size they will end up being displayed as. This is specified by the images height and width attributes.
You can set the output quality of a jpeg image which will also save file size although there is a trade off against image quality.
I hope this is of use.
We would like to display very large (50mb plus) images in Internet Explorer. We would like to avoid compression as compression algorithms are not what CSI would have us believe that they are and the resulting files are too lossy.
As a result, we have come up with two options: Silverlight Deep Zoom or a Flash based solution (such as Zoomify). The issue is that both of these require conversion to a tiled output and/or conversion to a specific file type (Zoomify supports a single proprietary file type, PFF).
What we are wondering is if a solution exists which will allow us to view the image without a conversion before hand.
PS: I know that you can write an application to tile the images (as needed or after the load process) and output them; however, we would like to do this without chopping up the file.
The tiled approach really is the right way to do it.
Your users don't want to download a 50mb file before they can start viewing the image. You don't want to spend the bandwidth to serve 50 megs to every user who might only view a fraction of your image.
If you serve the whole file, users will eventually be able to load and view it, but it won't run smoothly for most of them.
There is no simple non-tiled way to serve just a portion of an image unless you want to use a server-side library like imagemagik or PIL to extract a specific subset of the image for each user. You probably don't want to do that because it will place a significant load on your server.
Alternatively, you might use something like google's map tool to provide zooming and scaling. Some comments on doing that are available here:
http://webtide.wordpress.com/2008/08/27/custom-google-maps/
Take a look at OpenSeadragon. To make a image can work with OpenSeadragon, you should generate a zoomable image format which mentioned here. Then follow starting guide here
The browser isn't going to smoothly load a 50 meg file; if you don't chop it up, there's no reasonable way to make it not lag.
If you dont want to tile, you could have the server open the file and render a screen sized view of the image for display in the browser at the particular zoom resolution requested. This way you arent sending 50 meg files across the line when someone only wants to get an overview of the image. That is, the browser requests a set of coordinates and an output size in pixels, the server opens the larger image and creates a smaller image that fits the desired view, and sends that back to the web browser.
As far as compression, you say its too lossy, but if thats what you are seeing you are probably using the wrong compression algorithm or setting for the type of image you have. The jpg format has quality settings to control lossiness, and PNG compression is lossless (the pixels you get after decompressing are the exact values you had prior to compression). So consider changing what you are using as compression, and dont just rely on the default settings in an image editor.