Search Results for 'image sizes'

Hi, Radu
that would be awesome. I switched from using the child theme so as to not impact my pagespeed adventures, and so the custom CSS I put at bottom of style.css didn’t have an impact in the way the child/style.css did. Being able to tweak a few things here or there with either a custom.css file, or perhaps more appropriately these days a “hook” to drop some code in the head at bottom before the body tag (Woo Themes does this fairly well, btw; they have all these little ‘hook’ locations to drop in code, although it does add a slew of if/then crap; disclosure we’re trying to ramp up your theme to replace Woo Canvas!).

So for us to be semi-done and in full “go mode” my laundry list of stuff needed is simply:
1) Google async alignment in top bar
2) websafe fonts option – which would save me hacking that one
3) custom.css injection hook in head, to over-ride couple of minor things (like making the author box bio text size smaller, when making the post side larger so the author bio isn’t over-large from the base adjustment)
4) not critical; but option to have a local image for author box (add new user meta field for ‘author image’ — we used to do this on our in house theme, not difficult) to not pull gravatar and save some bandwidth from external site — if you wanted to wow the kids, you could add a “grab my image from gravatar” option 😉 Peeps love the “automagical” stuff.

Otherwise, for us — you’re done! I’m hoping the v3 won’t introduce new issues, but right now we’re very happy.

BTW: for ‘web safe’ fonts, Adobe came up with some really quite brilliant ‘stacks’ of the best font mix to use across Mac, Windows, iOS, Android, et al. They can be found in Dreamweaver, and possibly their help system – but if you need those, just let me know. Much nicer than the old skool ‘Helvetica, arial, sans-serif’ stack. 🙂

• This reply was modified 12 years by simchris.
• This reply was modified 12 years by simchris.

Ooops: one more.

For those who are testing for speed-speed-speed and want to fix all their “you could optimize image xyz” warnings. I actually wrote an article on this once upon a time on my old site no longer seen anywhere since it was behind a login.

BASICALLY:
1) backup all your images
2) install the wp regenerate thumbnails plugin
3) check your wp settings > media and make sure the S / M /L sizes match what is being used by theme so you don’t end up with more thumbs than needed (seriously this is the #1 mistake folks make with thumbnails in general)
4) add the following code to your functions.php file in the theme root at the end –or– in your child theme (TIP: stop using a child theme)
add_filter( 'jpeg_quality', create_function( '', 'return 50;' ) );
5) run the regenerate thumbnails plugin under wp admin > tools

Voila!~ go rerun your speed test with Google and magically no more “you need to optimize image xyz to save 5kb” crap.

If your images don’t look as sparkly as they did, you can always delete the thumbs, put your original images back, and then try changing the “50” to “60” if you prefer.

For all those thumbnails all over the place “50” is recommended setting, and this uses both the built-in function of wordpress for images which hooks into the image mod stuff on the server. UPSHOT: when you make this change to your functions.php file – ALL YOUR FUTURE IMAGE THUMBS will be compressed automatically.

No more extra plugin to do that unless you really want to.
Simple. Easy. Quick.

Some our sites generate 2+ million page views per month and have been online 14 years with 230,000 inbound sites for pagerank. We have been managing our own servers since 1996, and ran a hosting company from 1996-2005. We did Oprah Winfrey’s ecom solution for her “Begin with Love” videos a decade ago. Pretty savvy. We are also PCI-DSS certified, and have weathered serious server attacks so have complex security stuff in place. ‘=)

We do use nginx along with Apache 2.2 – for instance phpmyadmin runs on nginx. 32GB of RAM, dedicated 1GB switch at SoftLayer in Texas. Power to burn. Replaced our 2008 server with 12GB RAM and 8 cores. Wild times compared to the days of, say Cobalt RaQ4 (google it).

