Need help with image resizing (re: slow site)
-
I'm trying to figure out why I'm having speed issues with my site, and using google speed test to help me knock out some of the issues.
One of issues deals with image resizing. I have a responsive design and so even though on the home page the normal width is 580 of the blog area, the full post can go up to 1170. So I size all of my images to 1170 wide and let CSS resize them depending on the size of the browser. (The images on the most recent post are a little bigger than this because I was testing something.)
I was wondering what the best practice was in regard to what I'm trying to do.
Also feel free to check out my site and let me know of any other feedback / advice you have. Thanks !:)
-
Thanks a lot Keri,
These days with the online competition being so strong we should pay more attention to the website architecture, usability, visual impact, speed and technical problems. SEO it's so complex that you'll find yourself overwhelmed by the number of critical issues that needs to be addressed and fixed. Don't focus just on the content try to enhance every aspect of your page from to . Optimizing pictures takes only a few moments and you can use automated functions in Photoshop.
-
Another area to help with the images is to host them on a content distribution network.
Amazon is not the cheapest, but its the easiest for low volume.
A few stats:
I host about 4000 images on Amazon S3.
My bill is about 4 bucks a month.
You can put your images in a few areas (west coast vs east coast etc)....
This will help get your images closer to your audience, but it will not help you with the "last mile"
I had a customer uploading 7 MB images in Wisconsin using dial up....
can't help them...
I'm alos moving to Cloud Front, amazon Content Distribution Network...
Also, you use chrome to determine what's causing the delay.. many times, images are just part of a larger problem...
-
Hi Rick,
To the best of my knowledge, smushit compresses what it can while keeping the quality exactly the same. Saving for the web will lower the quality to "looking good on screen" from "good enough to print and hang on your wall". I also looked at the most recent post about Noah standing, and saw that the original size was 1900 pixels wide -- you certainly want to resize that to the 1170 wide before uploading it.
Being a photographer with a portfolio, Coltaire can give you a lot more details than I can, and help guide you with settings to use in Photoshop to get pictures that still look great on the web but aren't bigger than they need to be.
-
Thanks for the kind words.
As I mentioned sometimes I like to do full width posts which are 1170 wide so if I use 800x600 the images won't show up correctly on full screen.
-
Rick, you have a wonderful son and the story of your website left me without words and I don't know if I can give you a good response at this moment... Try resizing them to 800x600, the size accommodates a lot of user screens / mobile traffic.
Have a wonderful day
-
Yes, i use catching. But like I said, saving it for 640 wouldn't work for me since I want image to show up bigger than that if the screen is 1170. I'm assuming the images wouldn't be able to be resized any bigger than 640 without looking stretched.
-
I never used that tool and I think it's ok to use it in some situations but you have a lot more control of the file saving for web in PS, lot more options and the quality loss is insignifiant.
Take a look at my Portfolio page. All of my files are 640x480px/72dpi/50-60quality/jpegs.
Also are you using any caching / minifing plugins?
-
I'm using smushit to make the file size smaller, but I need to be able to at least have 1170 for full width posts (like this one.) I don't think I need to use save for web if I'm using smush it do I?
Does having css resize the images cause a site to slow down a lot?
-
I think that your images are very big and are slowing down your page speed and affect your rankings. Why don't you try to scale and reduce the quality using the "Save for web" feature in PS, it's fast and you have the option to compare with the original file when saving? 800x600 , 640x480 px are large enough to be properly visualized, Think about the different screen resolutions your visitors have. I avoid using pictures larger than 100kb and my average picture quality when saved for web is 60%. Hope it helps.
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Changing top level navigation between site sections
We've got an internal proposal to change our top level nav depending on the section of the site. For example, on our homepage it might read: Products, Library, About with relevant links dropping down below. As we have varied products, the drop down underneath it would include the various families. When arriving on the product family page the top-level nav would change to represent more specific offerings. For example: xxx.com 1. Products; 2. Library; 3. About xxx.com/xxx 1. Product family 1; 2. Product family 2; 3. Product family 3; 4. Library; 5. About What are the SEO/UX implications of this? It seems confusing but allows more specific navigation via the main nav depending on the section of the site. Also it seems that an alternating TLN might not be too Google-friendly.
Web Design | | gwelch0 -
301 Redirect all pictures when moving to a new site?
We have 30,000 pictures on our site. Moz will return 404's on some occasionally, but Google seems to ignore those. Should I 301 redirect all those images when we move to a new site lay-out? Appreciate your views!
Web Design | | Discountvc0 -
Site is getting crushed by spam traffic and Google Webmaster Tools giving crawl warnings. Also...
Currently hosting a site I'm planning on moving to a new server ASAP, 301 redirecting and have a domain that has nice authority and very old. On the current site I need to clean up the blog. I have a few questions actually.... 1. I'd like to remove most of the blog articles as I want the new site to be very high quality, but isn't it dangerous to do a 301 redirect to the same page for all these articles? 2. I want to focus on the new site as the current site has too many issues but still managing to hang in their. is highly outdated yet I don't want to spend a ton of time on the site before the 301 redirect. With the Pigeon and Panda 4.0 rumors being released soon, I want to get the new site completed ASAP. Do you think it's better if I fix the 3. Would removing cloudflare make things better or worse with the crashing of my site due to high traffic (mainly spam on the blog.) 4. My best article by far is outdated, but should I waste time updating it before redirecting or should I just get the new site going? I did way too many guest posts thinking content is king, but at least checked the outgoing links Domain Auth, Page Auth, and MozTrust in OSE, but first off I'm going to remove a page that mentions I'm looking for guest bloggers. I tried to keep the posts relevant but at the time you could get away with 5. Anything I can do to slow down these spammers on Wordpress? I noticed most of them are checking for vulnerabilities but I'm keeping it up to date, have caching setup. Thanks!
Web Design | | eugenecomputergeeks0 -
Can Image File Names be Masked?
If we "mask" file names for our website but they are left their original name on the server, will Google notice this? Client wants to mask them in order to name them with keywords but not change on the actual server.
Web Design | | Atlanta-SMO0 -
New more "helpful" internal linking causing SERP & traffic drop?
Still dealing with the weird traffic drop on my website. I have removed a bunch of old links from a defunct blog, 301 thin pages, added text to remaining pages. I'm still stumped. So awhile ago I freshened up my website and thought I was "helping people" by making sure they could CONTACT the studio more easily... I added more links to the "contact page" I thought this would help conversions...This changed the number of links to my entire site....Would this be the problem with my ranking/traffic drop? http://bayareaboudoir.com/babinternal1.pdf
Web Design | | Squee1 -
For a varied product type or keywords group is it best to have several sites?
Hello everyone... Question: I have 7-8 generic keywords that I would like to rank for, is it possible for one site to rank highly for all these different keywords, or would this be best achieved by making 2 or 3 websites in total targeting different keywords (product sectors)? More info: We are in a niche industry & would like to know if it would be beneficial to have several websites made for specific product types rather than one main site? Although these sub classifications of products are nice, they are competitive as they have a high search volume Would it be better to build specific websites that only do that one type of product and have related keyword in domain, content & blogs on the site to that effect to increase relevance and positions as a result? Thanks
Web Design | | Ray_UK0 -
Recommendation for a company to make a site more mobile friendly?
Hiya, We have a client who uses us for SEO, and a separate company for web development. They have a fairly large site on a bespoke CMS. They're happy with the site, but the user experience on mobile devices is not right. Can anybody recommend a company specializing in that area? Preferably a UK company but not essential. Thanks 🙂
Web Design | | SteveOllington1 -
What's the best was to structure Product page information on my site?
Hi - I run a hobby related niche new / article / resource site (http://tinyurl.com/4eavaj4). One of the most critical components of the site is our product database. We don't actually sell anything directly - instead we monetize them by displaying relevant affiliate product feeds and price comparisons. However since the Panda update was implemented in February my traffic (particularly my long tail, product related traffic) has dropped off considerably. I had about a 20% drop in overall traffic, but have made up some of the ground in the past week. However I want to know once and for all how I should structure my product related information as I have a ton of great content that is ready to be published in this section but want to be sure I structure it the best possible way from a SEO standpoint. Here are a few different options I've come up with for displaying information about products on my site. For the purpose of these examples I am going to refer to all of the information that makes up my product pages collectively as "product profiles". Please let me know which is the best SEO wise (or if you have a better way of doing it let me know): - Option 1 - Current Method - Divide Content Sections into different pages / urls Example: http://tinyurl.com/4tpdlbl This is how the majority of my product profiles are currently structured. I did this to improve load times and to keep the total number of links per page down. In addition to the core product profile subpages: "Product Details","Compare Prices", **"**Product Review", "Hot Auctions", and "Checklists", I have the Checklists area further segmented by subset, each of which is on its own page that is only accessible through the main Checklists tab of the profile. - Option 2 - Everything on one url / page the old fashioned way, with everything available by scrolling vertically. This would make the page go on forever though. - Option 3 - Everything on one url / page, but visually segmented using css / javascript tabs. Example: http://tinyurl.com/4kqhauh I looked at the source code and all the page text is there, so it looks like it would be spider-able but you tell me. Or would another method of tabbing be better? My site is wordpress based so the functionality comes from a plugin. - Option 4 - Use post tabs that are technically all on the same page, but make each individual tab be accessible through its own suburl, all of which share the same core canonical url. Example: http://tinyurl.com/4bs9pjs Clicking on any of the individual tabs will result in something like ?postTabs=2 being appended to the core url. Example: http://tinyurl.com/4gvgufc Any input would be greatly appreciated asap! Thanks Mike
Web Design | | MikeATL0