Still playing with mod_pagespeed stuff as they have lots of cool things like “inline_google_font_css” (Inlines small CSS files used by fonts.googleapis.com into the HTML document.) which I’ve not yet been able to get working. Defer javasceript is another one built-in which is cool.

Stable version from November, edge version from January, and you can’t mix ’em.

Anyway… I’m trying to find the balance of the traditional hacks
1) mods to the wp-config.php
2) mods to functions.php
3) mods to htaccess (Apache)
4) manual optimization of css file if a rewrite system breaks it
5) upload best practice optimized images to begin with; generate smaller thumbs to start with using built-in compression of WordPress vs plugin for initial files; remove duplicate sizes in media setup to match theme size

6) use mod_pagespeed to manage cache (with memcache, eAccelerator, APC, etc.); rewrite on the fly to cache copies with comments removed, delete white space (instant minification!); combine CSS, combine JS, etc.

6) when all that fails to keep a “92” dump the CSS/JS onto the CDN, keep images local.

This is my mission for January. Once done, I’ll have a better sense of what actually works and what is truly a fool’s errand.

BTW: my friends at GTMetrix have a nice plugin for WordPress for testing/tracking pagespeed adventures (recommended!).

MOre later in the pagespeed “forum” here 🙂

I will probably end up doing some kind of ebook for this whole shenanigans.

Chris

• This reply was modified 12 years by simchris.

were using w3 cache / div tag speed boost and MaxCDN – 685ms load time is the result

http://postimg.org/image/pl24nqilb/

fix image sizes etc with pixlr.com – save to 80% or lossless / lossy with kraken.io and stay away from facebook plugins that load faces.

Our next step https://www.cloudflare.com/railgun

and not to brag but 98/100 mobile and 98/100 desktop

http://developers.google.com/speed/pagespeed/insights/?url=twoversion.com

• This reply was modified 12 years by circuitsports.

This is exactly what I was looking for.

My site currently has around 3gigs of images, so the multiple copies the Newspaper theme creates is not a good idea for my site.

If I want to quote out the sizes I am not using, is this something I can add to the child theme?

This may not help you, but Regenerate thumbnails plugin worked great for us with thousands of files.

http://wordpress.org/plugins/regenerate-thumbnails/

HOWEVER: if your system “times out” then you need to disable other plugins while doing a large operation on so many images – especially if you have larger then needed images (like if you uploaded 1MB files for images vs 50kb for a gallery picture, as one example), and perhaps set your website to “closed temporarily” (plugin to do this I think). Upshot is you want to
1) make sure your domain on your hosting plan has enough resources available to do a major operation
2) make sure you have enough disk space for all the new image sizes (some people with smaller hosting storage forget about this, as you’re basically perhaps tripling the number of images you will have from say 18,000 to 36,000 (3 old thumbs, 3 new thumbs)

So, plugin will “die” if not enough memory to run or space to write.

If your system still cannot handle doing that much image processing, you may want to look at the Jetpack plugin, PHOTON: http://jetpack.me/support/photon/ .

When you change to ANY new theme in WP you need to redo the image thumbnails as not all themes use the same layout, or thumbnail sizes, which of course is one of the things which makes each WP theme different.

Note that you may wish to also review the various plugins at wordpress.org on this topic as redoing all your graphics is part of using ANY new theme; it’s not specific to this theme.

Auto Post Thumbnail PRO for $7 from Themeforest also works awesome on one of our sites since we pull in content from our mothership site to a sister site via RSS.

Sorry don’t have better help on this one.

The Slide it changes sizes of some of the photos. I did the regenerate on site day I started with it. The slider before template the heads are not cut off. I reuploaded the images and still same thing.

Also when I log into mobile Ipad or galaxy phone the front logo appears then it goes to the 16×16 Icon Logo.

Already rebuilt the thumbnails, so that’s cool. Not all look good anymore with this theme, so still having to redo them.

I just wanted to add a feature image that is a reasonable size, like 326 x 235 as that will keep my website fast, but then it does not fit into all the places and looks bad most of the time, but if I upload 700 x 357 its a big file as I have over 300 posts on my site and by the time I add all those images that’s getting too big.

I know Google is going to complain about page speed and that affects my ranking, so I am trying to balance it all up.

If the large 700 x 357 placeholder did not keep showing up under category page at the top, then I would not use that large size anywhere, if you tell me how to remove that top post which just seemed to be pulled from the first post, then that should make things all work out.

I am happy to do css, htaccess and php as long as you are clear where I am making alterations, prefer custom css if possible, but not sure you have that with this theme.

Happy to sue a child theme, in fact after custom css, it would be my next best choice.

Ok I went to another forum (wordpress.org) and was given help there.
From what I can gather I load the largest image which in this case is 1074 x 483 for the large slider, and then wordpress creates all the other image sizes by a standard cropping method, by installing a plugin that allows access to all those images I can choose how to crop them.

In the meantime I am working in Photoshop to find out the best way to set up the largest slider image so that when it gets cropped I stand the best chance of having a usable image.

I guess if I went for uploading just the 700 x 357 it will get stretched, but so far have not seen how that might look.

Will come back with a better answer once I have played with this a bit.

Update: Played with this a bit and if I start in Photoshop with a image size of 250 X 167 it appears to up size through all the different image sizes without a problem, so creating it first in that size then increasing the size to the largest image size possible which is 1074 x 483 would appear to work.

The plugin I am using to try and do it inside wordpress is Manual Image Crop which seems fine.

Hopefully this will solve at least this problem.

• This reply was modified 12 years by Lolly.
• This reply was modified 12 years by Lolly. Reason: update

I went and resized some images to the 700 x 357 and it crops them when using it in other places, that would be ok except when the image includes writing and its chopped part way through! lol

Wishing I had stayed with the previous theme as I still need an answer that will work and not crop images and I worry there will be no help till next year or after xmas.

I will keep looking for a plugin that serves the correct size images, but I think this should be part of this theme since it has so many different image sizes.

One more thing how do you make image sizes it work with the slider? I just added the correct size but it cropped it for some of the other sizes.

I might switch over to the revolution slider as at least I decided the size of everything, but I really think it would take too much time mucking around as I intend to add at least 3 new posts each week, and revolution to look really good takes me time to set up.

• This reply was modified 12 years by Lolly. Reason: spelling

Hi Christopher, I was just about to ask you to help me with image sizes! lol

I was reading through all your speed up website stuff (spent last 2 days getting my basic website (with enfold theme) up to high numbers) it started of low but now have it at 80/100 mobile and 92/100 for desktop via Google page speed, and GTMetrix is now 99% and 92% and I wont be using CDN at this time so don’t expect to get much higher on the Yslow Grade.

Thanks for helping with the images, my website is at a standstill as I could not work out the images and kept trying to find a plugin and was looking at scripts and hating it! lol

Dont suppose you are able to answer any of my other problems? So wish I had not added the theme, my other one was set up perfectly, but I felt it was leaking juice all over the place and this site looked like it would be fast out of the box and leek less juice and work well for a silo, but now I just have to hide it and know it could be what I am still trying to fix on xmas day instead of having fun!

What I do is use the full size images on the post page, as featured image, and then WP creates the smaller thumbnails to use on indexes and home page.

You would only start with smaller images if you’re only using those for a non post element.

So, start with an article and the main image for a featured image of 700×406 for the big image, and then the smaller ones get built automatically (e.g., 100×65, 326×159, etc.).

At least that’s how it works for me.
Hope that helped. 🙂

The short answer:
Start with post; then indexes are built from the post, not the other way around. Use big image for big image, then small images built by WordPress.

Interesting. My install doesn’t create that many versions. I wonder if you’re using another plugin which also creates thumbnails like another related post plugin. One way to check is look at your pages and count how many different size images are actually in use, such as home, category, sidebar, footer, related, etc.

ONE TRICK: figure out the small and medium sizes made by the theme, and then change those sizes in the media manager in wordpress which creates thumbnails, so you’re not making three extra sizes from the WP install itself … (small/medium/large).

This is an oooold issue with WP creating S/M/L thumbnails “automatically” while the theme makes sizes it needs. So, idea is to have WP auto create sizes that match what the theme is doing.

Of course, if you have 100,000 images in any folder that may be a limit imposed by hosting provider.

Not sure that helped.

vidapropria
1) reduce image sizes either by running compression plugin and/or adding compression factor to your functions file
2) faster server account, if you keep seeing “slow response from server” error — that was a [!] item on your last report speed check — nothing can be done about that with the theme, or in WP; that is how fast the account you have and your hosting provider is responding to ping/start showing the page. For example if you have a $5/month account, upgrade to $10/month account (I’m just using that as example). Low cost accounts are usually on a machine or VPS being shared with 1,000+ other sites. Slightly more costly hosting accounts give more resources to each site, by sharing the resource pool with fewer domains.

Verify deflate/gzip working; remember this only serves up faster versions of your content, but doesn’t optimize them prior to that. I think I saw a 100K image file in your last report … that is waaaaaaaaay too big. Try using smushit plugin and regenerate thumbnails to see if that helps? (Backup images first as changes to images on server will be destructive — meaning they are changed and cannot be unchanged).

Also, for testing if you’re using a child theme, be sure to try NOT using a child theme to see if that gains you a point.

However RECOMMENDED:
1) optimize images before/after upload
2) look at better hosting – if you keep getting “slow to respond” error from Google — no way around that on your side.
3) test without using DISQUS, as this does slow things down. We stopped using it for that reason. We’re leaning toward phasing out comments on most sites, per industry practice now that most comments tend to be trolls and arguments (see: CNN for example). Any comments plugin really slows stuff down on WP. Unless you gain ad revenue from 10,000 visitors per day, it’s not really an essential plugin, and more of a glamour thing (in my opinion).
4) turn off all jetpack stuff for speed test — anything that connects to the WP/Automattic mothership adds latency.

Hope that helped 🙂

————–
as an aside on pagespeed errors:
I’m actually dealing with even more arcane stuff like how to enqueue the parent Theme’s style sheet in the child Theme’s functions.php, to bypass the annoying @import not recommended error from Google which the Automattic folks seem to think is a non-issue. I will post my efforts on THAT noise if anybody cares.

[ UPDATED ]
I just ran your GPS test, and saw you’re up to 82/100 desktop. So, looks like you’re making progress. The images issue is the next thing you need to resolve. You’ll have several points for that, as reducing the footprint of your images speeds up page (e.g., if you go from 300K to 150KB; that’s 50% less time loading images!).

For the minification stuff… note you would need to use a plugin for that (WPminify) although this has some issues; -or- you need to manually minify SOME resources which are not already reduced in size. RADU doesn’t minify all the code as developers have a hard time modifying code if they can’t read it.

So, if you knew there were a couple of large CSS/JS files you might want to minify, you can easily do that using an online tool (I use this one, although it won’t work with IE11/Win7 properly … use Chrome or similar: http://refresh-sf.com/yui/ )

Basically, “minification” of CSS and Java/js files removes the extra spaces, comments, and line breaks to make file “more compact” … so if you had a 125Kb CSS file, by removing all the spaces, line breaks, comments, it might end up being 100Kb, which is the kind of reduction that PageSpeed looks at — the idea being if you had 5 files being loaded on page and you reduced all of them by 20kb – well, that’s 100Kb and is larger than what website developers like me used for the entire page and graphics 10 years ago (we used to shoot for 50kb max page load, if you can imagine that!) …

• This reply was modified 12 years by simchris.

ya, i found it..tnx 🙂 is in functions.php